Vue.js- custom instructions

Learning notes:Custom instruction

Custom instruction

The registration methods of custom instructions are divided intoGlobal registrationAndLocal registration, such as registering av-focusInstruction to use in<input><textarea>The focus is automatically obtained when the element is initialized. The two writing methods are:

//全局注册
Vue.directive('focus', {});

//局部注册
new Vue({
    el: '#app',
    directives: {
        focus: {}
    }
});

The option of the custom instruction consists of several hook functions, each of which is optional:

  • bind: Called only once, when an instruction is bound to an element for the first time. This hook function can be used to define an initialization action that is executed once during binding.
  • inserted: Called when the bound element is inserted into the parent nodedocumentChinese).
  • update: Called when the template where 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.
  • componentUpdate: Called when the template of the bound element completes an update cycle.
  • unbind: Called only once, when instructions and elements are unbound.

Logic code can be completed in different hook functions according to requirements. Called when the element is inserted into the parent node, preferablyinserted.

<div id="app">
    <input type="text" v-focus>
</div>

Vue.directive('focus', {
    inserted(el) {
        el.focus();
    }
});
new Vue({
    el: '#app',
});

Open the page.inputThe input box automatically gets the focus and becomes an inputable state.

Each hook function has several parameters available:

  • elThe element to which the instruction is bound can be used to directly manipulate DOM.
  • bindingAn object that contains the following attributes:

    • nameInstruction name, excludingv-Prefix
    • valueThe binding value of the instruction
    • oldValueThe previous value of the instruction binding, only in theupdateAndcomponentUpdateAvailable in hooks. Available regardless of whether the value changes.
    • expressionThe string form of the bound value.
    • argParameters passed to the instruction.
    • modifiersAn object that contains modifiers.
  • vnodeVue Compiles Generated Virtual Nodes.
  • oldVnodeThe last virtual node was only in theupdateAndcomponentUpdateAvailable in hooks.

< pdata-height = “265” data-theme-id = “0” data-slug-hash = “qxqy” data-default-tab = “html, result” data-user = “whjin” data-embedded-version = “2” data-pen-title = “vue-custom instruction” class=”codepen”>See the PenVue- custom instructionby whjin (@whjin) onCodePen.</p>
<script async src=”https://static.codepen.io/ass …; ></script>

If more than one value is required, a custom instruction can pass in the literal of a JavaScript object.

<div id="app">
    <div v-test="{msg:'hello',name:'Andy}"></div>
</div>

Develop a real-time time conversion instructionv-time

< pdata-height = “265” data-theme-id = “0” data-slug-hash = “wxompg” data-default-tab = “html, result” data-user = “whjin” data-embedded-version = “2” data-pen-title = “vue-real-time time time conversion instruction” class=”codepen”>See the PenVue- real-time time conversion instructionby whjin (@whjin) onCodePen.</p>
<script async src=”https://static.codepen.io/ass …; ></script>

Time.getFormatTime()The method is to customize the instructionsv-timeAs required, the input parameter is a millisecond time stamp, which returns a string in a sorted time format.

InbindHook, will commandv-timeThe value of the expressionbinding.valuePassed in as a parameterTimeFormatTime()Method to get the formatting time, and then through theel.innerHTMLThe element where the write instruction is located. Timerel.__timeout__Triggered once every minute, updated time, and atunbindRemove from the hook.

Summary:When writing custom instructions, bind DOM with initial actions such as one-time events. It is recommended to usebindIn the hook, at the same timeunbindInternal unbinding.