近期所学的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。

05-06 06:26