Vue instructions and events

Template syntax

{{ msg }}


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
    inserted: function(el){
        // el represents the bound element
// Use custom instructions
<input type="text" v-focus>

// Custom instruction with parameters
    bind: function(el,bingding){
        // Binding represents the value of the binding
// 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) {
    color: {
        bind: function(el,bingding){
   = binding.value.color;


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

Attribute v-bind

The Works of Liezi: v-bind: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 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="">{{ 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


<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

Keywords: Vue.js

Added by Sir Mildred Pierce on Thu, 13 Jan 2022 10:12:16 +0200