Analyse der Vorlagensyntax, berechneten Eigenschaften und Listener von Vue

Bei dem in diesem Artikel geteilten Inhalt geht es um die Analyse der Vorlagensyntax, der berechneten Eigenschaften und der Listener von Vue. Freunde in Not können sich darauf berufen.

VorlageSyntax, BerechnungEigenschaften und Listener

Ziele:

1. Beherrscht die Verwendung der Vue-Vorlagensyntax

2. Verstehen Sie die

Verwendung von berechneten Eigenschaften und Listener und die Anwendungsszenarien

1.

Vorlagensyntax

<div id="app">
<!-- 以下说绑定的值都可以写成js表达式形式 -->
<!-- {{}}: 双大括弧语法 -->
<!-- 如果不想让它响应更新,可以添加v-once指令(只渲染一次) -->
<p>
first: {{firstName}}<br>
last: {{lastName}}<br>
{{firstName + &#39; &#39; + lastName}}
</p>
<!-- 以下的绑定都会优先显示,也就是原本标签之间的值的会无效 -->
<!-- 使用v-html: html会被解析 -->
<p v-html="test"></p>
<!-- 使用v-text: html不会被解析,直接以文本输出 -->
<p v-text="test">123</p>
 
<!-- 标签属性绑定v-bind, 简写":" -->
<img v-bind:height="imgHeight" :width="imgWidth" style="border: 1px solid #000"></img>
</div>
 
<script>
var vm = new Vue({
el: &#39;#app&#39;,
data: {
firstName: &#39;Chi&#39;,
lastName: &#39;Chan&#39;,
test: &#39;<h1>哈哈哈<h1>&#39;,
imgHeight: &#39;200px&#39;,
imgWidth: 200
}
})
</script>

2. Berechnetes Attribut(berechnet)

Berechnet Eigenschaften und Methoden sind unterschiedlich, Berechnete Eigenschaften werden basierend auf ihren Abhängigkeiten zwischengespeichert,, Wenn die relevanten Variablen der berechneten Attributänderung wird die Berechnung neu berechnet , , ansonsten werden die bisherigen Berechnungsergebnisse direkt aus dem Cache gelesen .( Dies kann den Leistungsverbrauch reduzieren)

Berechnete Eigenschaften umfassen Getter und Setter, Sie können die Funktionen, die beim Setzen und Abrufen des Werts ausgeführt werden, separat definieren.

3.(Listener)

Wenn wir nur einzelne Daten abhören müssen

, oder einige Vorgänge ausführen müssen, wenn sich Daten ändern ( Zu ändern mehrere Daten ), und diese Änderungen dürfen keine Abhängigkeiten von diesen Daten haben , Dann können Sie den Listener .Listener

,

kann auf Änderungen in Daten warten, Führen Sie dann die entsprechenden Vorgänge aus .4. Nutzungsszenarien

1. Szenarien, die sich auf mehrere Daten auswirken (

Eine Änderung

)2. Berechnet ist gut in der Verarbeitung von Szenarien: Ein Daten wird von mehreren Daten beeinflusst
(Mehrere Änderungen,gibt schließlich einen Datenwert zurück)3.Methoderelativ gewöhnlich

,

muss aktiv ausgelöst werden , kann den Code auch kompliziert machen , Und wenn es Szenarien wie das gibt oben , Die Verwendung der Methode führt zu einem höheren Leistungsverbrauch >Verwandte Empfehlungen:

vue-Lebenszyklus, Vue-Instanz, Vorlagensyntax

Das obige ist der detaillierte Inhalt vonAnalyse der Vorlagensyntax, berechneten Eigenschaften und Listener von Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!