## 按键修饰符
全部的按键别名:enter,tab,delete,esc,space,up,down,left,right
## 其他实例
new Vue({ el: '#demo', data: { newLabel: '', stats: stats }, methods: { add: function (e) { e.preventDefault() if (!this.newLabel) { return; } this.stats.push({ label: this.newLabel, value: 100 }); this.newLabel = ''; }, remove: function (stat) { if (this.stats.length > 3) { this.stats.$remove(stat); // 注意这里的$remove } else { alert('Can't delete more!') } } }});
七、过渡
CSS 过渡
hello
然后为 .expand-transition, .expand-enter 和 .expand-leave 添加 CSS 规则:/* 必需 */.expand-transition { transition: all .3s ease; height: 30px; padding: 10px; background-color: #eee; overflow: hidden;}/* .expand-enter 定义进入的开始状态 *//* .expand-leave 定义离开的结束状态 */.expand-enter, .expand-leave { height: 0; padding: 0 10px; opacity: 0;}
你可以在同一元素上通过动态绑定实现不同的过渡:
hello
new Vue({ el: '...', data: { show: false, transitionName: 'fade' }}
另外,可以提供 JavaScript 钩子:
Vue.transition('expand', { beforeEnter: function (el) { el.textContent = 'beforeEnter' }, enter: function (el) { el.textContent = 'enter' }, afterEnter: function (el) { el.textContent = 'afterEnter' }, enterCancelled: function (el) { // handle cancellation }, beforeLeave: function (el) { el.textContent = 'beforeLeave' }, leave: function (el) { el.textContent = 'leave' }, afterLeave: function (el) { el.textContent = 'afterLeave' }, leaveCancelled: function (el) { // handle cancellation }});
八、组件
1.注册
// 定义var MyComponent = Vue.extend({ template: 'A custom component!
'});// 注册Vue.component('my-component', MyComponent);// 创建根实例new Vue({ el: '#example'});
或者直接写成:Vue.component('my-component', { template: 'A custom component!
'}); // 创建根实例new Vue({ el: '#example'});
2.使用prop 传递数据
实例一:
Vue.component('child', { // 声明 props props: ['msg'], // prop 可以用在模板内 // 可以用 `this.msg` 设置 template: '{{ msg }}'});
实例二:
Vue.component('child', { // camelCase in JavaScript props: ['myMessage'], template: '{{ myMessage }}' });
3.动态props
使用 v-bind 的缩写语法通常更简单:
4.Prop 绑定类型
prop 默认是单向绑定:当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。不过,也可以使用 .sync 或 .once 绑定修饰符显式地强制双向或单次绑定:
比较语法:
其他实例: custom header
5.Prop 验证
组件可以为 props 指定验证要求。当组件给其他人使用时这很有用,因为这些验证要求构成了组件的 API,确保其他人正确地使用组件。此时 props 的值是一个对象,包含验证要求:
Vue.component('example', { props: { // 基础类型检测 (`null` 意思是任何类型都可以) propA: Number, // 必需且是字符串 propB: { type: String, required: true }, // 数字,有默认值 propC: { type: Number, default: 100 }, // 对象/数组的默认值应当由一个函数返回 propD: { type: Object, default: function () { return { msg: 'hello' } } }, // 指定这个 prop 为双向绑定 // 如果绑定类型不对将抛出一条警告 propE: { twoWay: true }, // 自定义验证函数 propF: { validator: function (value) { return value > 10 } }, // 转换函数(1.0.12 新增) // 在设置值之前转换值 propG: { coerce: function (val) { return val + '' // 将值转换为字符串 } }, propH: { coerce: function (val) { return JSON.parse(val) // 将 JSON 字符串转换为对象 } } }});
其他实例:
Vue.component('modal', { template: '#modal-template', props: { show: { type: Boolean, required: true, twoWay: true } }});
6.注册
// 定义var MyComponent = Vue.extend({ template: 'A custom component!
'});// 注册Vue.component('my-component', MyComponent);// 创建根实例new Vue({ el: '#example'});
或者直接写成:
Vue.component('my-component', { template: 'A custom component!
'}); // 创建根实例new Vue({ el: '#example'});
7.使用prop 传递数据
实例一:
Vue.component('child', { // 声明 props props: ['msg'], // prop 可以用在模板内 // 可以用 `this.msg` 设置 template: '{{ msg }}'});
实例二:
Vue.component('child', { // camelCase in JavaScript props: ['myMessage'], template: '{{ myMessage }}' });
8.动态props
使用 v-bind 的缩写语法通常更简单:
9.Prop 绑定类型
prop 默认是单向绑定:当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。不过,也可以使用 .sync 或 .once 绑定修饰符显式地强制双向或单次绑定:
比较语法:
其他实例:
custom header
10.Prop 验证
组件可以为 props 指定验证要求。当组件给其他人使用时这很有用,因为这些验证要求构成了组件的 API,确保其他人正确地使用组件。此时 props 的值是一个对象,包含验证要求:
Vue.component('example', { props: { // 基础类型检测 (`null` 意思是任何类型都可以) propA: Number, // 必需且是字符串 propB: { type: String, required: true }, // 数字,有默认值 propC: { type: Number, default: 100 }, // 对象/数组的默认值应当由一个函数返回 propD: { type: Object, default: function () { return { msg: 'hello' } } }, // 指定这个 prop 为双向绑定 // 如果绑定类型不对将抛出一条警告 propE: { twoWay: true }, // 自定义验证函数 propF: { validator: function (value) { return value > 10 } }, // 转换函数(1.0.12 新增) // 在设置值之前转换值 propG: { coerce: function (val) { return val + '' // 将值转换为字符串 } }, propH: { coerce: function (val) { return JSON.parse(val) // 将 JSON 字符串转换为对象 } } }});
其他实例:
Vue.component('modal', { template: '#modal-template', props: { show: { type: Boolean, required: true, twoWay: true } }});
11.使用slot分发内容
元素作为组件模板之中的内容分发插槽。这个元素自身将被替换。
有 name 特性的 slot 称为命名 slot。 有 slot 特性的内容将分发到名字相匹配的命名 slot。
例如,假定我们有一个 multi-insertion 组件,它的模板为:
父组件模板:
One
Two
Default A
渲染结果为:
One
Default A
Two