vue 自定义指令

自定义指令

http://www.cnblogs.com/ilovexiaoming/p/6840383.html
https://www.jianshu.com/p/c2bef47439ab
https://www.imooc.com/article/42891
https://blog.youkuaiyun.com/Myinlg/article/details/81092974

8.1、自定义指令：使用Vue.directive(id,definition)注册全局自定义指令，使用组件的directives选项注册局部自定义指令。

Vue.directive(“focus”,{
    bind:function(){
    },
    inserted:function(){
    },...
})

简写指令：

在 bind 和 update 钩子上做重复动作，并且不想关心其它的钩子函数
Vue.directive("focus",function(){
				
})

钩子函数：

	指令定义函数提供了几个钩子函数（可选）：
	
	bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
	
	inserted：被绑定元素插入DOM(父节点)时调用（父节点存在即可调用，不必存在于 document 中）。
	
	update：第一次是紧跟在 bind 之后调用，获得的参数是绑定的初始值，之后被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
	
	componentUpdated：被绑定元素所在模板完成一次更新周期时调用。
	
	unbind：只调用一次， 指令与元素解绑时调用。

钩子函数的参数：(el, binding, vnode, oldVnode)

	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.a.b，modifiers的值为{'a':true,'b':true}

	vnode：Vue编译的生成虚拟节点；
	
	oldVnode：上一次的虚拟节点，仅在update和componentUpdated钩子函数中可用。

<span v-bgcolor="1+1">11111</span>
            
            <h1 v-bgcolor="‘blue’">
				111
			   <i>333</i>

全局 简写：（bind update）

	Vue.directive("bgcolor",function(el,binding,vnode){
				//console.log(el);//设置的目标元素
				//console.log(binding);//设置值的相关信息
//				console.log(binding.value);//2,结果
//				console.log(binding.expression);//1+1 过程
				//console.log(vnode);//所有信息，包含子元素
			    el.style.background=binding.value;
			})
			
			

局部

directives: {
			  focus: {
			    // 指令的定义
			    inserted: function (el) {
			      el.focus()
			    }
			  }
			}

自定义键盘信息 只有全局

  <input type="text" @keydown.ct="show()"/>
    Vue.config.keyCodes.ct=17;//ctrl
    

vue.js怎样移除绑定的点击事件

  第一种方法一定要加（）
  <p @click="flag && clickEvent()"></p>
  
第二种方法
  <button v-if="!unbind" v-on:click="addClick">点击</button>
  <button v-else >点击</button>

  然后在data里添加unbind=false属性，需要解绑的时候将其设置为true