Custom instruction
effect
- Operate the underlying dom
Example
use
Note that the mass participation format
created
- When the component is created, an el parameter is automatically passed in, and el is the dom that uses this instruction
- Whoever uses this instruction, whose background turns red
- The passed parameters are in bind.value
Local custom instructions
- Local custom commands do not use Vue., but receive a directive
use
create
Instruction life cycle
Instructions and components are two sets of things
bind() {
//... }
- Triggered when the directive is bound to an HTML element
- Only call once
inserted(){
//... }
- Only execute once
- Called when the bound element is inserted into the parent node (the parent node can be called, it does not need to exist in the document).
update(){
//... }
- The first time it is
called immediately after bind , the parameter obtained is the initial value of the binding, which is then called when the template where the binding element is located is updated, regardless of whether the binding value changes. By comparing the binding values before and after the update, unnecessary template updates can be ignored
componentUpdated(){
//... }
- Called after the VNode of the component where the instruction is located and its child VNodes are all updated.
unbind(){
//... }
- It is called only once, when the instruction is unbound from the element.
parameter
el
- dom element itself
binding
name
- The command name does not include the v- prefix
value
- The binding value of the instruction; for example: v-my-directive="1+1", the value of value is 2;
oldValue
- The previous value bound by the instruction
- Only available in the update and componentUpdated hook functions, regardless of whether the value changes;
expression
- String form of binding value
- For example: v-my-directive = "1+1", the value of expression is '1+1';
arg
- The parameter 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.ab, the value of modifiers is {'a':true,'b':true}
vnode
- Generate virtual nodes compiled by Vue
oldVnode
- Last virtual node
- Only available in update and componentUpdated hook functions