Vue从入门到实战：自定义指令

使用背景

vue的内置指令可以满足大部分业务需求。

在某些特殊情况下，如果我们需要对普通的DOM元素进行底层操作，就要用到自定义指令了。

自定义指令的注册

Vue提供了两种注册的方式，全局注册和局部注册。

全局注册

全局注册使用Vue.directive()方法来注册一个全局自定义指令。

Vue.directive(id,[definition])

例如，要编写一个让元素自动获取焦点的全局指令。

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

全局指令可以在任何Vue实例的模板中使用。

<div id="app">
  <input v-focus>
</div>
<div id="app2">
  <input v-focus>
</div>

局部注册

局部注册是在Vue实例的选项对象中使用directive选项进行注册。

new Vue({
   el:'#app',
   directives: {
     focus: {
        // 指令的定义
        inserted: function (el) {
        el.focus()
      }
  }
}

局部注册的自定义指令只能在该实例绑定的视图中使用。

<div id="app">
  <input v-focus>
</div>

钩子函数

自定义指令的功能是在定义对象中实现的，而定义对象则是由钩子函数组成的。

Vue提供了下面几个钩子函数，这些钩子函数都是可选的：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

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

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

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

<div id="app">
  <input v-focus>
</div>
>

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。

el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property：

       name：指令名，不包括 v- 前缀。
       value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
       oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
       expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
       arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
       modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		<div id="app" v-demo:foo.a.b="message"></div>
	
		<script src="vue.js"></script>
		<script>
			Vue.directive('demo', {
			  bind: function (el, binding, vnode) {
			    var s = JSON.stringify
			    el.innerHTML =
			      'name: '       + s(binding.name) + '<br>' +
			      'value: '      + s(binding.value) + '<br>' +
			      'expression: ' + s(binding.expression) + '<br>' +
			      'argument: '   + s(binding.arg) + '<br>' +
			      'modifiers: '  + s(binding.modifiers) + '<br>' +
			      'vnode keys: ' + Object.keys(vnode).join(', ')
			  }
			})
			new Vue({
			  el: '#app',
			  data: {
			    message: 'Vue.js无难事'
			  }
			})
		</script>
	</body>
</html>

动态指令参数

指令的参数可以是动态的。例如，在 v-mydirective:[argument]="value" 中，argument 参数可以根据组件实例数据进行更新！这使得自定义指令可以在应用中被灵活使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		<div id="app">
			<!--直接给出指令的参数-->
			<p v-pin:top = "100">
				Vue.js无难事
			</p>
			<!--使用动态参数-->
			<p v-pin:[direction]="100">
				Vue.js无难事
			</p>
		</div>
	
		<script src="vue.js"></script>
		<script>
			Vue.directive('pin', {
			  bind: function (el, binding, vnode) {
			  	el.style.position = 'fixed';
			  	let s = binding.arg || 'left';
	    		el.style[s] = binding.value + 'px'
			  }
			})
			new Vue({
			  el: '#app',
			  data: {
			  	direction: 'left'
			  }
			})
		</script>
	</body>
</html>

函数简写

如果自定义指令在bind和update钩子函数中的行为一致，且只需要用到这两个钩子函数，那么可以在注册时传递一个函数对象作为参数。

Vue.directive('color-swatch',function(el,binding) {
    el.style.backgroundColor = binding.value
}

对象字面量

如果指令需要多个值，可以传入一个Javascript对象字面量。要记住的是，指令可以接受所有合法的Javascript表达式。

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})