学习笔记
1.钩子函数
（1）bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
（2）inserted 被绑定元素插入父节点时调用
（3）update 所在组件的 VNode 更新时调用
（4）componentUpdated 指令所在组件的 VNode 及其子 VNode 全部更新后调用
（5）unbind 只调用一次，指令与元素解绑时调用
2.钩子函数的参数
（1）el el就是元素的缩写 ，el 代表绑定指定的元素
（2）binding 是一个对象 ，包含绑定元素的 相关信息和一些方法
（3）vnode Vue 编译生成的虚拟节点（参考官网）
（4）oldVnode 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用
1.vue全局指令注册
vue全局指令 注册 通过vue下面的directive方法 注册指令
<!-- //添加 颜色，宽，高指令 -->
<!-- //引入vue框架文件 -->
<script type="text/javascript" src="./js/vue.js"></script>
<div class="app">
<input type="text" v-model="msg.color" v-stl="msg" />
<p>{{msg}}</p>
</div>
<script>
//全局注册的 方法 Vue.directive('指令名称',{对象})；
Vue.directive('stl', {
inserted: function(el,
binding) { // inserted是一个钩子函数 ，钩子函数中的el是指定所绑定的元素 ， binding 是一个对象包含 指定绑定元素的 信息（name，value。。。）
console.log(el); //打印 el
console.log(binding); //打印 binding
el.style.color = binding.value.color;
el.style.width = binding.value.width;
el.style.height = binding.value.height;
}
})
var vm = new Vue({
el: '.app',
data: {
msg: {
color: 'red',
width: '120px',
height: '200px'
}
}
})
</script>
2.vue局部指令注册
是通过在vue 实例里面的 directives 函数 注册 局部指令
<!-- //添加 颜色，宽，高的局部指令指令 -->
<!-- //引入vue.js -->
<script src="./js/vue.js"></script>
<div class="app">
<input type="text" v-model="msg" v-color="msg">
</div>
<script>
var vm = new Vue({
el: '.app',
data: {
msg: {
color: 'red',
width: '120px',
height: '60px'
}
},
directives: {
color: {
inserted: function(el, binding) {
console.log(el);
console.log(binding)
el.style.color = binding.value.color;
el.style.width = binding.value.width;
el.style.height = binding.value.height;
}
}
}
})
</script>
