Happy file Vue.js custom command

Vue.js custom directives

In addition to the default core directives ( v-model and v-show ), Vue also allows custom directives to be registered.

Below we register a global command v-focus, the function of which is to get the focus of the element when the page loads:

example

<div id="app">
    <p>页面载入时，input 元素自动获取焦点：</p>
    <input v-focus>
</div>
 
<script>
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

We can also use the directives option in the instance to register local directives, so that the directive can only be used in this instance:

example

<div id="app">
  <p>页面载入时，input 元素自动获取焦点：</p>
  <input v-focus>
</div>
 
<script>
// 创建根实例
new Vue({
  el: '#app',
  directives: {
    // 注册一个局部的自定义指令 v-focus
    focus: {
      // 指令的定义
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    }
  }
})
</script>

---

hook

hook function

The instruction definition function provides several hook functions (optional):

• bind: Only called once, when the instruction is bound to the element for the first time, use this hook function to define an initialization action that is executed once when binding.

• inserted: Called when the bound element is inserted into the parent node (it can be called only if the parent node exists, and does not have to exist in the document).

• update: Called when the template where the bound element is located is updated, regardless of whether the bound value changes. By comparing the binding value before and after the update, unnecessary template updates can be ignored (see below for detailed hook function parameters).

• componentUpdated: Called when the template where the bound element is located completes an update cycle.

• unbind: Called only once, when the directive is unbound from the element.

Hook function parameters

The parameters of the hook function are:

• el : The element to which the directive is bound, which can be used to directly manipulate the DOM.
• binding  : an object containing the following properties:
  • name  : The command name, excluding  v- the prefix.
  • value  : the binding value of the directive, for example:  v-my-directive="1 + 1", the value of value is  2.
  • oldValue  : The previous value bound by the directive, only available in  update and  componentUpdated hooks. Available whether or not the value has changed.
  • expression  : The expression or variable name to bind the value to. For example  v-my-directive="1 + 1" , the value of expression is  "1 + 1".
  • arg  : Arguments passed to the command. For example  v-my-directive:foo, the value of arg is  "foo".
  • modifiers  : An object containing modifiers. For example:  v-my-directive.foo.bar, the value of the modifier object modifiers is  { foo: true, bar: true }.
• vnode : The virtual node generated by Vue compilation.
• oldVnode  : the previous virtual node, only available in  update and  componentUpdated hooks.

The following examples demonstrate the use of these parameters:

example

<div id="app"  v-kxdang:hello.a.b="message">
</div>
 
<script>
Vue.directive('kxdang', {
  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: '菜鸟教程!'
  }
})
</script>

Sometimes we don't need other hook functions, we can abbreviate the function as follows:

Vue.directive('kxdang', function (el, binding) {
  // 设置指令的背景颜色
  el.style.backgroundColor = binding.value.color
})

The instruction function accepts all legal JavaScript expressions, and the following examples pass in JavaScript objects:

example

<div id="app">
    <div v-kxdang="{ color: 'green', text: '菜鸟教程!' }"></div>
</div>
 
<script>
Vue.directive('kxdang', function (el, binding) {
    // 简写方式设置文本及背景颜色
    el.innerHTML = binding.value.text
    el.style.backgroundColor = binding.value.color
})
new Vue({
  el: '#app'
})
</script>