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 很相似，先来看个例子：
-
{{ item }}
var app1 = new Vue({
el: "#app1",
})
这里是在页面上依次输出 1~5 的数字，此时 expression 为 5，number（number 必须为正整数） 类型。 Vue 在渲染时，会先创建一个长度为 5 的数组，然后遍历输出 item + 1 的值。如果为 string 类型，就会创建一个该字符串长度的数组，再遍历输出字符串的每个字符。单纯讲肯定不太好理解，其实这部分源码很简单，大家可以直接通过阅读来理解：官方源码。
大多数时候，expression 都只是个数组，其实知道它还可以为 string 或者 number 是很有用的，比如我们需要快速重复输出一个DOM，使用 number 能很快实现，节约了我们复制粘贴或者书写数组列表的时间。当为 string 时，我们可以根据需求依次输出每个字符，以此可以做出很炫酷的打字效果，如下：
{{ item }}
#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)"
看代码更好理解：
{{ msg }}
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 代码修改如下：
{{ msg }}
自定义指令
最让我激动人心的就是自定义指令了，它即可以通过 Vue.directive 注册全局指令，也可以给 Vue 实例添加 directives 属性来注册局部指令。这两种指令都是通过指令定义时的钩子函数实现的。
关于钩子函数和钩子函数参数介绍请直接阅读官方文档，官方文档已经讲述的非常详细了，这里不再赘述，直通车：钩子函数、钩子函数参数
相信你们已经很快看完了官方文档介绍了，好了现在我将带你来领略自定义指令的强大，实现一个倒计时指令。
钩子函数 bind 是在元素第一次绑定到元素时调用的，所以我们可以在这里初始化绑定的元素 el，而且绑定元素已经作为所有钩子函数的第一个参数被传入，这里可以通过 el.innerHTML 就很容易修改绑定元素的内容了，代码如下：
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时，清除计时器。
有了思路，实现代码就非常简单了：
60
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