我们可能需要先知道的
Vue 中自带默认指令（v-if 和 v-show 等），我们在使用 Vue 框架的时候，这样使用指令的语句
<h3 v-if="flag">hello world</h3>
<h3 v-show="flag">hello world</h3>
然而默认指令并不能完全满足我们的需求，举个栗子：输入框的聚焦
<!-- 不使用框架实现 -->
function setFocus() {
document.getElementById("input").focus();
}
而在 Vue 中，不建议我们对 DOM 元素进行直接操作，这个时候我们可以自定义指令来实现功能
全局的自定义指令
<!-- 输入框聚焦 -->
Vue.directive("focus", {
bind: function(el) {
// 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
// 如果是和元素的样式有关的最好在bind中执行
},
inserted: function(el) {
// insreted表示元素插入到dom中的时候，会执行inserted函数
el.focus();
// 和js行为有关的最好在inserted中去执行，防止失效
},
updated: function() {
// 当Vnode更新的时候，会执行updated，可能会执行多次
}
});
局部的自定义指令
var vm = new Vue({
el: "#app",
data: {},
methods: {},
directives: {
// 自定义私有指令 [指令名称] + [处理函数对象]
// 设置字体粗细
fontweight: {
bind: function (el, binding) {
el.style.fontWeight = binding.value;
}
},
// 设置字体大小，简易方法
// 防止没有注意到和上面的区别，强调一下，重点不是 fontweight 没有单引号而 fontsize 有单引号=-=
'fontsize': function (el, binding) {
// 这个function等同于把代码写到 bind 和 update 当中去
el.style.fontSize = binding.value
}
}
});
使用
对于新定义好的指令，我们可以这样像默认指令一样使用
<!-- 这里的 "'blue'" 很容易让人忘掉加单引号，如果不加就变成了属性值
（编译过程中系统就会去data找一下有没有这么个属性值，自然会报错），加了的话就是字符串 -->
<input type="text" class="form-control" v-model="id" v-focus v-color="'blue'" />
参数
这一部分最好看官方文档，虽然还是有自己的笔记
el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性：
name：指令名，不包括 v- 前缀。（这一点非常重要）
value：指令的绑定值，例如：v-my-directive="1 + 1"中，绑定值为2。
expression：字符串形式的指令表达式。例如v-my-directive="1 + 1"中，表达式为"1 + 1"。（ value 和 expression 要区分开）
