Zusammenfassung häufig verwendeter Anweisungen in Vue-js-Tutorial-php.cn

Zusammenfassung häufig verwendeter Anweisungen in Vue

不言

Freigeben： 2018-07-26 12:53:23

Original

1466 Leute haben es durchsucht

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"

Nach dem Login kopieren

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>

Nach dem Login kopieren

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"

Nach dem Login kopieren

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

Nach dem Login kopieren

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"

Nach dem Login kopieren

1.4 V-Modell

V-Modell (Wert, geprüft und ausgewählt werden ignoriert, nachdem das Formularelement festgelegt wurde), wird häufig in Formularen 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>

Nach dem Login kopieren

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 -Elements:

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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"

Nach dem Login kopieren

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!