我正在参加「掘金·启航计划」
前言
在 vue2.x 的日常开发工作中，用的多的不外乎自定义组件了。通过自定义组件，我们可以实现代码的拆分，便于代码复用和抽象，也有利于后续的代码维护。
此外，自定义指令也是常用的手段之一，可以实现对普通 DOM 元素进行底层操作。除了 Vue 中默认内置的指令 (比如v-model 、v-if和 v-show)，Vue 也允许注册自定义指令。
举个例子
我们可以通过Vue.directive()方法注册一个全局自定义指令。
举个例子，我们可以定义v-focus指令，当被绑定的元素插入到 DOM 中时，触发聚焦效果；当失去焦点或数值改变时，打印 update。
// main.js
Vue.directive('focus', {
inserted: function (el) {
el.focus() // 聚焦元素
console.log('focus')
},
update: function (el) {
console.log('update')
}
})
注册局部指令，是在组件中添加一个 directives 选项：
directives: {
focus: {
inserted: function (el) {
el.focus()
}
}
}
使用如下：
<input v-model.number="age" type="number" v-focus>
钩子函数
在自定义指令的参数对象中，可以定义以下钩子函数：
- bind：在指令第一次绑定到元素时调用，可以用于一次性的初始化设置。
- inserted：被绑定元素插入父节点时调用。
- update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。比如上面的例子中，当输入框失去焦点或数值改变时，打印 update。
- componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
- unbind：只调用一次，指令与元素解绑时调用。
钩子函数参数
钩子函数带有以下参数：
- el：指令所绑定的元素，可以用来直接操作 DOM。
- binding：一个对象
- vnode：Vue 编译生成的虚拟节点。
- oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
需要注意的是，除了 el 之外，其它参数都应该是只读的，不应该进行修改。
举个例子，这里我们设置了 update 函数的内容。当用户更新输入框的内容时，可以获取到 DOM 上的属性值，比如 offsetTop 属性，然后进行其他的操作：
Vue.directive('focus', {
inserted: function (el) {
el.focus() // 聚焦元素
},
update: function (el) {
console.log('update', el.offsetTop)
}
})
动态指令参数
除了直接使用v-focus外，我们可以进行动态传参。
比如，我们想让 p 标签固定定位在距离页面顶部 200 像素的位置：
<div id="app">
<p>Scroll down the page</p>
<p v-pin="200">Stick me 200px from the top of the page</p>
</div>
<script>
Vue.directive('pin', {
bind: function (el, binding, vnode) {
el.style.position = 'fixed'
el.style.top = binding.value + 'px'
}
})
new Vue({
el: '#app'
})
</script>
如果是定位在距离页面左侧 200 像素的位置，使用动态参数就可以很方便地实现了。这里是通过binding.arg和binding.value获取到传参的。
<div id="app">
<h3>Scroll down inside this section ↓</h3>
<p v-pin:[direction]="200">I am pinned onto the page at 200px to the left.</p>
</div>
<script>
Vue.directive('pin', {
bind: function (el, binding, vnode) {
el.style.position = 'fixed'
var s = (binding.arg == 'left' ? 'left' : 'top')
el.style[s] = binding.value + 'px'
}
})
new Vue({
el: '#app',
data: function () {
return {
direction: 'left'
}
}
})
</script>
