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-if-Befehl

v-show-Befehl

• 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"

Ausdruck ist ein Ausdruck, der einen booleschen Wert zurückgibt. Der Ausdruck kann ein boolesches Attribut oder ein Operationsausdruck sein, der einen booleschen Wert zurückgibt.

<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,
			}
		})

v-show-Befehl

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.

Schauen Sie sich zuerst zwei Screenshots an, wenn isMale wahr ist, und das zweite Bild Wenn isMale nicht festgelegt ist, können Sie sehen, dass der HTML-Code von v-if nicht gerendert wird und die Verwendung von p von v-show nur den Anzeigestil ändert: none

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äche60033b8ebe30549c6492039125137df5Ähnlich wie v-bind, v- Sie können auch die Abkürzung on verwenden, sie durch das @-Symbol ersetzen und den Code ändern:

52ce6fd00f8fa56d3fb8931abf86959c<p></p>Schauen wir uns ein Beispiel an: <p><strong></strong></p> <p>Das Folgende ist ein Klickcode zum Ein- und Ausblenden von p-Textabsätzen<br><pre class="brush:js;toolbar:false;">&lt;div id=&quot;app&quot;&gt; &lt;div v-if=&quot;isMale&quot;&gt;男士&lt;/div&gt; &lt;div v-else&gt;女士&lt;/div&gt; &lt;/div&gt; var vm = new Vue({ el: &amp;#39;#app&amp;#39;, data: { isMale:true } })</pre><br><br>Umfassendes Beispiel</p> <p><img src="https://img.php.cn/upload/article/000/000/024/74a27e4688aeb29836b3c0d421502210-3.png" alt="" loading="lazy"></p> <p><pre class="brush:js;toolbar:false;">&lt;div id=&quot;app&quot;&gt; &lt;table&gt; &lt;tr class=&quot;thead&quot;&gt; &lt;td&gt;序号&lt;/td&gt; &lt;td&gt;姓名&lt;/td&gt; &lt;td&gt;年龄&lt;/td&gt; &lt;/tr&gt; &lt;tr v-for=&quot;(item,index) in list&quot;&gt; &lt;td v-text=&quot;index+1&quot;&gt;&lt;/td&gt; &lt;td v-text=&quot;item.name&quot;&gt;&lt;/td&gt; &lt;td v-text=&quot;item.age&quot;&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; var vm = new Vue({ el: &amp;#39;#app&amp;#39;, data: { list:[{ name:&amp;#39;章三&amp;#39;, age:18 },{ name:&amp;#39;李四&amp;#39;, age:23 }] } })</pre><strong>Verwandte Empfehlungen: „</strong>vue .js-Tutorial</p>"<p></p>

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!