Lassen Sie uns ausführlich über einige gängige Anweisungen in Vue sprechen

Dieser Artikel wird Ihnen eine ausführliche Diskussion einiger allgemeiner Anweisungen in Vue geben. Ich hoffe, er wird Ihnen hilfreich sein.

Lass uns zunächst über das VueFramework sprechen. Es ist ein sehr benutzerfreundliches JavaScript-Framework für Anfänger und ermöglicht Entwicklern den Einstieg Ich habe schnell angefangen und ich persönlich finde, dass die Vue-Befehle sehr praktisch sind. Lassen Sie uns im heutigen Artikel über die häufig verwendeten Vue-Befehle sprechen! v-for

Wenn wir zum ersten Mal eine Sprache lernen, kommen wir mehr oder weniger mit

for

for (let i = 0; i < arr.length; i++) {

}

Vues v-for ist immer noch dasselbe wie das grundlegendste Konzept in unserem Js, nur zwei Wörter

Schleife

v-for Das

item

und der index in den Klammern nach der for-Schleife entsprechen arr[i] und i in der for-Schleife, d. h. entsprechend jedem Element und subscript, hinter dem in arr Dieses arr ist das letzte des Arrays, das wir durchlaufen möchten. :key="item.id" ist der Kern von v-for. Ohne this:key unser Vue wird einen Fehler melden. Warum gibt es also einen Schlüssel? Welche Parameter muss der Schlüssel angeben? Der Parameter von Key ist eindeutig, das heißt, der Schlüssel jeder Schleife kann nicht wiederholt werden. Wir empfehlen hier nicht, den Index als Schlüssel zu verwenden. Schließlich besteht die Funktion des Schlüssels darin, zwei Knoten zu beurteilen beim Aktualisieren von Komponenten. Wenn sie gleich sind, verwenden Sie sie wieder; wenn sie nicht gleich sind, löschen Sie die alten und erstellen Sie neue. Wenn Sie beim Rendern einfacher zustandsloser Komponenten keine Schlüsselkomponente hinzufügen, wird diese standardmäßig wiederverwendet. Der hinzugefügte Knoten wird nicht gelöscht, aber der Textwert im Listenelement wird geändert sind sehr leistungsintensiv. Wenn nach dem Hinzufügen des Schlüssels der Vergleichsinhalt inkonsistent ist, wird er als zwei Knoten betrachtet, der alte Knoten wird zuerst gelöscht und dann wird der neue Knoten hinzugefügt.

<li v-for="(item,index) in arr" :key="item.id">
     {{ item.name }}
</li>

v-show

v-show

wird basierend auf einem booleschen Wert gerendert, true wird auf der Seite angezeigt, false wird nicht auf der Seite angezeigt, sein Prinzip besteht eigentlich darin, den CSS-Stil zu steuern Machen Sie unsere entsprechenden Komponenten. Oder das Feld wird angezeigt oder ausgeblendet auf der Seite und false wird nicht auf der Seite angezeigt. Wenn der Anfangswert dispaly:"none"   ，显示dispaly:"block"false

ist, wird die Komponente erst beim ersten Mal gerendert Der Parameter wird zu „true“, aber sein Zustand wird wieder zu „false“. Wenn Sie sehr häufig wechseln müssen, ist es besser, „v-show“ zu verwenden Laufzeit ist es besser,

v-if

zu verwenden.

<div v-show="true"> 我 dispaly:"block" 拉 </div>

<div v-show="false"> 我 dispaly:"none" 拉 </div> //假装我隐藏了 你看不见我

v-else erwähnte v-if und sprach auch über v-else Wenn die v-if-Bedingung nicht erfüllt ist, geht er direkt zu v-else, denken Sie daranv - Der Komponente darf kein Gleichheitszeichen folgen. v-if

<div v-if="true">  </div>

<div v-if="false"> 我被销毁了呜呜呜 </div> //假装我隐藏了 你看不见我

v-else-if v-else-if Wenn die v-if

-Bedingung nicht erfüllt ist, geht es direkt zu

v-else-if

, um zu sehen, ob die Bedingung erfüllt ist, wird die Komponente gerendert. Der Komponente muss

v-if

<div v-if="false"> 你看不到我啊  </div> //因为我条件不成立

<div v-else> 你能看到我 </div>

v-oncev-once vorangestellt werden. Seine Funktion besteht darin, dass das Element oder die Komponente, die es definiert, nur einmal gerendert wird Wird beim Aktualisieren der Daten neu gerendert, was einem statischen Inhalt

<p v-if="score>=90">厉害</p>

<p v-else-if="score>=60">差不多</p>

v-textv-text

entspricht, der Daten in Form von Text einfügt. Er ersetzt den Inhalt auf dem Element selbst. Wenn die Daten aktualisiert werden, wird auch

<template>
    <div v-once>{{count}}</div>
    <button v-on:click="addCount"> 你点我count也不加 </button>
</template>



<script>
    export default {
        data() {
            return { count: 10 } 
        },
        methods: { 
        addCount: function () {
            this.count += 1;
            console.log(&#39;this.count:&#39;+this.count); 
            } 
        }
    }
</script>

v-html

v-html verwendet, um HTML auszugeben -text gibt einfachen Text aus und der Browser analysiert ihn nicht erneut, aber v-html analysiert ihn als HTML-Tag und gibt ihn aus

<p v-text="data"> 你好你好 </p>

v-onv-on Eine einfache Möglichkeit, ihn zu schreiben, ist „ @ " Vereinfacht ausgedrückt ist v-on ein verbindliches Ereignis. Sie können mehrere Ereignisse an ein Label binden, v-on: Das erste ist das Ereignis, und auf das Ereignis folgt eine benutzerdefinierte Methode

 <button v-on:mouseenter=&#39;onenter&#39; @click=&#39;leave&#39;>click me</button>

v-bind

v-bind 也有一个简便的写法就是" :  " 简单来说v-on就是用于绑定数据和元素属性 ， 最常用的方法就是用于动态绑定class

 <ul  :class="classObject"></ul>

v-model

v-model是Vue双向绑定指令 ， 它可以在页面是输入的状态同时改变绑定data属性 ， 也会在data属性发生改变的时候也更新页面的状态 ， 我们经常在input上面能发现他的存在 ， 他的本质上其实是绑定了7a3f9db32469ed541a9a9f23cd4ac481 ， v-model后面可以跟修饰符比如 .lazy 、.trim 和 .number 这些修饰符一起使用

.lazy 将input的实时更新改为一个change事件 ， 只有失焦的时候input才会触发事件

.trim 去除字符串首尾的空格

.number 将数据转化为值类型

<input v-model="test">

<input v-model.lazy="msg" >

<input v-model.trim="msg">

<input v-model.number="age" type="number">

【相关推荐：vue.js教程】

Das obige ist der detaillierte Inhalt vonLassen Sie uns ausführlich über einige gängige Anweisungen in Vue sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!