原文链接：https://www.cnblogs.com/wuyunna/p/11278411.html
问：什么时候调用unbind,即指令与元素解绑？
其他回答：不可以手动解除绑定，但是你可以绑定一个类似开关一样的值，通过改变这个值来达到的效果。另外，unbind钩子只有在你的DOM元素被VUE移除（你手动删除也不可以）时才会被调用。

全局指令（获取焦点）

HTML

`<``label``>搜索关键字: <``input` `type="text" class="form-control" v-focus/></``label``>`

js

`// 定义全局的指令  定义时不用写 v- 前缀，但是调用时需要写 v- 前缀`

`// 参数1：指令的名称，名称前不需要加 v-`

`// 参数2：是一个对象，ta身上有一些指令先关的函数，这些函数可以在特定的阶段，执行相关的操作`

`Vue.directive(``'focus'``,{`

`inserted:``function``(el){`

`//       在每个函数中，第一个参数 永远是el，表示被绑定了指令的那个元素，这个el参数是一个原型的js对象`

`//       和js行为相关的操作，最好使用inserted函数（一个元素只有插入到DOM之后，才能获取焦点）`

`el.focus()`

`}`

`});`

`var` `vm = ``new` `Vue({`

`el:``"#app"``,`

`data:{},`

`methods:{}`

`})`

全局指令（改变样式）

HTML

`<``label``>搜索关键字: <``input` `type="text" class="form-control" v-color/></``label``>`

js

`Vue.directive(``'color'``,{`

`bind:``function``(el){`

`//   设置样式时建议使用`

`el.style.color = ``"red"`

`}`

`});`

全局指令（自定义改变样式）

HTML

`<``label``>搜索关键字: <``input` `type="text" class="form-control" v-color="'gold'"/></``label``>`

js

`Vue.directive(``'color'``,{`

`bind:``function``(el,binding){`

`el.style.color = binding.value`

`}`

`});`

私有指令（自定义改变样式）

HTML

`<``p` `v-color="'cyan'">{{ msg }}</``p``>`

js

`var` `vm = ``new` `Vue({`

`el:``"#app"``,`

`data:{`

`msg:``"私有的内部可以有多个指令私有的内部可以有多个指令私有的内部可以有多个指令私有的内部可以有多个指令"`

`},`

`methods:{},`

`directives:{`

`'color'``:{`

`//       color是样式哈，跟样式有关`

`bind:``function``(el,binding){`

`el.style.color = binding.value`

`}`

`}`

`}`

`})`

指令函数的简写

大多数情况下，我们可能想在 bind 和 update 钩子上做重复动作，并且不想关心其他的钩子函数，可以这样写：

HTML

`<``p` `v-color="'cyan'" v-fontsize="30">{{ msg }}</``p``>`

js

`var` `vm = ``new` `Vue({`

`el:``"#app"``,`

`data:{`

`msg:``"私有的内部可以有多个指令私有的内部可以有多个指令私有的内部可以有多个指令私有的内部可以有多个指令"`

`},`

`methods:{},`

`//    私有的内部可以有多个指令`

`directives:{`

`//        这个function等同于把代码写到bind和update里去`

`'fontsize'``:``function``(el,binding){`

`el.style.fontSize = parseInt(binding.value) + ``'px'`

`}`

`}`

`})`