Erhalten Sie allgemeine Vue-Anweisungen in einem Schritt

Dieser Artikel stellt Ihnen die allgemeinen Anweisungen von Vue im Detail vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Text einfügen:

v-text

Entspricht dem innerText-Attribut des Elements, das eine doppelte Beschriftung sein muss.

HTML einfügen:

Entspricht dem innerHTML-Attribut des Elements

Loop Traversal

Verwendung von v-for, zusätzlich zum Artikelattribut gibt es einige andere Hilfsattribute

 /* 在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>

Bedingtes Rendern

v-if: ob das Element eingefügt werden soll

v-show ob das Element ausgeblendet und gerendert werden soll Element gemäß CSS

Attributbindung

v-bind: Attributname = „Konstante || Variablenname“

Kurzform: Attributname = „Konstante || Variablenname“

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

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

Zwei-Wege-Bindung: V-Modell

Die sogenannte Zwei-Wege-Bindung bedeutet, dass Sie sich in der Ansichtsebene befinden. Wenn der Wert geändert wird, ändert sich auch der entsprechende Wert in Vue. Nur Elemente mit Wertattributen können an bidirektionale Daten gebunden werden.

Bindungsereignis: v-on

v-on:click = „Methodenname|| Ändert direkt vue-interne Variablen“,

Kurzform: @click = „Methodenname|| Ändert direkt vue-interne Variablen“

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

Elementknoten überspringen

v-pre: Überspringen Sie den Kompilierungsprozess dieses Elements und seiner untergeordneten Elemente. Kann verwendet werden, um Original-Mustache-Tags anzuzeigen. Das Überspringen einer großen Anzahl von Knoten ohne Anweisungen beschleunigt die Kompilierung.

Nur einmal rendern

v-once: Elemente und Komponenten nur einmal rendern. Bei nachfolgenden erneuten Renderings werden das Element/die Komponente und alle seine untergeordneten Elemente als statischer Inhalt behandelt und übersprungen. Dies kann zur Optimierung der Update-Leistung genutzt werden.

Empfohlenes Lernen: vue.js-Tutorial

Das obige ist der detaillierte Inhalt vonErhalten Sie allgemeine Vue-Anweisungen in einem Schritt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!