watcher-
key与v-for -
v-on:click.native=""绑定原生事件？ - 过滤器
- 数据更新检测
$event- 事件修饰符：
.stop/.prevent/.capture/.self - 按键修饰符（别名）
-
v-model具体原理
与v-bind动态绑定结合
修饰符.lazy/.number/.trim
组件
- 全局注册
// 注册
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
// 创建根实例
new Vue({
el: '#example'
})
- 局部注册
var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
// ...
components: {
// <my-component> 将只在父模板可用
'my-component': Child
}
})
-
is属性的使用
<ul>，<ol>，<table>，<select>限制了能被它包裹的元素
<table>
<tr is="my-row"></tr>
</table>
- 组件中，
data必须为函数
data: function () {
return {
counter: 0
}
}
- 组件间传值
-
props父传子
子组件需要显式地用props选项 声明 “prop”：
Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样，prop 可以用在模板内
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: '<span>{{ message }}</span>'
})
传入值为：
- 普通字符串
<child message="hello!"></child>
（使用非字符串模版时的命名格式转换） - 动态表达式
<div>
<input v-model="parentMsg">
<br>
<child v-bind:my-message="parentMsg"></child>
</div>
如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。
-
props验证
当prop验证失败了， Vue 将拒绝在子组件上设置此值，如果使用的是开发版本会抛出一条警告。
Vue.component('example', {
props: {
// 基础类型检测 （`null` 意思是任何类型都可以）
propA: Number,
// 多种类型
propB: [String, Number],
// 必传且是字符串
propC: {
type: String,
required: true
},
// 数字，有默认值
propD: {
type: Number,
default: 100
},
// 数组／对象的默认值应当由一个工厂函数返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10
}
}
}
})
- 自定义事件子传父
- 非父子组建通信
