前端-VUE-指令directive

VUE-指令
创建局部指令
　　new Vue({
　　 el: '#app',
　　 directives: {
　　　　focus: {// 指令名
　　　　 inserted: function (el, binding) {// 指令触发方式
　　　　　　el.focus()// 动做
　　　　 }
　　　　}
　　 }
　　})
创建全局指令
　　Vue.directive('test', function (el, binding) {
　　　　// 简写方式设置文本及背景颜色
　　　　el.innerHTML = binding.value.text
　　　　el.style.backgroundColor = binding.value.color
　　})
触发方式
　　bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
　　inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
　　update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
　　componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
　　unbind: 只调用一次， 指令与元素解绑时调用。
参数说明
　　el: 指令所绑定的元素，可以用来直接操作 DOM 。
　　binding:{
　　　　name: 指令名，不包括 v- 前缀。
　　　　value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。
　　　　oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
　　　　expression: 绑定值的表达式或变量名。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
　　　　arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
　　　　modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
　　　　vnode: Vue 编译生成的虚拟节点。
　　}
使用示例
　　<input v-focus v-test>

Vue.directive("hello",{
　　//el : 指令所绑定的元素，可以用来直接操作DOM
　　//binding: 一个对象，包含指令的很多信息
　　//vnode: VUE编译生成的虚拟节点
　　//oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
　　bind:function(el,bingind,vnode,oldVnode){//bind 只调用一次，指令第一次绑定到元素时候调用
　　　　el.style["color"] = bingind.value;
　　　　console.log("1-bind");
　　},
　　inserted:function(el,bingind,vnode,oldVnode){//inserted:被绑定的元素插入父节点的时候调用(父节点存在即可调用，不必存在document中)
　　　　console.log("2-insert");
　　},
　　update:function(el,bingind,vnode,oldVnode){//update: 被绑定与元素所在模板更新时调用，而且无论绑定值是否有变化，通过比较更新前后的绑定值，忽略不必要的模板更新
　　　　console.log("3-update");
　　},
　　componentUpdated:function(el,bingind,vnode,oldVnode){//componentUpdate :被绑定的元素所在模板完成一次更新更新周期的时候调用
　　　　console.log('4 - componentUpdated');
　　},
　　unbind:function(el,bingind,vnode,oldVnode){//unbind: 只调用一次，指令月元素解绑的时候调用
　　　　console.log('5 - unbind');
　　}
})

指令使用：
<span v-hello="color3">testdirective</span>