==================================================================
- 自定义指令，对普通的DOM元素进行底层操作。
除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。
==================================================================
-
举个聚焦输入框的例子，如下：
-
directive全局注册,directives局部注册
- 打开或刷新页面时，自动聚焦输入框
===============================================================
- 一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
bind：只调用一次，指令第一次绑定到元素时调用。用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted：被绑定元素插入父节点时调用（父节点存在即可调用）。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次， 指令与元素解绑时调用。
钩子函数案例
- 我们可以借助一个简单的案例来认识这几个钩子函数
<button @click="update">更新
<button @click="uninstall">卸载
<button @click="install">安装
-
打开页面运行
-
bindinserted被调用
-
点击更新按钮
-
updatecomponentUpdated被调用
-
点击卸载按钮
-
unbind被调用
-
点击安装按钮
-
bindinserted被调用
=================================================================
el、binding、vnode和oldVnode
el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性
-
name：指令名，不包含v-的前缀；
-
value：指令的绑定值；例如：v-my-directive=“1+1”，value的值是2；
-
oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子函数中可用，无论值是否改变都可用；
-
expression：绑定值的字符串形式；例如：v-my-directive=“1+1”，expression的值是’1+1’；
-
arg：传给指令的参数；例如：v-my-directive:foo，arg的值为 ‘foo’；
-
modifiers：一个包含修饰符的对象；例如：v-my-directive.a.b，modifiers的值为{‘a’:true,‘b’:true}
vnode：Vue编译的生成虚拟节点；
oldVnode：上一次的虚拟节点，仅在update和componentUpdated钩子函数中可用。
参数简单案例
-
binding.name 可以获取指令的名字
v-demo ==> demo -
binding.value 可以获取指令的内容
v-demo="message" ==> message 的值 hello -
binding.expression 字符串形式的指令表达式
v-demo="message" ==> message -
binding.arg 可以获取
v-demo:foo ==> foo -
binding.modifiers 可以获取指令的修饰符
v-demo:foo.a.b ==> {"a":true,"b":true}
===============================================================
大多数情况下，我们可能想在 bind 和 update 钩子上做重复动作，并且不想关心其它的钩子函数。可以这样写:
Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = binding.value
})
函数简写案例
- 简写之前
pink pig
pink pig
color==>{{color}}
点击更改color
color
- 简写之后
//简写形式
Vue.directive("color",function(el,binding,vnode){
el.style.background=binding.value
})
new Vue({
el: '#app',
data: {
color:"orange"
}
})
================================================================
- 如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法类型的 Javascript 表达式。
