Custom instruction

This element gets focus when the page loads

global

Vue.directive('focus', {
  // When the bound element is inserted into the DOM...
  inserted: function (el) {
    // Focus elements
    el.focus()
  }
})
Copy the code

You can then use the new V-focus property on any element in the template

local

directives: {
  focus: {
    // The definition of a directive
    inserted: function (el) {
      el.focus()
    }
  }
}
Copy the code

Used on the current component

Hook function

The following hook functions are available in the custom directive

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 a bound element is inserted into a parent node (the parent node is guaranteed to exist, but not necessarily already 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. But you can ignore unnecessary template updates by comparing the values before and after the update (see below for details of 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

Parameters of the hook function (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

All parameters except el should be read-only and should not be modified. If you need to share data between hooks, it is recommended to do so through the element’s dataset.

Dynamic instruction parameter

V-mydirective :[argument]=”value

For example, you want to create a custom directive to fix elements to a page with a fixed layout. We can create a custom directive like this that updates the pixel value of the vertical position with the directive value

<div id="baseexample">
  <p>Scroll down the page</p>
  <p v-pin="200">Stick me 200px from the top of the page</p>
</div>
Copy the code

Vue.directive('pin', {
  bind: function (el, binding, vnode) {
    el.style.position = 'fixed'
    el.style.top = binding.value + 'px'}})new Vue({
  el: '#baseexample'
})
Copy the code

The current effect is that the element is 200px from the top

If we want to be from the top or left or right it’s dynamically passing in

<div id="dynamicexample">
  <h3>Scroll down inside this section ↓</h3>
  <p v-pin:[direction] ="200">I am pinned onto the page at 200px to the left.</p>
</div>
Copy the code

Vue.directive('pin', {
  bind: function (el, binding, vnode) {
    el.style.position = 'fixed'
    var s = (binding.arg == 'left' ? 'left' : 'top')
    el.style[s] = binding.value + 'px'}})new Vue({
  el: '#dynamicexample'.data: function () {
    return {
      direction: 'left'}}})Copy the code

Custom instruction