VUE——使用钩子函数

指令定义函数提供几个钩子函数

bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted：被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
update：所在组件的VNode更新时调用，但可能发生在其孩子的VNode更新之前。指令的值可能发生了改变也可能没有。但可以通过比较更新前后的值来忽略不必要的模板更新。
componentUpdated：所在组件的VNode及其孩子的VNode全部更新时调用。 unbind：只调用一次，指令与元素解绑时调用。
钩子函数的参数包括el，binding，vnode，oldVnode。

Vue.directive('focus',{
		bind: function(el){ //每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
//注意：在每个函数中，第一个参数永远是el，表示被绑定了指令的那个元素，这个el参数是一个原生的JS对象
//在元素刚绑定了指令的时候，还没有插入到DOM中去，这时候调用focus方法没有作用
		//el.focus()
	},
	inserted: function(el){ //inserted表示元素插入到DOM中的时候，会执行inserted函数【触发1次】
		el.focus()
			},
	updated: function(el){ //当VNode更新的时候，会执行updated，可能会触发多次
	}
})

钩子函数被赋予以下参数

el: 指令所绑定的元素，可以用来直接操作DOM。
binding: 一个对象，包含以下属性：
（1）name: 指令名，不包括v-前缀。
（2）value: 指令的绑定值，例如：v-my-directive=“1+1”, value值是2
（3）oldValue: 指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。
（4）expression: 绑定值的字符串形式。例如：v-my-directive=“1+1”，expression的值是"1+1"。
（5）arg: 传给指令的参数。例如v-my-directive: foo，arg的值是"foo"。
（5）modifiers: 一个包含修饰符的对象。例如: v-my-directiove.foo.bar，修饰符对象modifiers的值是{foo: true, bar: true}。

vnode: Vue编译生成的虚拟节点。
oldVnode: 上一个虚拟节点，仅在update和componentUpdated钩子中可用。
除了el之外，其他参数都应该是只读的，尽量不要修改他们。如果需要在钩子之间共享数据，建议通过元素的dataset来进行。