Get common Vue instructions in one move

This article will introduce you to the common instructions of Vue in detail. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Insert text:

v-text

Equivalent to the innerText attribute of the element, it must be a double label

Inserting HTML:

Equivalent to the innerHTML attribute of the element

Loop traversal

The use of v-for, in addition to the item attribute, there are some other auxiliary attributes

 /* 在html中使用v-for指令进行渲染 */
/*
 普通数组
 */
  data:{
      list:[1,2,3,4,5,6]
   }
  <p v-for="(item,i) in list">--索引值--{{i}}   --每一项--{{item}}</p>

/*
 对象数组
 */
 data:{
      list:[1,2,3,4,5,6],
      listObj:[
        {id:1, name:&#39;zs1&#39;},
        {id:2, name:&#39;zs2&#39;},
        {id:3, name:&#39;zs3&#39;},
        {id:4, name:&#39;zs4&#39;},
        {id:5, name:&#39;zs5&#39;},
        {id:6, name:&#39;zs6&#39;},
      ]
}
   <p v-for="(user,i) in listObj">--id--{{user.id}}   --姓名--{{user.name}}</p>

/*
  对象
  */
  data:{
      user:{
        id:1,
        name:&#39;托尼.贾&#39;,
        gender:&#39;男&#39;
      }
 }
 <p v-for="(val,key) in user">--键是--{{key}}--值是--{{val}}</p>

/*
 数字
 <!-- 注意：如果使用v-for迭代数字的话，前面 count 的值从 1 开始-->
 */
<p v-for="count in 10">这是第{{count}}次循环</p>

Conditional rendering

v-if: whether to insert elements

v-show whether to hide elements and render elements according to CSS

Attribute binding

v-bind: Attribute name = "Constant || Variable name"

Abbreviated form: Attribute name = "Constant || Variable name"

<p v-bind:属性名="变量"></p>
//可以简写成
<p :属性名="变量"></p>

//如果要赋值常量，需要给常量用单引号包起来，如
<p :属性名=" &#39;常量&#39; "></p>

Two-way binding: v-model

The so-called two-way binding means that if you change the value in the view layer, the corresponding value in vue will also change. Only elements with value attributes can be bound to two-way data.

Binding event: v-on

v-on:click = "Method name || Directly changes vue internal variables",

Abbreviated form: @click = " Method name || Directly changes the vue internal variable"

<p v-on:click=" num = 1 "></p>
//可以简写成
<p @click=" num = 1 "></p>

Skip element node

v-pre: Skip the compilation process of this element and its sub-elements. Can be used to display original Mustache tags. Skipping a large number of nodes without instructions will speed up compilation.

Render only once

v-once: Render elements and components only once. On subsequent re-renders, the element/component and all of its children will be treated as static content and skipped. This can be used to optimize update performance.

Recommended learning: vue.js tutorial

The above is the detailed content of Get common Vue instructions in one move. For more information, please follow other related articles on the PHP Chinese website!