vue.js自定义指令详解

写在文本前：相信在做vue的项目，你肯定接触了指令，我们常用vue内置的一些指令，比如v-model,v-text,v-if,v-show等等，但是这些内置指令不在本文的讲解范畴，本文想说的是其自定义指令。思考一下，自定义指令我们用在哪里？是不是一下子想不出来，感觉做一般的项目很少用到指令呢，想不到指令用在哪！！因为我们的确很少用，但不是说不会用。看官方api文档里有这么一句话：普通 DOM 元素进行底层操作，这时候就会用到自定义指令。也就是说我们在操作普通DOM的时候有可能会用到。在做项目的时候，我们有很多种方法来替代自定义指令，所以让我们忽略了vue自定义指令的用处。下边我们一步步来了解vue自定义指令。

举几个栗子

（1、输入框焦点自动触发。
（1、输入框的电话号码，邮箱，身份证号码等的校验。

上面这几个场合，我们在做项目的时候完全可以用其他方法代替，但是vue自定义指令能让我们做到一劳永逸，做到一处定义，全局调用。使其代码简洁高效，维护方便。接下来，我们会一步步深入vue自定义指令。

1、首先看下官方介绍，如下：

/*  自定义指 */
import Vue from 'vue'
/**
 * 模板
 * v-lang
 * 五个注册指令的钩子函数
 */
Vue.directive('mydirective', {
  /**
   * 1.被绑定
   * 做绑定的准备工作
   * 比如添加事件监听器，或是其他只需要执行一次的复杂操作
   */
  bind: function(el, binding, vnode) {
    console.log('1 - bind');
  },
  // 2.绑定到节点
  inserted: function(el, binding, vnode) {
    console.log('2 - inserted');
  },
  /**
   * 3.组件更新
   * 根据获得的新值执行对应的更新
   * 对于初始值也会调用一次
   */
  update: function(el, binding, vnode, oldVnode) {
    console.log('3 - update');
  },
  // 4.组件更新完成
  componentUpdated: function(el, binding, vnode, oldVnode) {
    console.log('4 - componentUpdated');
  },
  /**
   * 5.解绑
   * 做清理操作
   * 比如移除bind时绑定的事件监听器
   */
  unbind: function(el, binding, vnode) {
    console.log('5 - bind');
  }
})
/**
钩子函数
1、bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
2、inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
3、update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
4、componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
5、unbind:只调用一次，指令与元素解绑时调用。
*/

执行顺序：
页面加载时

bind
inserted

组件更新时

update
componentUpdated

卸载组件时

unbind

官方地址请移步至，directive，上面只是做了个简单的说明，接下来我们详细的介绍vue自定义指令的各个钩子函数到底如何触发。

2、钩子函数简单讲解

就个人而言, bind和update也许是这五个里面最有用的两个钩子了.这个也是我们下边主要要说的2个钩子函数。其它函数不常用，我也没搞明白。

（1）钩子函数 bind

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

<input id="input1" v-mydirective> // html元素

Vue.directive('mydirective', {
  bind: function(el, binding, vnode) {
   el.style.border = "1px solid red"
  }
}

上面代码的效果就是输入框的边框变成了1像素的红色。当然你也可以设置其它试试。

<input id="input1" v-mydirective> // html元素

Vue.directive('mydirective', {
  bind: function(el, binding, vnode) {
    el.addEventListener('click', function (event) {
        alert('hellow world')
    })
  }
}

在bind钩子函数里，我们可以添加一些事件，在其某种条件下触发（比如点击事件，键盘事件），如上代码，点击input输入框就会弹出 “hellow world”。至于bind里面的参数的含义，建议自己动手输入出来看看。很简单是吧，下边我们来些稍微复杂一点的。看如下代码：

指令钩子函数会被传入以下参数：

/**
钩子函数的参数：(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钩子函数中可用。
*/

这里我们着重注意一下，binding对象下的value，oldValue，arg，expression，modifiers这几个属性，根据这几个属性，我们可以做到更强大的自定义指令，下边我们参考案例来说：

<div v-mydirective:left="100" id=”box"></div> // html元素

Vue.directive('mydirective', {
  bind: function(el, binding, vnode) {
       el.style.position = 'fixed';
       const s = (binding.arg === 'left' ? 'left' : 'top');
       el.style[s] = binding.value + 'px';
  }
}

上面的代码是使id=”box“的这个div元素绝对定位了，而且设置了left的值为100px；

（2）钩子函数 update

update:每当元素本身更新(但是子元素还未更新)时触发。这句话怎么理解呢？我们用案例来说明，如下：

<template>
  <div id="box">
       <input v-model="myname" v-mydirective/>
  </div>
<template>
export default {
  data(){
    return{
      myname:"zhangshan"
    }
  },
  directives:{
    'mydirective':{
         update: function(el, binding, vnode, oldVnode) {
              console.log('update更新了');
         }
    }
  }
}

上边代码，输入框默认值是"zhangshan",如果我们修改了myname值，那么就会触发update函数的执行，输出“update更新了”

再来个复杂一点的案例如下：

<template>
  <div id="box">
       <input type="text" v-model="myname"  v-mydirective="{type:'name',val:myname}"/>
       <input type="text" v-model="myemail"  v-mydirective="{type:'email',val:myemail}"/>
  </div>
<template>
export default {
  data(){
    return{
      myname:"zhangshan",
      myemail:'***@163.com'
    }
  },
  directives:{
    'mydirective':{
         update: function(el, binding, vnode, oldVnode) {
           //update：指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 
           if(binding.oldValue.val != binding.value.val){// 进行判断,避免同时触发多个判断
             let checkStatus = true;// 定义验证状态 局部变量
             if(binding.value.type == 'name'){
                   if(binding.value.val.length>5){
                        checkStatus = false;
                        console.log("输入的姓名长度大于5了")
                   }
             }
             if(binding.value.type == 'email'){// 验证邮箱
               if(!/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-   z0-9]+$/g.test(binding.value.val)){
                  checkStatus = false;
               }
             }
             if(checkStatus){
                el.style.border = "1px solid #333";//验证通过input边框颜色就变成#333
             }else{
                el.style.border = "1px solid red";//验证不通过input边框颜色就变成红色
             }
         }
       }
    }
  }
}

上边的案例，我们通过bind下的modifiers属性实现。modifiers：一个包含修饰符的对象；例如：v-my-directive.a.b，modifiers的值为{'a':true,'b':true}。这样我们在update钩子函数里根据所传入的type类型做判断来执行哪个验证方法。

（3）钩子函数 inserted

inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。

<input id="input1" v-mydirective> // html元素

Vue.directive('mydirective', {
  inserted: function(el, binding, vnode) {
    el.focus()//输入框自动获取焦点
  }
}

对于钩子函数 inserted，我也是一知半解，所用的不多，但是有个常用的方法是写在这里面的，就是输入框自动获取焦点，也就是上面的代码。

（4）钩子函数 bind和钩子函数 inserted的区别。
据文档所说，插入父节点时调用 inserted，来个测试。
bind: function (el) {
 console.log(el.parentNode) // null
 console.log('bind')
},
inserted: function (el) {
 console.log(el.parentNode) // <div id="login">...</div>这个元素是指令所在元素的父元素，具体根据自己的写法不同
 console.log('inserted')
}

分别在两个钩子函数中输出父节点：bind 时父节点为 null，inserted 时父节点存在。

（5）钩子函数 componentUpdated和钩子函数 unbind
 // 4.组件更新完成
  componentUpdated: function(el, binding, vnode, oldVnode) {
        console.log('4 - componentUpdated')
  },
   /*** 5.解绑
     * 做清理操作
     * 比如移除bind时绑定的事件监听器
   */
    unbind: function(el, binding, vnode) {
       console.log('5 - bind');
    }

对于这2个钩子函数，没有做太多的研究，unbind可能会用到，用于释放实例资源占用等操作。

关于vue.js指令大致也就说这么多吧，如果错误，欢迎指正拍砖......

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,732评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,496评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,264评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,807评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,806评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,675评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,029评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,683评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 41,704评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1赞 332
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,413评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,016评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2赞 343