vue自定义指令实现方法详解

你要了解关于“vue自定义指令实现方法”的详细攻略，下面为你详细讲解。

什么是Vue自定义指令？

在Vue中，自定义指令是一种用来扩展标准的HTML指令的一种方式。除了内置的$v-cloak指令，Vue还允许注册自定义指令，使开发者可以在模板中直接使用自定义的指令。

Vue自定义指令的注册

定义一个全局自定义指令的方式：

Vue.directive('my-directive', {
  bind: function (el, binding) {
    //绑定时候触发
  },
  inserted: function (el, binding) {
    //节点插入时候触发
  },
  update: function (el, binding) {
    //组件更新时候触发
  },
  componentUpdated: function (el, binding) {
    //组件更新完成之后触发
  },
  unbind: function (el, binding) {
    //解除绑定时触发
  }
})

定义一个局部自定义指令的方式：

new Vue({
  directives: {
    'my-directive': {
      //定义指令函数
      bind: function (el, binding) {
        //绑定时候触发
      }
    }
  }
})

自定义指令的钩子函数

自定义指令的钩子函数的意义和生命周期基本一致，主要用于对绑定元素进行一些操作或监听，以下是常用的几个钩子函数。

bind

指令第一次绑定到元素时候发生，只发生一次。

示例：

Vue.directive('focus', {
  //当绑定元素插入到 DOM 中。
  inserted: function (el) {
    el.focus()
  }
})

update

指令在元素数据更新时候发生，而无论是数据更新导致的还是组件被单纯的重新渲染都会触发这个钩子函数。

示例：

Vue.directive('demo', {
  bind (el, binding, vnode) {
    if (binding.expression) {
      console.log(binding.expression + '指令第一次绑定到元素时触发')
    }
  },
  update (el, binding, vnode) {
    if (binding.expression) {
      console.log(binding.expression + '指令更新时触发')
    }
  }
})

unbind

指令与元素解绑的时候发生，只发生一次。

示例：

Vue.directive('demo', {
  bind (el, binding, vnode) {
    if (binding.expression) {
      console.log(binding.expression + '指令第一次绑定到元素时触发')
    }
  },
  unbind (el, binding, vnode) {
    if (binding.expression) {
      console.log(binding.expression + '指令解绑时触发')
    }
  }
})

示例说明

示例1：实现图片加载动画效果

实现图片在加载的过程中，显示一个加载动画。

代码如下：

HTML部分：

<div id="app">
  <img v-loadsrc="imgurl" alt="">
</div>

JS部分：

//自定义图片加载指令
Vue.directive('loadsrc', {
  bind: function(el, binding) {
    var img = new Image();
    img.src = binding.value;
    el.src = 'loading.gif';
    img.onload = function() {
      el.src = binding.value;
    }
  }
})

new Vue({
  el: '#app',
  data: {
    imgurl: 'xxx.jpg'
  }
})

示例2：实现在输入框输入字数的动态计算

实现在textarea输入框中，实时统计字数的功能。

代码如下：

HTML部分：

<div id="app">
  <textarea v-count="msg"></textarea>
  <p>已输入 {{msg.length}} 字</p>
</div>

JS部分：

Vue.directive('count',{
  bind:function(el,binding,vnode,oldVnode){
    var textarea = el.nodeName.toLowerCase() === 'textarea' ? el : el.querySelector('textarea');
    var totalCount = binding.expression * 1; //规定的字数
    var counter;
    textarea.addEventListener('input',function(){
        var val = this.value;
        var len = val.length;
        if(!counter){
            //vnode.context 就是 vue 组件
            counter = document.createElement('p');
            vnode.context.$el.appendChild(counter);
        }
        counter.innerHTML = '已输入 '+ len +' 字';
    })
  }
})

new Vue({
  el: '#app',
  data: {
    msg: 'hello world'
  }
})

以上就是关于Vue自定义指令的详细攻略，希望对你有所帮助。