vue-学习笔记2

'</tr>', '</tbody>', '</table>' ].join(''));
use: <partial name="agreement-list"></partial>
## 事件系统 var parent = new Vue({
template: '', created: function () {
<child msg="hello!"></child>
## prop 绑定类型 <location v-ref:location :province.sync="form.province" :city.sync="form.city"></location>
sync显式双向绑定 once一次性绑 默认情况下，单向绑定
vue-学习笔记2
## 通过 prop 传递数据 默认情况下，组件有独立作用域。这意味着你无法在子组件的模板中引用父级的数据。为了传递数据到拥有独立作用域的子组件中，我们 需要用到 prop。
一个 “prop” 是指组件的数据对象上的一个预期会从父级组件取得的字段。一个子组件需要通过 prop 选项显式声明它希望获得的 prop：
this.$on('child-created', function (child) { console.log('new child created: ') console.log(child)
}) }, components: {
child: { created: function () {
this.$dispatch('child-created', this) } } } }).$mount()
'</thead>', '<tbody>',
'<tr v-for="item in list">', '<td>{{item.agreementCode}}</td>', '<td>{{panyName}}</td>', '<td>{{statusText[item.status + ""]}}</td>', '<td>{{item.dealId}}</td>',
/*指令简写方式 -- 绑定两个类及一个点击事件*/ <input :class="['class1','class2']" type="text" @click="submitForm" />
1.
绑定click事件
<a @click="doSomething"></a>
绑定动态属性
<a :href="url"></a>
2. <!-- 阻止单击事件冒泡 --> <a @click.stop="doSomething"></a>
<!-- 只在按下回车键的时候触发事件 --> <input @keyup.enter="submit">
3. <!-- debounce 设置一个最小的延时 --> <input v-model="note" debounce="500">
<!-- 在 "change" 而不是 "input" 事件中更新数据 --> <input v-model="msg" lazy>
## 私有资源 Vue.partial('agreement-list', [
'<h3>协议列表</h3>', '<table class="c-app-list-table">',
'<thead>', '<tr>', '<th>协议号</th>', '<th>企业名称</th>', '<th>状态</th>', '<th>DealId</th>', '</tr>',
## 组件生命周期 每一个组件，或者说 Vue 的实例，都有着自己的生命周期：它会被创建、编译、插入、移除，最终销毁。在这每一个时间点，实例都会 触发相应的事件，而在创建实例或者定义组件时，我们可以传入生命周期钩子函数来响应这些事件 var MyComponent = Vue.extend({ created: function () {
## 子组件引用 v-ref : <location v-ref:location :provincnc="form.city"></location>
## 路由
和Angular一样，Vue也具有它的路由功能。通过路由功能，我们可以实现各个组件的按需加载，轻松构建单页应用
ponent('child', { props: ['msg'], // 声明 prop // prop 可以在模板内部被使用， // 也可以类似 `this.msg` 这样来赋值 template: '<span>{{msg}}</span>' })
然后，我们可以像这样向这个组件传递数据：
console.log('An instance of MyComponent has been created!') } })
## 简写方式
/* v-bind: 用来绑定对象或者元素及属性的[比如class,自定义属性,一个对象]; v-on:用来绑定事件的[比如click,submit等]
缩写方式 v-bind: === : v-on: === @ */ /*常规的vue写法 -- 绑定两个类及一个点击事件*/ <input v-bind:class="['class1','class2']" type="text" v-on:click="submitForm" />