vue中的自定义指令

自定义指令可以使我们对普通的DOM进行底层的操作

1.自定义指令的注册

例如：你想要在页面加载时，表单元素获取焦点，也就是说，只要你在打开这个页面后还没电吉国任何内容，这个输入框就已经处于聚焦状态

//注册一个全局自定义指令
Vue.directive('focus',{
	inserted:function(){//当元素被插入到DOM中时
		el.focus()//聚焦元素	
	}

})

如果想注册局部指令，组件中也接受一个directives的选项

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

然后你可以在模板中任何元素上使用v-focus属性

<input  v-focus>

2.自定义指令钩子函数

bind: 只调用一次，指令第一次绑定到元素时调用。用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用（父节点存在即可调用）
**update：**所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
**componentUpdated:**指令所在组件的VNode及其子vnode全部更新后调用
**unbind ：**只调用一次，指令与元素解绑时调用

3.自定义指令钩子函数参数

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钩子函数中可用。

自定义指令钩子函数的案例展示：

<div  id = "app">
    <my-comp v-if="msg" :msg="msg"></my-comp>
    <button @click="update">更新</button>
    <button @click="uninstall">卸载</button>
    <button @click="install">安装</button>
 </div>
 <script type="text/javascript">
      Vue.directive('hello', {
          bind: function (el){
             console.log('bind');
          },
          inserted: function (el){
            console.log('inserted');
        },
         update: function (el){
            console.log('update');
        },
         componentUpdated: function (el){
            console.log('componentUpdated');
        },
         unbind: function (el){
            console.log('unbind');
        }
   });

 var myComp = {
        template: '<h1 v-hello>{{msg}}</h1>',
        props: {
            msg: String
        }
    }

new Vue({
        el: '#app',
        data: {
            msg: 'Hello'
        },
	 components: {
            myComp: myComp
        },
         methods: {
            update: function (){
                this.msg = 'Hi';
            },
            uninstall: function (){
                this.msg = '';
            },
            install: function (){
                this.msg = 'Hello';
            }
        }
  })
 </script>

a、页面加载时：bind inserted
b、更新组件：update componentUpdated
c、卸载组件：unbind
d、重新安装组件：bind inserted

注意区别：
bind与inserted：bind时父节点为null，inserted时父节点存在；
update与componentUpdated：update是数据更新前，componentUpdated是数据更新后。

4.函数简写

大多数情况下，我们可能在bind和update钩子函数上做重复动作，并且不想短信其它的钩子函数。可以这样写

Vue.directive('color-swatch', function (el, binding) {
    el.style.backgroundColor = binding.value
})

5.对象字面量

如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法类型的 Javascript 表达式。

<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!"
 }）