Vue.js custom directive

In addition to the core commands ( v-model and v-show ) that are set by default, Vue also allows you to register custom commands.

Here we register a global directive v-focus, the function of this directive is to get the focus of the element when the page loads:


<div id="app"> <p>The input element automatically gets the focus when the page loads:</p> <input v-focus> </div> <script> // Register a global custom command v-focus Vue.directive('focus', { // When the binding element is inserted into the DOM. Inserted: function (el) { // focus element el.focus() } }) // Create a root instance new Vue({ el: '#app' }) </script>

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


<div id=" app"> <p>The input element automatically gets the focus when the page loads:</p> <input v-focus> </div> <script> // Create a root instance New vue({ El: '#app', Directives: { // Register a local custom command v-focus Focus: { // definition of the instruction Inserted: function (el) { // focus element El.focus() } } } }) </script>


Hook function


directive definition function provides several hook functions (optional):

  • bind: Called only once, the first time the instruction is bound to an element. This hook function can be used to define an initialization action that is executed once at the time of binding.

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

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

  • componentUpdated: Called when the template of the bound element completes an update cycle.

  • unbind: Called only once, when the instruction is unbundled with the element.

Hook function parameters

The parameters of the hook function are:

  • el: The element to which the directive is bound can be used to manipulate the DOM directly.
  • binding: An object with the following attributes:
    • name: The name of the directive, excluding the v- 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 of the directive binding, available only in the update and componentUpdated hooks. Available regardless of whether the value changes.
    • expression: The expression or variable name of the bound value. For example, v-my-directive="1 + 1" , the value of expression is "1 + 1".
    • arg: The argument passed to the instruction. 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, available only in the update and componentUpdated hooks.

The following example demonstrates the use of these parameters:


<div id=" app" v-welookups :hello.a.b="< /span>message"> </div> <script> Vue.directive('welookups ', { 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: 'welookups tutorial!' } })</script>

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

Vue.directive('welookups ', function (el, binding) {
// Set the background color of the command
el.style.backgroundColor = binding.value.color

directive function accepts all valid JavaScript expressions, and the following instances pass in JavaScript objects:


<div id="app"> <div v-welookups ="{ color: 'green', text: 'Example welookups tutorial!' }"></div> </div> <script> Vue.directive('welookups ', function (el, binding) { // shorthand to set text and background color el.innerHTML = binding.value.text el.style.backgroundColor = binding.value.color }) new Vue({ el: '#app' }) </script>

welookups is optimized for learning.© welookups. 2018 - 2019 All Right Reserved and you agree to have read and accepted our term and condition.