Heim >Web-Frontend >js-Tutorial >Zusammenfassung häufig verwendeter Anweisungen in Vue

Zusammenfassung häufig verwendeter Anweisungen in Vue

不言Original: 2018-07-26 12:53:231480Durchsuche

Der in diesem Artikel mit Ihnen geteilte Inhalt ist eine Zusammenfassung häufig verwendeter Anweisungen in Vue. Als Nächstes werfen wir einen Blick auf die spezifischen Inhalte, in der Hoffnung, Freunden in Not zu helfen.

1 Allgemeine Befehle

v-if-Befehl
v-show-Befehl
v-else-Befehl
v-for-Befehl
v-bind-Befehl
V-Modell
V-on-Befehl
V-Text-Befehl

1.1 v-if ist eine bedingte Rendering-Anweisung, die Elemente basierend auf dem wahren oder falschen Ausdruck löscht und einfügt. Die grundlegende Syntax lautet wie folgt:

v-if="expression"

Ausdruck ist ein Ausdruck, der einen booleschen Wert zurückgibt bool-Attribut, oder es kann ein Operationsausdruck sein, der bool zurückgibt. Beispiel:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>Hello, Vue.js!</h1>
            <h1 v-if="yes">Yes!</h1>
            <h1 v-if="no">No!</h1>
            <h1 v-if="age >= 25">Age: {{ age }}</h1>
            <h1 v-if="name.indexOf(&#39;jack&#39;) >= 0">Name: {{ name }}</h1>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        
        var vm = new Vue({
            el: &#39;#app&#39;,
            data: {
                yes: true,
                no: false,
                age: 28,
                name: &#39;keepfool&#39;
            }
        })
    </script>
</html>

Das Anzeigeergebnis lautet wie folgt:

Hinweis: Die v-if-Anweisung wird basierend auf ausgeführt Wert des bedingten AusdrucksEinfüge- oder Löschverhalten von Elementen.

1.2 v-for-Direktive

v-for-Direktive rendert eine Liste basierend auf einem Array. Sie ähnelt der Traversal-Syntax von JavaScript:

v-for="item in items"

items ist ein Array und item ist das Array-Element, das gerade durchlaufen wird.

Beispielcode:


    
        
            
                
                    name
                    age
                

            
            
                
                     {{item.name}}
                     {{item.age}}

name	age
{{item.name}}	{{item.age}}

1.3 Die v-bind-Direktive kann nach ihrem Namen einen Parameter annehmen, getrennt durch einen Doppelpunkt. Dieser Parameter ist normalerweise ein Attribut des HTML-Elements, zum Beispiel:v-bind:class

v-bind:argument="expression"

1.4 V-Modell

V-Modell (Wert, geprüft und ausgewählt werden ignoriert, nachdem das Formularelement festgelegt wurde), wird häufig in Formularen 7a7276301a860ea402f6bdc1f67f4471 verwendet ; textarea>

Formularelemente und Daten bidirektional binden (Zuordnungsbeziehung)

Beispielcode

<p id="app">
    <p v-text="message"> </p>
    <input type="text" v-model="message">
</p>

</body>

<script type="text/javascript">    var app = new Vue({
        el:"#app",
        data:{
            message:"nice to meet you"
        }
    })</script>

1.5 v-on-Direktive ist Wird zum Abhören von DOM-Ereignissen verwendet. Die Syntax ähnelt beispielsweise der von v-bind. Das Abhören des Click-Ereignisses des 3499910bf9dac5ae3c52d5ede7383485-Elements:

<a v-on:click="doSomething">

hat zwei Formen von Aufrufmethoden: Binden Sie eine Methode (lassen Sie das Ereignis auf einen Verweis auf die Methode verweisen) oder verwenden Sie eine Inline-Anweisung.
Die Schaltfläche „Grüße“ bindet ihr Klickereignis direkt an die Methode „greet()“, während die Schaltfläche „Hi“ die Methode „say()“ aufruft.

Es ist eine sehr häufige Anforderung, event.preventDefault() oder event.stopPropagation() in einem Event-Handler aufzurufen. Vue.js stellt Ereignismodifikatoren für v-on bereit. Wie bereits erwähnt, werden Modifikatoren durch Anweisungssuffixe dargestellt, die mit einem Punkt beginnen.

.stop
.prevent
.capture
.self
.once
.passive

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<p v-on:click.capture="doThis">...</p>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<p v-on:click.self="doThat">...</p>

Vue.js bietet Abkürzungen für die beiden am häufigsten verwendeten Anweisungen, v-bind und v-on. Die V-Bind-Anweisung kann mit einem Doppelpunkt abgekürzt werden, und die V-On-Anweisung kann mit dem @-Symbol abgekürzt werden.

<!--完整语法-->
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? &#39;active&#39; : &#39;&#39;">{{ n + 1 }}</a>
<!--缩写语法-->
<a href="javascripit:void(0)" :class="activeNumber=== n + 1 ? &#39;active&#39; : &#39;&#39;">{{ n + 1 }}</a>

<!--完整语法-->
<button v-on:click="greet">Greet</button>
<!--缩写语法-->
<button @click="greet">Greet</button>

1.6 Die V-Text-Anweisung dient hauptsächlich dazu, zu verhindern, dass {{}} auf der Seite erscheint, wenn die Seite zum ersten Mal geladen wird

v-text="expresstion"

Verwandte Empfehlungen:

ECMAScript-Verwendungsbeispiele für typeof in

Wie implementiert vue.js die Baumtabellenkapselung? So implementieren Sie eine Baumtabelle in vue.js

Das obige ist der detaillierte Inhalt vonZusammenfassung häufig verwendeter Anweisungen in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Anwendungsbeispiele für typeof in ECMAScriptNächster Artikel：Anwendungsbeispiele für typeof in ECMAScript

In Verbindung stehende Artikel

Mehr sehen