Gibt es eine Anleitung für Vuejs?

vuejs hat Anweisungen. Vuejs-Anweisungen beginnen mit „v-“, sie wirken auf HTML-Elemente und die Anweisungen bieten einige spezielle Funktionen. Wenn die Anweisungen an Elemente gebunden sind, fügen die Anweisungen den gebundenen Zielelementen einige spezielle Verhaltensweisen hinzu spezielle HTML-Funktionen.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

vuejs hat Anweisungen.

Was sind Anweisungen in Vue? Die Anweisungen von Vue.js beginnen mit v-. Sie wirken sich auf HTML-Elemente aus. Direktiven fügen dem Element ein besonderes Verhalten hinzu gebundenes Zielelement. Wir können uns die Direktive als spezielles HTML-Attribut vorstellen.

VueJS erweitert HTML um neue Attribute, sogenannte Direktiven.

• ViueJS fügt Ihrer Anwendung durch integrierte Anweisungen Funktionalität hinzu.

• Mit VueJS können Sie Anweisungen anpassen.

Eigenschaften von Anweisungen

Alle Anweisungen sind im Umfang der Vue-Instanzverwaltung enthalten.

• vueJS-Anweisungen sind erweiterte HTML-Attribute mit dem Präfix v-.

• Die V-Model-Direktive bindet den Elementwert (z. B. den Wert des Eingabefelds) an die Anwendung und speichert den Wert.

vuejs allgemeine Befehle

Vue.js bietet einige häufig verwendete integrierte Befehle:

• v-else-Anweisung
• v-for-Anweisung
• v-bind-Anweisung
• v-on-Anweisung
• v-if-Anweisung

v-if ist eine bedingte Rendering-Anweisung, die basierend darauf gelöscht wird, ob die Ausdruck ist wahr oder falsch. Und Elemente einfügen Grundlegende Syntax: v-if="Ausdruck"

<div id="app">
			<div v-if="isMale">男士</div>
			<div v-if="age>=20">age:{{age}}</div>
		</div>
		
var vm = new Vue({
			el: &#39;#app&#39;,
			data: {
				age:25,
				isMale:true,
			}
		})

Unterschied zwischen v-show und v-if. v-show rendert HTML unabhängig davon, ob die Bedingung wahr ist, während v-if nur dann rendert, wenn die Bedingung wahr ist.

Der Befehl v-else wird zusammen mit verwendet v-if oder v-show. Wenn die v-if-Bedingung nicht erfüllt ist, wird der v-else-Inhalt angezeigt. Es ähnelt der Traversierungssyntax von JavaScript. v-for="item in list" list ist ein Array, item ist das aktuell durchlaufene Array-Element v-for = "(item,index) in list", wobei Index die aktuelle Schleife ist Index, Index beginnt bei 0

<div id="app">
			<div v-if="isMale">男士v-if</div>
			<div v-show="isMale">男士v-show</div>
		</div>
var vm = new Vue({
			el: &#39;#app&#39;,
			data: {
				isMale:false
			}
		})

v-bind-Befehl
v-bind bindet dynamisch ein oder mehrere Features nach seinem Namen und trennt ihn durch einen Doppelpunkt Attribut eines HTML-Elements. Beispielsweise kann v-bind:class

class gleichzeitig mit v-bind:class vorhanden sein. Das heißt, wenn es eine Klasse gibt, wird das Hinzufügen von v-bind:class nicht überschrieben die ursprüngliche. Style-Klasse, aber füge einen neuen Klassennamen auf der ursprünglichen Basis hinzu v-on wird zum Abhören von DOM-Ereignissen verwendet. Die Verwendung ähnelt v-bind, beispielsweise dem Hinzufügen eines Klickereignisses zu einer SchaltflächeÄhnlich wie v-bind, v- Sie können auch die Abkürzung on verwenden, sie durch das @-Symbol ersetzen und den Code ändern:

< /code>

Schauen wir uns ein Beispiel an:

Das Folgende ist ein Klickcode zum Ein- und Ausblenden von p-Textabsätzen

<div id="app">
			<div v-if="isMale">男士</div>
			<div v-else>女士</div>
		</div>
		var vm = new Vue({
			el: &#39;#app&#39;,
			data: {
				isMale:true
			}
		})

Nach dem Login kopieren

Umfassendes Beispiel

<div id="app">
			<table>
				<tr class="thead">
					<td>序号</td>
					<td>姓名</td>
					<td>年龄</td>
				</tr>
				<tr v-for="(item,index) in list">
					<td v-text="index+1"></td>
					<td v-text="item.name"></td>
					<td v-text="item.age"></td>
				</tr>
			</table>
		</div>
		
var vm = new Vue({
			el: &#39;#app&#39;,
			data: {
				list:[{
					name:&#39;章三&#39;,
					age:18
				},{
					name:&#39;李四&#39;,
					age:23
				}]
			}
		})

Nach dem Login kopieren

Verwandte Empfehlungen: „vue .js-Tutorial

"

Das obige ist der detaillierte Inhalt vonGibt es eine Anleitung für Vuejs?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!