not ending
可复用性&组合
混入——mixin
即混入逻辑代码
混入对象的钩子将在组件自身钩子之前调用。
值为对象的选项，如components，directives，methods，将被合并为同一个对象。两个对象键名冲突时，取组件对象的健值对。
- 局部混入
//定义一个混入对象
var myMixin = {
data:function(){
return {
message: 'hello',
foo:'abc'
}
},
created:function(){
this.hello()
},
methods:{
hello:function(){
console.log('hello frim mixin');
},
conflicting:function(){
console.log('from mixin')
}
}
};
//定义一个使用混入对象的组件
var Component = Vue.extend({
mixins:[myMixin],
conflict:function(){
console.log('from self');
}
});
var vm = new Component()//=>'hello frim mixin'
vm.conflicting()//=>'from self'
- 全局混入
会影响每个之后创建的Vue实例（包括第三方组件）。——慎用。
Vue.mixin({
created:function(){
var myOption = this.$options.myOption;
if(myOption){
console.log(myOption)
}
}
})
new Vue({
myoPtion:'hello'
})//=>'hello'
自定义指令
- 全局指令
//注册一个全局自定义指令"v-focus"
Vue.directive('focus',{
//当被绑定的元素插入到DOM中时....
inserted:function(el){
//聚焦元素
el.focus()
}
})
- 局部指令
directives:{
focus:{
//指令的定义
inserted:function(el){
el.focus()
}
}
}
//在模板中任何元素上使用新的v-focus属性
<input v-focus>
钩子函数参数
- el:指令所绑定的元素，可用来直接操作DOM
- binding：一个对象，包含以下属性
- name 指令名，不包含v-前缀
- value 指令绑定的值
- oldValue 指令绑定的前一个值，仅在undate和componentUpdated钩子中可用。
- expression：字符串形式的指令表达式
- arg：传给指令的参数
- modofiers：一个包含修饰符的对象
- vnode：虚拟节点
- oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子函数中可用
//例子一
Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = binding.value
});
//例子二
<div v-demo="{color:'white',text:'hello'}"></div>
Vue.directive('demo',function(el,binding){
console.log(binding.value.color)//white
console.log(binding.value.text)/hello
})
