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>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>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>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>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>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>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!
