Heim > Artikel > Web-Frontend > Interne Vue 2.0-Anweisungen
Interne Vue 2.0-Anweisungen
- php中世界最好的语言Original
- 2018-04-17 14:39:561417Durchsuche
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>
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>
Die Seite zeigt 5 li an
2-3 v-text v-html text (htmlstring) Befehl
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>
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>
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-Tagsverwendet. 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>
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>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>
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 werden2-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!