Template syntax

{{ msg }}

instructions

VUE comes with 13 kinds of instructions

1. v-html
2. v-text
3. v-bind
4. v-show
5. v-if
6. v-else
7. v-else-if
8. v-model
9. v-for
10. v-on
11. v-pre
12. v-cloak
13. v-once

Custom instruction

Note: this in the user-defined instruction points to window

An instruction definition object can provide the following hook functions (all optional):

• bind: called only once when the instruction is bound to the element for the first time. One time initialization settings can be performed here.
• Inserted: called when the bound element is inserted into the parent node (only the parent node is guaranteed to exist, but it may not have been inserted into the document).
• Update: called when the VNode of the component is updated, but may occur before its child VNode is updated. The value of the instruction may or may not have changed. However, you can ignore unnecessary template updates by comparing the values before and after the update

// Custom get focus command
Vue.directive('focus',{
    inserted: function(el){
        // el represents the bound element
        el.focus();
    }
})
// Use custom instructions
<input type="text" v-focus>

// Custom instruction with parameters
Vue.directive('color',{
    bind: function(el,bingding){
        // Binding represents the value of the binding
        el.focus();
    }
})
// Use custom instructions with parameters
<input type="text" v-color="{color:yellow}">

// To customize local instructions, you need to add a directives in the VUE instance
directives:  {
    focus: {
        // Definition of instruction
        inserted: function (el) {
            el.focus()
        }
    },
    color: {
        bind: function(el,bingding){
            el.style.backgroundColor = binding.value.color;
        }
    }
}

text

1. v-text
2. v-html
3. {{}}

Attribute v-bind

The Works of Liezi: v-bind:class
 Abbreviation::class

Style binding

Object form settings

<div :class="{bgc: isActive}"></div>

Array form setting

<div :class="[bgcClass,colorClass]"></div>          // The values in the array need to define the class style represented in the data

Mixed form

<div :class="[bgcClass,colorClass，{bgc: isActive}]"></div>

v-if and v-show

1. Means: v-if controls the explicit and implicit of elements by controlling the existence of DOM nodes; v-show sets the display style of DOM elements. block is displayed and none is hidden;
2. Compilation process: v-if switching has a local compilation / unloading process. In the switching process, the internal event listener and sub components are properly destroyed and rebuilt; v-show is just a simple css based switch;
3. Compilation condition: v-if is inert. If the initial condition is false, nothing will be done; Local compilation is started only when the condition becomes true for the first time (compilation is cached? Local unloading is performed when the compilation is cached and then switched); v-show is compiled under any condition (whether the first condition is true) and then cached, and DOM elements are retained;
4. Performance consumption: v-if has higher switching consumption; v-show has higher initial rendering consumption;
5. Based on the above differences, it is better to use v-show if you need to switch very frequently; If the conditions rarely change at run time, it is better to use v-if.

form

v-model

Form modifier

v-model:number              // Convert to number
v-model:trim                // Remove front and back spaces
v-model:lazy                // Convert input event to change event

Loop v-for

<li v-for="{item in arr}">{{ item }}</li>

<li v-for="{(item,index) in arr}">{{ index }} --- {{ item }}</li>

<li v-for="{(item,index) in arr}" :key="item.id">{{ index }} --- {{ item }}</li>         // key is to help VUE improve performance

Event binding

Writing method

Basic writing: v-on:click

Abbreviation: @ click

Event modifier

Vue.js passes through the point The modifier is called by the instruction suffix represented by. Multiple modifiers can be written in series

Form: event Modifier name

Example: @ click stop

1. stop         // Stop bubbling
2. prevent      // Block default behavior
3. capture      // Block capture
4. self         // Listen only for events that trigger this element
5. once         // Trigger only once
6. left         // Left key trigger
7. right        // Right click trigger
8. middle       // Intermediate roller trigger

Key modifier

Vue allows you to add key modifiers for v-on when listening for keyboard events

example:

<input v-on:keyup.13="submit">

<input @keyup.enter="submit">

It is difficult to remember all keycodes, so Vue provides aliases for the most commonly used keys:

1. enter
2. tab
3. delete (capture "delete" and "Backspace" key)
4. esc
5. space
6. up
7. down
8. left
9. right
10. ctrl
11. alt
12. shift
13. meta

Custom key modifier:

Vue.config.keyCodes.f1 = 112