你也许不知道的Vuejs - 强大的指令系统

by yugasun from https://yugasun.com/post/you-may-not-know-vuejs-3.html 本文可全文转载，但需要保留原作者和出处。

在 Vuejs 中，指令（Directives）是带有 v- 前缀的特殊属性。指令属性的预期值是 单个 Javascript 表达式（v-for 是个例外）。指令的职责是，当表达式改变时，将其产生的连带影响，响应式的作用于 DOM。

当然，Vue 除了核心功能默认内置的指令外，更强大的是它允许注册自定义指令，这是个让我非常惊喜功能。因为当初在使用 Angular1.x 时就特别喜好自定义指令这个功能，没想到 Vue 也借鉴了进来，让我能够灵活对 DOM 进行底层操作，而且它具有非常高的复用性，书写起来也非常简洁。

当然在 Vue 中，代码的复用和抽象的主要形式还是 组件，这将在下一节中讲到。

内置指令

Vue 提供供了大概 13 种内置指令，基本上能够满足我们的日常开发需求，不得不说作者考虑的已经非常全面，给尤大大点赞。这里只介绍 v-for、v-on 两种内置指令，感兴趣的可以到官方 API 了解。

1.v-for

上一节我们已经使用过了，它是基于源数据多次渲染元素或莫板块的。此指令的值，必须使用特定语法 alias in expression 来进行输出。 expression 为需要遍历的对象，它可以是 Array | Object | number | string 四种类型，alias 为遍历的元素别名。这个跟 js 的遍历函数 map 很相似，先来看个例子：

<div id="app1">
  <ul>
    <li v-for="item in 5">{{ item }}</li>
  </ul>
</div>

var app1 = new Vue({
  el: '#app1',
})

这里是在页面上依次输出 1~5 的数字，此时 expression 为 5，number（number 必须为正整数）类型。 Vue 在渲染时，会先创建一个长度为 5 的数组，然后遍历输出 item + 1 的值。如果为 string 类型，就会创建一个该字符串长度的数组，再遍历输出字符串的每个字符。单纯讲肯定不太好理解，其实这部分源码很简单，大家可以直接通过阅读来理解：官方源码。

大多数时候，expression 都只是个数组，其实知道它还可以为 string 或者 number 是很有用的，比如我们需要快速重复输出一个 DOM，使用 number 能很快实现，节约了我们复制粘贴或者书写数组列表的时间。当为 string 时，我们可以根据需求依次输出每个字符，以此可以做出很炫酷的打字效果，如下：

<div id="app2">
  <span v-for="(item, index) in name" v-bind:style="{animationDelay: `${0.5 + index * 0.3}s`}"
    >{{ item }}</span
  >
</div>

#app2 span {
  animation: flip-in 1s 0s ease-in-out both;
}
@keyframes flip-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

// demo 2
var app2 = new Vue({
  el: '#app2',
  data() {
    return {
      name: 'yugasun',
    }
  },
})

怎么样？曾今看到别人做出炫酷的打字效果简历是不是很羡慕，这里只需要 20 行代码就可以实现打字效果，赶紧动手试试吧~

注意：这里在设置每个字符的 animation-delay 属性时，用到了 v-bind 指令，这个很简单，这里不做赘述。同时使用了 ES6 的模板字符语法来计算时延的值，如果浏览器不支持，建议更换为新版 Chrome 浏览器。模板字符串教程在这里。

2.v-on

v-on 指令是用来绑定事件监听器的，事件类型可以是 DOM 原生事件，也可以是通过 $emit 触发的自定义事件。但是只有用在自定义元素组件上时，才可以监听组件触发的自定义事件。

在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性：v-on:click="handle('ok', $event)"

看代码更好理解：

<div id="app3">
  <button v-on:click="handleClick('确定', $event)">确定</button>
  <button v-on:click="handleClick('取消', $event)">取消</button><br />
  {{ msg }}
</div>

var app3 = new Vue({
  el: '#app3',
  data() {
    return {
      btnText: '',
    }
  },
  computed: {
    msg() {
      return this.btnText ? `点击了 ${this.btnText} 按钮` : '您还没点击任何按钮'
    },
  },
  methods: {
    handleClick(text, e) {
      console.log(e)
      this.btnText = text
    },
  },
})

这里通过 v-on 监听了两个按钮的点击事件，并分别传递了各自的文字到监听函数进行输出，输出的 msg 是计算属性（如果不懂什么是计算属性，教程在这里深入浅出响应式系统），依赖 btnText 动态计算的。可以通过控制台查看打印出的参数 e 对象就是一个原生 MouseEvent 对象。

除了基本的用法， v-on 指令还提供了丰富的 修饰符 来配合使用，这样可以写出非常灵活的监听事件，比如我们经常使用的 e.preventDefault()，在 Vue 中我们只需要通过 v-on:click.prevent 就可以实现了，是不是很炫酷，所有的修饰符列表在这里。这里我们来演示下，点击鼠标左键和右键的事件监听，将上面的 html 代码修改如下：

<div id="app3">
  <!-- 相对于上面只添加了 `.left` 和 `.right` 修饰符 -->
  <button v-on:click.left="handleClick('确定', $event)">确定</button>
  <button v-on:click.right="handleClick('取消', $event)">取消</button><br />
  {{ msg }}
</div>

自定义指令

最让我激动人心的就是自定义指令了，它即可以通过 Vue.directive 注册全局指令，也可以给 Vue 实例添加 directives 属性来注册局部指令。这两种指令都是通过指令定义时的钩子函数实现的。

关于钩子函数和钩子函数参数介绍请直接阅读官方文档，官方文档已经讲述的非常详细了，这里不再赘述，直通车：钩子函数、钩子函数参数

相信你们已经很快看完了官方文档介绍了，好了现在我将带你来领略自定义指令的强大，实现一个倒计时指令。

钩子函数 bind 是在元素第一次绑定到元素时调用的，所以我们可以在这里初始化绑定的元素 el，而且绑定元素已经作为所有钩子函数的第一个参数被传入，这里可以通过 el.innerHTML 就很容易修改绑定元素的内容了，代码如下：

<div id="app4">
  <button v-on:click="startCount">开始倒计时</button>
  <span data-count="60" v-count-down="count" v-if="show" style="font-size:16px;"></span>
</div>

var app4 = new Vue({
  el: '#app4',
  data() {
    return {
      show: false, // 是否显示倒计时
      timer: null, // 定时器
    }
  },
  methods: {
    startCount: function () {
      this.show = true
    },
  },
  directives: {
    'count-down': {
      bind: function (el, binding, vnode) {
        el.innerHTML = '60'
      },
    },
  },
})

当我们点击按钮是，将 show 置为 true，此时 v-if 指令就判断显示使用 v-count-down 指令的元素，然后执行 bind 初始化函数，将元素内容修改为 60。这里很好理解。但是我们要实现倒计时，就需要创建一个定时器，并需要维护一个数实现递减，这里通过动态修改 data-count 的值来实现。

实现思路：当初始化时，创建一个定时器，每隔 1s 将获取 data-count 的值减一，然后赋给 el.innerHTML，同时修改 data-count 属性为新的值，当然还需要添加判断，就是当然 data-count 为 0 时，清除计时器。

有了思路，实现代码就非常简单了：

<div id="app4">
  <button v-on:click="startCount">开始倒计时</button>
  <span v-count-down data-count="60" v-if="show" style="font-size:16px;"> 60 </span>
</div>

var app4 = new Vue({
  el: '#app4',
  data() {
    return {
      show: false, // 是否显示倒计时
    }
  },
  methods: {
    startCount: function () {
      this.show = true
    },
  },
  directives: {
    'count-down': {
      bind: function (el, binding, vnode) {
        let count = parseInt(el.getAttribute('data-count'))
        if (this.timer) {
          clearInterval(this.timer)
          this.timer = null
        }
        // 大家可以推测下这里的 this 指什么？
        this.timer = setInterval(function () {
          if (count <= 0) {
            clearInterval(this.timer)
            this.timer = null
          } else {
            count--
            el.innerHTML = count
            el.setAttribute('data-count', count)
          }
        }, 1000)
      },
    },
  },
})

指令系统就介绍到这里，最后留给大家一个问题：

上面代码中有个 this.timer，那么这个 this 指的是什么呢？如果我们需要将这个 timer 和 count 变量维护在当前 Vue 实例中，该如何做呢？

源码在此

专题目录

You-May-Not-Know-Vuejs