Introduction to Vue Custom Directives (2) _javascript tips

Vue directives

The Vue instruction starts with V, acts on the HTML element, binds the instruction to the element, and adds some special behavior to the bound element.

For example:

<H1 v-if= "Yes" >Yes

Wherein, V is the Vue identifier, if is the instruction id,yes is expression. Yes is the VM in MVVM that is ViewModel, and when its value changes, it triggers the instruction to change the view display.

Expression can also use inline mode, which triggers execution of any dependent property when it changes. Such as:

You can use commas to split multiple instructions, such as:

<div v-on= "Click:onclick, Keyup:onkeyup, Keydown:onkeydown" ></div>

Vue Custom Directives

Custom instruction Syntax

The Vue custom instruction syntax is as follows:

vue.directive (ID, definition)

Two parameters passed in, ID refers to the directive id,definition is defined as the object. Where the definition object can provide some hook functions.

hook function

The hook function that defines the object is as follows:

hook function parameters

The parameters for defining the hook function for an object are as follows:

el: an element that is bound by an instruction that can be used to manipulate the DOM directly.
binding: An object that contains the following properties:
Name: Directive name, excluding the V-prefix.
Value: The binding values of the directive, for example: v-my-directive= "1 + 1", and value is 2.
OldValue: The previous value of the directive binding, available only in the update and componentupdated hooks. is available regardless of whether the value has changed.
Expression: The string form of the bound value. For example v-my-directive= "1 + 1", the expression value 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 that contains modifiers. For example: V-my-directive.foo.bar, the modifiers value of the modifier object is {foo:true, bar:true}.
Vnode: Vue compiles the generated virtual nodes.
Oldvnode: The previous virtual node, available only in the update and componentupdated hooks.

Use examples

Examples of common uses of Vue custom directives are as follows:

Vue.directive (' my-directive ', {
 bind:function () {
 //preparation of bindings//to
 Add event listeners, or other complex operations that only need to be performed once
 },
 inserted:function () {
 ///...
 },
 update:function () {
 ////////////////////
 },
 componentupdated:function () {///
 ...
 },
 unbind:function () {//
 cleaning Operations
 / such as the event listener that is bound when you remove bind
 }
})

When you use only update in the definition object of a directive, you simply pass in the function, as follows:

Vue.directive (' my-directive ', function () {
 //...
})

A simple example

Here's a simple example where the input box will automatically focus when the page loads.
The code is as follows:

<! DOCTYPE html>
 
 

Run Screenshots:

Examples of using hook function parameters

The following is an example of using the hook function parameter, setting the font color of the element to #fff, setting the background color to the parameters of the incoming instruction red, and the instruction name, instruction binding value, instruction binding value expression, and the parameter of the incoming instruction in <div>.
The code is as follows:

<! DOCTYPE html>
 
 

Run Screenshots:

Object literal Amount

Within the same attribute, multiple clauses separated by commas are bound to multiple instruction instances. For example, in the following example, the instruction is created and invoked two times:

<div v-demo= "color: ' White ', text: ' Hello '" ></div>

If the directive requires multiple values, you can pass in a JavaScript object literal. Such as:

<! DOCTYPE html>