vue自定义指令及好用的指令

　　VUE框架的使用让我们前端开发从繁重的操作DOM工作中脱离出来，转向关注于数据的操作。但是有时候会想念操作DOM的日子，尤大大给我们提供了方法，他就是vue的自定义指令，一个可以操作底层DOM元素的通道。相信v-model,v-show这些vue自带的核心指令已经用烦了，今天写自己定义的指令。

　 一.指令注册及使用

　　自定义指令就和组件一样需要先注册再使用，那么也分为全局与局部。

　　1.全局注册

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

　　2.组件内注册

var vm = new Vue({
  el: '#app',
  directives:{
    focus:{
      inserted: function (el) {
        el.focus()
      }      
    }
  }
})

　　3.具体使用

<div id="app">
  <input v-focus>//v-focus就是我们前边注册指令
</div>

　　二.指令中的钩子函数

　　　指令的钩子函数和vue的生命周期钩子函数相似，在合适的时间点干正确的事情。

　　　1.bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

　　　2.inserted：被绑定元素插入父元素时调用（父节点存在即可，不一定非要在document中）

　　　3.update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 

　　　4.componentUpdated：所在组件的 VNode 及其孩子的 VNode 全部更新时调用。

　　　5.unbind：只调用一次，指令与元素解绑时调用。

　　三.钩子函数中的参数

　　　1.el：指令所绑定的元素，可以直接操作DOM元素。

　　　2.bind：这是一个对象，里边还有好多属性

　　　　 ①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 }。

　　3.vnode:Vue编译生成的虚拟节点
　　4.oldNode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

Vue.directive("yingaxiang",{
            // 当该指令第一次绑定到元素上时调用，只调用一次，可以用来执行初始化操作(简言之，指令绑定到元素)
            bind:function(){//常用！！！
                alert("当该指令第一次绑定到元素上时调用，只调用一次，可以用来执行初始化操作")
            },
            //被绑定有自定义指令的元素插入到DOM中时调用，在这里是插入到了#container中（简言之，元素插入到DOM元素中）
            inserted:function(){
                alert("被绑定有自定义指令的元素插入到DOM（父节点）中时调用，在这里是插入到了#container中")
            },
            // 当被绑定的元素所在模板更新时调用
            update:function(){
                alert("当被绑定的元素所在模板更新时调用")
            },
            // 当被绑定的元素所在模板完成一次更新时调用（模板更新后调用）
            componentUpdated:function(){
                alert("当被绑定的元素所在模板完成一次更新时调用（模板更新后调用）")
            },
            // 当指令和元素解绑的时候调用，只执行一次(因为毕竟解绑一次就完成了嘛！)
            unbind:function(){
                alert("当指令和元素解绑的时候调用，只执行一次(因为毕竟解绑一次就完成了嘛！)")
            }
        })

在git上看到的一些好的并且实用指令，支持npm下载
  
　　1.vue-lazyload图片懒加载
　　安装: npm install --save vue-lazyload
　　使用：<img v-lazy="./image.jpg">

　　2.v-Tooltip顶部提示消息
　　安装: npm install --save v-tooltip
　　使用：<button v-tooltip="You hanve" + count + "new maeeage">

　　3.v-clampy截断元素中的文本并在末尾加上省略号
　　安装：npm install --save @clampy-js/vue-clampy
　　使用：<p v-clampy="3">yingaxiang</p>

　　4.v-mask格式化时间
　　安装：npm install --save vue-inputmask
　　使用：<input type="text" v-mask="66/66/66">

　　5.v-ripple会给点击元素加一个波纹特效
　　安装：npm install --save vue-ripple-directive
　　使用：<div v-ripple>button</div>