Dieses Mal bringe ich Ihnen interne Anweisungen für Vue 2.0. Was sind die Vorsichtsmaßnahmen bei der Verwendung interner Anweisungen für Vue 2.0? Hier sind praktische Fälle.
1.Vue.js Einführung
Derzeit gibt es drei gängige Front-End-Frameworks: Angular, React und Vue. Aufgrund der Lizenzkontroverse um React vor einiger Zeit ist die Popularität von Vue gestiegen. Darüber hinaus ist die benutzerfreundliche API-Dokumentation von Vue ein wichtiges Feature. Vue.js ist ein sehr leichtes Tool, eher wie eine JS-Bibliothek als ein MVVM-Framework. Vue.js bietet responsive Programmierung und Komponentisierung. Reaktive Programmierung bedeutet, den Zustand und die Ansicht synchron zu halten, und der Zustand kann auch als Daten bezeichnet werden, und sein Komponentisierungskonzept ist das gleiche wie bei React, das heißt: „Alles ist eine Komponente, und die Komponentisierungsidee ist praktisch für Modularisierung Entwicklung ist ein großer Trend im Frontend-Bereich
2. Interne Befehle
2-1.v-if v-else v-show: Die ersten beiden werden im Allgemeinen zusammen verwendet, und die Wirkung von v-show ähnelt der von v-if.
Beispiele sind wie folgt:
<body>
<p id="app">
<p v-if="flag">if</p>
<p v-else>else</p>
<p v-show="flag">show</p>
</p>
</body>
<script>
var vm= new Vue({
el:"#app",
data:{
flag:true
}
});
</script>Nach dem Login kopieren
Ob in der DOM-Struktur der Inhalt der drei p-Tags auf der Seite angezeigt wird, hängt vom booleschen Attribut des Flags ab. Wenn Flag wahr ist, werden sowohl if als auch show angezeigt und else ist in der DOM-Struktur nicht vorhanden. Der Unterschied zwischen v-if und v-show spiegelt sich darin wider: v-if bestimmt anhand des Bedingungswerts, ob geladen werden soll. Dies kann den Druck auf den Server verringern. Der Nachteil besteht jedoch darin, dass der Bedingungswert vorliegt geändert, die Seite muss erneut geladen werden; v-show spielt keine Rolle. Ob der Wert der Bedingung wahr ist, wird geladen (wenn die Bedingung wahr ist, wird das Attribut
display auf seinen Standardwert gesetzt). Attribut, andernfalls wird es auf „Keine“ gesetzt)
2-2.v-for-Schleifenbefehl
Beispiele sind wie folgt:
<body>
<p id="app">
<ol>
<li v-for="b in b">{{b}}</li>
</ol>
</p>
</body>
<script>
var vm= new Vue({
el:"#app",
data:{
b:['a','b','c',1,2]
}
});
</script>Nach dem Login kopieren
Die Seite zeigt 5 li an
2-3 v-text v-html text (htmlstring) Befehl
Sie können sich text() und html() von jquery vorstellen. Inzwischen werden Sie feststellen, dass die vorherigen Interpolationsoperationen verwendet werden, d. h. {{}}. Dieser Ansatz wirkt sich bis zu einem gewissen Grad auf die Leistung aus.
2-4 v-on-Bindungsereignis-Listener
<body>
<p id="app">
<p v-text="msgText"></p>
<p v-html="msgHtml"></p>
</p>
</body>
<script>
var vm= new Vue({
el:"#app",
data:{
msgText:"China",
msgHtml:"<span>中国</span>"
}
});
</script>Nach dem Login kopieren
Beispiele sind wie folgt:
Auf die gleiche Weise kann v-on:click im Beispiel analog zur on()-Methode von jquery, die zum Binden von Ereignissen verwendet wird, als @click abgekürzt werden. Der Klick kann durch andere Mausoperationen wie Mouseout, Mouseover usw. ersetzt werden.
2-5 v-bind-Befehl
<body>
<p id="app">
<button v-on:click="Hi()">Button</button>
</p>
</body>
<script>
var vm= new Vue({
el:"#app",
methods:{
Hi:function(){
alert("Hello World!")
}
}
});
</script>Nach dem Login kopieren
Beispiele sind wie folgt:
Der Effekt besteht darin, dass die Beschriftung a rot angezeigt wird und ihr src-Attribut vm.message ist. Die v-bind-Direktive wird hauptsächlich zum Festlegen der Attribute des
html-Tags
verwendet. Die Abkürzung lautet v-bind:——>:
<body>
<p id="app">
<a v-bind:style="{color:'red'}" :src="message">{{message}}</a>
</p>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "前端工程师"
}
});
</script>Nach dem Login kopieren
2-6 V-Modelldaten, bidirektionale Bindungsanweisungen
Beispiele sind wie folgt:
Wenn sich der Eingabewert ändert, ändert sich auch der im p-Tag enthaltene Inhalt und bleibt mit dem ersteren konsistent.
<body>
<p id="app">
<p>{{message}}</p>
<input type="text" v-model="message">
</p>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "前端工程师"
}
});
</script>Nach dem Login kopieren
2-7 v-pre-Befehl
Beispiele sind wie folgt:
Das erste p-Tag gibt „Front-End-Ingenieur“ aus, während das zweite p-Tag die Vue-Kompilierung überspringt und den ursprünglichen Wert ausgibt, nämlich {{message}}.
2-8 V-Cloak-Befehle
<body>
<p id="app">
<p>{{message}}</p>
<p v-pre>{{message}}</p>
</p>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "前端工程师"
}
});
</script>Nach dem Login kopieren
Die Funktion der V-Cloak-Anweisung besteht darin, sie auszuführen, nachdem der DOM-Baum erstellt und die Seite gerendert wurde, und sie muss zusammen mit CSS verwendet werden
2-9 v-once-Befehl
Die v-once-Direktive funktioniert nur, wenn der DOM-Baum zum ersten Mal gerendert wird.
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Das obige ist der detaillierte Inhalt vonInterne Vue 2.0-Anweisungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
