Vue中的自定义指令（directive）

---

在vue中除了一些内置指令（v-if，v-model）外，我们还可以自定义一些指令，例如:

---

html结构层

<p v-class=“ ‘red’ ”>我是全局自定义指令</p>

---

js行为层

---

<script>

// 注册一个全局自定义指令 v-class

Vue.directive('class', {

// 当绑定元素插入到 DOM 中。

inserted: function (el,value) {

el.style.color=value.value;

}

})

</script>

---

效果图：

---

<div>

<input   v-focus>

</div>

---

new Vue({

el:"#app",

// 注册一个局部自定义指令 v-focus

directives:{

// 当绑定元素插入到 DOM 中。

focus:{

inserted: function (el) {

// 聚焦元素

el.focus()

}

}

}

})

效果图：

---

补充:钩子函数

指令定义函数提供了几个钩子函数（可选）：

bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

update: 所在组件的 VNode 更新时调用，但是可能发生在其孩子的 VNode 更新之前。指令的值可能发生了改变也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

componentUpdated: 所在组件的 VNode及其孩子的 VNode全部更新时调用。

unbind: 只调用一次， 指令与元素解绑时调用。

接下来我们来看一下钩子函数的参数 (包括el，binding，vnode，oldVnode) 。

在vue中除了一些内置指令（v-if，v-model）外，我们还可以自定义一些指令，例如: