Vue除了核心功能内置的指令（v-model和v-show）外，也允许注册自定义指令。虽然在Vue2.0中代码复用的主要形式是组件，但有的情况，仍然需要对普通的DOM元素进行底层操作，这个时候就会用自定义指令。
那么先举个例子，比如我们想要自动聚焦输入框。当打开页面时，什么都没做的情况下就让输入框处于聚集状态。如图：
上代码：
<code>HTML
/<code>
<code>// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})/<code>
如果不想注册全局的，我们只想它在某个页面或者组件中注册，那么就写在 使用的地方：
<code>HTML
<template>
{{ msg }}
/<template>/<code>
<code>JS
export default {
name: 'directive',
data () {
return {
msg: '自定义指令directive'
}
},
directives: {
focus: {
inserted: function(el){
//聚焦输入框
el.focus();
}
},
}
}/<code>
Inserted表示，被绑定元素插入父节点时调用。
同时还有：
Bind：指令第一次绑定到元素时调用，只调用一次
Update：被绑定与元素所在模板更新时调用，而且无论绑定值是否有变化，通过比较更新前后的绑定值，忽略不必要的模板更新
componentUpdate :被绑定的元素所在模板完成一次更新更新周期的时候调用
unbind: 只调用一次，指令月元素解绑的时候调用
见代码：
<code>HTML
<template>
{{ msg }}
{{ count }}
******************************************
{{count}}
<button> 点击开始加1/<button>
/<template>/<code>
<code>JS
export default {
name: 'directive',
data () {
return {
count: 10,
color:"red",
msg: '自定义指令directive'
}
},
methods: {
add: function(){
this.count++;
}
},
directives: {
focus: {
inserted: function(el){
el.focus();
}
},
hello: {
bind:function(el,vbind,vnode){
el.style["color"] = vbind.value;
console.log("1-bind");
},
inserted:function(){
console.log("2-insert");
},
update:function(){
console.log("3-update");
},
componentUpdated:function(){
console.log('4 - componentUpdated');
},
unbind:function(){
console.log('5 - unbind');
}
}
}
}/<code>
效果：
除此之外还有动态指令参数：
指令的参数可以是动态的。例如，在 v-mydirective:[argument]="value" 中，argument 参数可以根据组件实例数据进行更新！这使得自定义指令可以在应用中被灵活使用。
例如你想要创建一个自定义指令，用来通过固定布局将元素固定在页面上。我们可以像这样创建一个通过指令值来更新竖直位置像素值的自定义指令：
<code>HTML
<template>
{{ msg }}
定位到距离页面顶部 200px
/<template>/<code>
<code>js
export default {
name: 'directive',
data () {
return {
msg: '自定义指令directive动态指令参数'
}
},
directives: {
pin: {
bind: function (el, binding, vnode) {
//设置position为fixed，资助距离顶部200px
el.style.position = 'fixed'
el.style.top = binding.value + 'px'
}
},
}
}/<code>
这会把该元素固定在距离页面顶部 200 像素的位置。
函数简写
在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写：
<code>HTML
<template>
{{ msg }}
{{msg}}
/<template>/<code>
<code>JS
export default {
name: 'directive',
data () {
return {
red: 'red',
msg: '自定义指令directive动态指令参数'
}
},
directives: {
//直接写，不用绑定到任何生命周期上
colorswatch: function (el, binding){
el.style.backgroundColor = binding.value //设置背景颜色为red
},
}
}/<code>
对象字面量
如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数的 JavaScript 表达式一定要合法。
<code>HTML
<template>
{{ msg }}
/<template>/<code>
<code>JS
export default {
name: 'directive',
data () {
return {
red: 'red',
msg: '自定义指令directive动态指令参数'
}
},
directives: {
demo: function (el, binding){
// 在控制台打印
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
},
}
}/<code>
打开控制台，我们可以看到已经打印出了：
Ok，以上就是Vue自定义指令的所有内容。
閱讀更多 肆拾手記 的文章
