vue之指令篇 ps简单的对比angular

标签：

这两天在开始vue的大型项目，发现和ng还是有许多不同，这里对比下两者的指令系统

难度系数：ng的指令难度大于vue；至少vue上暂时没发现@&=；require，compile，precompile，postcompile之类的小型地雷。。。

这篇文章只看表象；何为指令？这里借助ng的解释来解释vue，就是当你的项目中，需要一些dom操作，并且MVMM自带的事件指令感觉麻烦的时候，可以把一些dom操作封装到一个公共方法，这就是指令，大概用在vue上也可以说个70%；

写法，vue：

Vue.directive(‘my-directive‘, {

  bind: function () {
    // 准备工作
    // 这里可以写一些公共方法，比如点击一个块那些东西hide，show
其中this.el就是那个挂载指令的dom点，

  },
  update: function (newValue, oldValue) {
    // 值更新时的工作
    // 也会以初始值为参数调用一次
  },
  unbind: function () {
    // 清理工作
    // 例如，删除 bind() 添加的事件监听器
  }
})

指令内部可以定义多个属性，可以理解为一个指令具备一个作用域scope，但是这个作用域能否为false；和外部公用一个作用域，不清楚，不过个人理解应该不可以的，因为

vue把ng指令里的tenplate项拆开了变成组件component，当然，这个好坏个人感官不同，不过component貌似也不可以设置scope为false，需要prop进行传参，类似

ng的&@=绑定，当然比之要简单许多；

对于ng这里不多讲，想要了解，自行参看本人github上一个独立完成的未上线的成品ng项目（angular1+ui-router）：当时那个坑，一个人独自摸索，头都大了。。。

https://github.com/lyz1991/the-project-of-angular (ps：广告，希望进入了得最好关注下，虽然只是个游荡各个场所的菜鸟)

重点讲vue的指令(纯属个人一天的实验理解)

首先三大方法(其实应该是n个，三个是主流)，bind，update，unbind；

字面意思：bind:主要是我为我当前添加指令的那个dom点需要添加哪些事件可以写在这里，比如为一个dom添加一个click事件,为指令第一个执行的方法

update：为值放生变化时候执行的方法，其实应该是指令继bind后第二个执行的方法；unbind：指令离开时候触发的方法(这个暂时具体有什么意义还不清楚)；

可能文字不太清楚，两个demo来解释下

第一个，一个简单的长按指令

 Vue.directive(‘longTap‘, {
      params: [‘idx‘],//这个和下面的timer可以简单理解为jq插件的defaults，区别就是上面的是动态的，放在html上，值是根据data进行赋值的；
      timer: null,
      bind: function () {
        var self = this
        var arge = this.expression
        this.change = function (x) {
          self.vm.$data[arge] = x
        }
        this.el.addEventListener(‘touchstart‘, function () {
          self.timer = setTimeout(function () {
            self.change(self.params.idx)
          }, 1000) }
        )
        this.el.addEventListener(‘touchmove‘, function () {
          clearTimeout(self.timer)
        })
        this.el.addEventListener(‘touchend‘, function () {
          clearTimeout(self.timer)
        })
      }
    })

第二个就是vue官网的demo；

Vue.directive(‘demo‘, {
  bind: function () {
    console.log(‘demo bound!‘)
  },
  update: function (value) {
    this.el.innerHTML =
      ‘name - ‘       + this.name + ‘<br>‘ +
      ‘expression - ‘ + this.expression + ‘<br>‘ +
      ‘argument - ‘   + this.arg + ‘<br>‘ +
      ‘modifiers - ‘  + JSON.stringify(this.modifiers) + ‘<br>‘ +
      ‘value - ‘      + value//注意这里的value是你属性上的的表达式解析后的值
  }
})
var demo = new Vue({
  el: ‘#demo‘,
  data: {
    msg: ‘hello!‘
  }
})

params和arg

首先arg是紧跟着指令后面，而params是和指令之间有个空格；

用处区别。我给的是个动态参数需要data解析的用前者，非动态用后者；其中后者的值可以通过update里的value获取得到，update有两个参数

注意如果是字符串，必须要要写修饰符literal，如果是对象可以不写；params的用处可以动态传参，那么arg的用处何在呢？其实我想了半天也没想到什么好的用处，也就是点击时候对应模块show，hide传参数显示；注意这里如果在update里面直接获取value的节点是获取不到报错；这个value当作为指令本身的值，也就是不存在arg的时候。可以认为具备了动态的作用；对应的引入一个属性：acceptStatement:他的意思是解析一个表达式；

常用的应该是这几个吧，剩下的三个改天再说；

vue之指令篇 ps简单的对比angular

标签：

原文地址：http://www.cnblogs.com/lyz1991/p/5565628.html