本文共 1387 字，大约阅读时间需要 4 分钟。

近期所学的Vue.js这个MVVM前端技术缓解了我一直愁于前后端开发杂糅所带来的痛苦。今天就来说说关于Vue.js里面的Directive知识。

Directive

Directive看上去虽然和Angular中的定义类似，Directive都是对DOM功能的一种拓展，但是Vue的Directive要弱的多。

因为，Vue Component本来就包括对DOM的操作，所以大多数时候我们写一个通用组件都是一个Component而不是一

个Directive，但是在Angular中每写一个通用组件，一般都是一个Directive。所以，相对来说，Vue的Directive要纯粹

的多（它就是对DOM功能的一个拓展，而不是为了封装和DOM相关的逻辑）。

生命周期

生命周期分为三个阶段：

• bind　　　　:第一次绑定到DOM元素上的时候触发

• update bind:完成之后立即触发，以后每当参数更新的时候都会触发

• unbind　　  :解除和DOM元素的绑定时触发

其中，update是最重要的。update函数接收的参数就是用户通过Attr传入的值。

我们来举一个简单的Directive案例：

它的作用是对Todo List输入的内容进行校验（表单校验）。Directive基本结构为：

Vue.directive("minlength", {    bind: function() {    },    update: function() {    },    unbind: function() {   }});

接下来，我们需要在用户输入数据的时候进行校验，代码如下:

Vue.directive("minlength", {  bind: function() {    var self = this;    var el = this.el;    el.addEventListener("keydown", function(e) {      if(e.keyCode === 13) {        if(el.value.length < self.minlength) {          e.preventDefault();        }      }    });    var submit = el.parentNode.querySelector("button, [type='submit']");    submit.disabled = true;    el.addEventListener("keyup", function(e) {      submit.disabled = (el.value.length < self.minlength);    });  },  update: function(value) {    this.minlength = parseInt(value);  },  unbind: function() {    }});

从上述代码来看，Directive应该就是为了实现类似的功能存在的，当然还有很多其它的用法就不再细说了。

其次，Directive在Vue中并不是很重要的一块，所以，建议大家平时写代码的时候更多还是写Component。

转载地址：https://buildupchao.blog.csdn.net/article/details/53536889 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！