“This is the 21st day of my participation in the Gwen Challenge in November. See details of the event: The Last Gwen Challenge 2021”.

1. Some built-in instructions

1. v-text

V-text is used to render text content to its node.

Unlike interpolation {{XXX}}, V-text replaces the original contents of the node.

<div v-text="name"></div>
Copy the code

2. v-html

V-html is used to render content containing HTML structure to its node.

Unlike interpolation {{XXX}}, V-HTML replaces the original content in the node, and V-HTML recognizes HTML structures.

V-html has security issues. Rendering HTML structures dynamically is dangerous. Use V-HTML on trusted content.

3. v-cloak

The V-cloak attribute is a special one and has no value. The V-cloak attribute is deleted when the Vue instance is created and takes over the container.

[v-cloak] {
    display: none;
}
Copy the code
<div v-cloak>
    {{ message }}
</div>
Copy the code

When used as above, uncompiled tags will not be displayed.

4. v-once

The v-once node is treated as static after the first dynamic rendering.

Future data changes will not cause the update of the v-once structure, which can be used to optimize performance.

For example, after n has been rendered for the first time, subsequent data changes do not affect the tag.

<h2 v-once>The value of n is: {{n}}</h2>
Copy the code

5. v-pre

Vue skips compilation of labels with V-pre instructions to optimize performance.

For example, the following tags are skipped during compilation.

<h2 v-pre>Hello World!</h2>
Copy the code

2. Customize commands

Definition 1.

Define a local custom directive. An instruction definition object can provide the following hook functions:

  • bind
  • inserted
  • update
new Vue({
    directives: {
        fbind: {
            // Only called once, when the directive is first bound to the element
            bind(element, binding) {
                console.log(element, binding);
                element.value = binding.value;
            },
            // when the element of the directive is inserted into the page
            inserted(element, binding) {
                element.focus();
            },
            // When the template in which the directive resides is reparsed
            update(element, binding){ element.value = binding.value; }},}});Copy the code

Each hook function takes the following arguments in turn:

  • el: The element bound by the directive, the real DOM, can be manipulated directly.
  • binding: an object containing the following properties:
    • name: Indicates the command namev-Prefix.
    • value: The binding value of the instruction.
    • oldValue: The value preceding the instruction binding, only inupdateandcomponentUpdatedHooks are available. Available regardless of whether the value changes.
    • expression: Command expression in the form of a string.
    • arg: Optional parameter passed to the instruction.
    • modifiers: an object that contains modifiers.
  • vnode: virtual node generated by Vue compilation.
  • oldVnode: Indicates the last virtual nodeupdateandcomponentUpdatedHooks are available.

Note that the directive name is not added with v- when it is defined, but it is used with v-.

In addition, instruction names should be separated by lowercase, dash lines.

2. Use

Using a custom directive defined:

<button @click="n++">add</button>
<input type="text" v-fbind:value="n" />
Copy the code

3. Abbreviations of definitions

In many cases, bind and UPDATE trigger the same behavior, regardless of the other hooks. This can be abbreviated as a function:

new Vue({
    directives: {
        fbind(element, binding){ element.value = binding.value; ,}}});Copy the code

4. Global custom instructions

Vue.directive('fbind', {
    bind(element, binding) {
        element.value = binding.value;
    },
    inserted(element, binding) {
        element.focus();
    },
    update(element, binding){ element.value = binding.value; }});Copy the code