What is the
Directives in VUE typically start with v- and are defined between DOM lines (:href = “MSG”). The values of the directives are variables.
When the value of an expression changes, the DOM is affected in a responsive manner.
The interaction between the view layer and the data layer can be realized through instructions.
Speak what
- Built-in commands
- Custom instruction
- Local custom instructions
- Global custom instruction
- The hook function in the instruction
- Implementation principle of instruction
- Instruction changes in Vue3
- Common instruction plug-in
Built-in commands
Instructions that come with vUE
v-text=”msg”
Output text to prevent {{… }} appears on the page, and the write string inside the tag is the default.
v-html=”msg”
Output HTML Treat normal HTML as a dom renderable way
v-once
The output is bound only once, and when the data changes again it does not cause a page refresh, written on the tag that you do not want to refresh.
v-if / v-elseif / v-else
Controls whether the DOM is present during initialization.
Note: There can be no extra divs between v-if and v-else.
v-show=”flag”
Control style, which is used when switching dom frequently.
v-for
Loop data is bound to the DOM, using the (value index) in fruits loop by default.
- Disadvantages of the innerHTML concatenation string: It makes the page render repeatedly, which is inefficient.
- V-for rendering: The page will not be repeated rendering, reuse the original structure, efficient.
- You put v-for on whoever you want to loop
- The default is to reuse the original DOM element, and if the key is added and the key value is different, it is considered a different loop.
A loop:
v-model=”msg”
In the form of bidirectional data binding, the value of MSG will be assigned to the input box, and the change of the value of the input box will affect the change of data.
Note: Checked and selected are not valid on elements with V-model directives.
<input type="text" v-model="msg" placeholder="Content" />
Copy the code
- The form element checkbox
Single fruits use Boolean type, multiple fruits use [] to remove value
<input type="checkbox" v-model="fruits" value=The word "apple" />
<input type="checkbox" v-model="fruits" value="Banana" />
<input type="checkbox" v-model="fruits" value="Watermelon" />
Copy the code
- Form element Radio
Radio MSG uses a Boolean type.
<input type="radio " v-model="sex" value="Male" />
<input type="radio " v-model="sex" value="Female" />
Copy the code
- Form element SELECT
<select v-model="fruits">
<option value=The word "apple" disabled />
<option value="Banana" />
<option value="Watermelon" />
</select>
Copy the code
v-cloak
A V-cloak is usually added to the body to hide uncompiled tags until the instance is compiled.
[v-cloak] { display: none }
Copy the code
Custom instruction
We can customize implementation instructions to manipulate the DOM as needed.
Custom instructions are classified into local custom instructions and global custom instructions. Let’s use a simple example to familiarize ourselves with the writing of the following instructions and distinguish between global/local instructions.
The V-focus directive is a directive that every student who is new to directives will write: implement that when the page loads, the element will get focus.
<input v-focus />
Copy the code
Global directives
Vue.directive("focus", {
bind() {},
inserted(el) {
el.focus();
},
update() {},
componentUpdated() {},
unbind(){}});Copy the code
Local custom instructions
directives: {
focus: {
bind() {},
inserted(el) {
el.focus();
},
update() {},
componentUpdated() {},
unbind(){},}}Copy the code
An instruction definition object in Vue2 provides bind, INSERTED, Update, componentUpdated, and unbind hook functions
The hook function in the instruction
-
Bind (el, binding, vnode): called only once, when the directive is first bound to an element. You can use this hook function to define an initialization action that will be performed once at binding time.
-
Inserted (el): Called when the bound element is inserted into the parent (the parent exists, not in the document).
-
Update (EL): Called when the template to which the element is bound is updated, regardless of whether the binding value changes. Unnecessary template updates can be ignored by comparing the binding values before and after the update.
-
ComponentUpdated (EL): Called when the template to which the bound element belongs completes an update cycle.
-
Unbind: Called only once, when an instruction is unbound from an element.
The hook function – argument in the instruction
- El: The element bound by the directive that can be used to manipulate the DOM directly.
- Binding: An object containing the following attributes:
-
- Name: indicates the command name, excluding the V – prefix.
-
- Value: specifies the binding value of the directive, for example, v-my-directive=”1 + 1″, where 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: the expression or variable name of the binding value. For example, v-my-directive=”1 + 1″, the value of expression is “1 + 1”.
-
- Arg: Parameter passed to an instruction. For example, v-my-directive:foo, arg is “foo”.
-
- Modifiers: An object that contains modifiers. For example, the V-my-directive.foo. bar modifier object modifiers are {foo: true, bar: true}.
-
- Vnode: virtual node generated by Vue compilation.
- OldVnode: Last virtual node, available only in update and componentUpdated hooks.
The above explains the basic configuration of the instruction in general, so what is the implementation principle of the instruction?
Implementation principle of instruction
Through the source code, we can generally understand:
- When the AST syntax tree is generated, directives are encountered to add the cache attribute to the current element
- Generate the instruction code by genDirectives
- Before patch, the hook of the instruction is extracted into CBS, and the corresponding hook is called during patch
- When an instruction executes the corresponding hook function, the method defined by the corresponding instruction is called
- An instruction is equivalent to a microtask operation in the vUE lifecycle.
Instruction changes in Vue3
Vue3 directive hook functions have undergone some changes, and vue’s lifecycle hook function names are unified. 7 hook functions instead of 5.
app.directive("focus", {
Called before the attribute or event listener of the bound element is applied
created() {},
Called when the directive is first bound to an element and before the parent component is mounted
beforeMount() {},
// called after the parent component of the bound element is mounted
mounted() {},
// Called before updating the VNode containing the component
beforeUpdate() {},
// called after the VNode containing the component and its children are updated
updated() {},
// called before uninstalling the parent component of the bound element
beforeUnmount() {},
// only called once when the directive is unbound from the element and the parent component is unmounted
unmounted(){}});Copy the code
Common instruction plug-in
- v-loading
- v-permission
- v-permission
- v-input:type
- v-longpress
- v-lazy-img
- v-real-img
- v-copy
- v-expandClick
- v-screenfull
- v-tooltip
- v-ellipsis
- v-backtop
- v-empty
- v-drag
- v-resize
Making: github.com/wolichuang/…
conclusion
Summary of basic knowledge, learning….