In VUE, with the exception of V-Model and V-show, we can’t avoid doing low-level operations on all DOM. Vue then provides custom instructions for developers to create the instructions they need to do low-level operations on the DOM.

  • Input Auto focus case
// Register a global custom directive 'V-focus'
Vue.directive('focus', {
  // When the bound element is inserted into the DOM...
  inserted: function (el) {
    // Focus elements
    el.focus()
  }
})
Copy the code
// Locally register custom directives
directives: {
  focus: {
    // The definition of a directive
    inserted: function (el) {
      el.focus()
    }
  }
}
Copy the code

Note: Local registration when yesdirectivesRather thandirective

Hook function

  • Bind: Called only once, the first time a directive is bound to an element. This is where you can perform one-time initialization Settings.
  • Inserted: Called when the bound element is inserted into a parent (the parent is guaranteed to exist, but not necessarily inserted into the document).
  • Update: called when the component’s VNode is updated, but may occur before its child VNodes are updated. The value of the instruction may or may not have changed. However, you can ignore unnecessary template updates by comparing the values before and after the update (see below for detailed hook function parameters).
  • ComponentUpdated: Invoked when the VNode of the component where the directive resides and its child VNodes are all updated.
  • Unbind: Called only once, when an instruction is unbound from an element.

Hook function parameters (EL, Binding, vnode, oldVnode)

  • El: The element bound by the directive that can be used to manipulate the DOM directly.
  • binding: an object containing the following properties:
    • Name: indicates the command name, excluding the V – prefix.
    • Value: specifies the binding value of the directive. For example, v-my-directive=”1 + 1″, the binding 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: command expression in the form of a string. For example, if v-my-directive=”1 + 1″, the expression is “1 + 1”.
    • Arg: Optional parameter passed to the instruction. For example, v-my-directive:foo, the parameter is “foo”.
    • Modifiers: An object that contains modifiers. For example, in v-my-directive.foo.bar, the modifier object is {foo: true, bar: true}.
  • Vnode: virtual node generated by Vue compilation. Go to the VNode API to learn more.
  • OldVnode: Last virtual node, available only in update and componentUpdated hooks.

Note: all parameters except el should beread-onlyDo not modify. If you need to share data between hooks, it is recommended to do so through the element’s dataset.

Use the hook function sample

<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
Copy the code
Vue.directive('demo', {
  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: '#hook-arguments-example'.data: {
    message: 'hello! '}})Copy the code

Returns the result

name:"dome"
value:"hello!"
expression:"message"
argument:"foo"
modifiers: {"a":true."b":true}
vnode keys: tag, data, children, text, elm, ns, context, fnContext, fnOptions, fnScopeld, key,componentOptions, componentInstance, parent, raw, isStatic, isRootInsert, isComment,isCloned, isOnce, asyncFactory, asyncMeta, isAsyncPlaceholder
Copy the code

  • This article is excerpted from -vue.js – Custom instructions. Click to view the official document of Vue
  • If there is infringement, please contact the author to delete!
  • If you have any questions, please email [email protected] for feedback.