Heim > Artikel > Web-Frontend > Was sind die internen Anweisungen in Vue 2.0?

Was sind die internen Anweisungen in Vue 2.0?

一个新手Original: 2017-10-16 09:49:101429Durchsuche

1. Einführung in Vue.js

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. Man kann auch sagen, dass es sich bei dem Zustand um Daten handelt, und sein Komponentisierungskonzept ist das gleiche wie bei React, das heißt: „Alles ist eine Komponente.“ das Frontend Ein wichtiger Trend in diesem Bereich

2. Interne Befehle

2-1.v-if v-else v-show: Im Allgemeinen zusammen verwendet, ist die Wirkung von v-show ähnlich wie bei

<body>
    <div id="app">
       <p v-if="flag">if</p>
       <p v-else>else</p>
       <p v-show="flag">show</p>
    </div>
</body>
<script>
    var vm= new Vue({
        el:"#app",
        data:{
            flag:true
        }
    });
</script>

In der DOM-Struktur hängen drei p Ob der Inhalt des Tags auf der Seite angezeigt wird, vom booleschen Attribut des Flags ab. Wenn das Flag wahr ist, werden sowohl if als auch show angezeigt und der Unterschied zwischen v -if und v-show sind in der DOM-Struktur nicht vorhanden: v-if bestimmt anhand des Bedingungswerts, ob geladen werden soll, was den Druck auf den Server verringern kann geändert wird, muss die Seite erneut geladen werden; v-show wird unabhängig davon geladen, ob der Wert der Bedingung wahr ist (wenn die Bedingung wahr ist, wird das Anzeigeattribut auf sein Standardattribut gesetzt, andernfalls wird es auf gesetzt). keine)

2-2.v-for-Schleifenanweisung

Beispiele sind wie folgt:

<body>
    <div id="app">
     <ol>
         <li v-for="b in b">{{b}}</li>
     </ol>
    </div>
</body>
<script>
    var vm= new Vue({
        el:"#app",
        data:{
          b:[&#39;a&#39;,&#39;b&#39;,&#39;c&#39;,1,2]
        }
    });
</script>

Die Seite zeigt 5 li an. Der Effekt der Interpolation besteht darin, dass li die Elemente, die dem Array b entsprechen, eins zu eins anzeigt, was in etwa der for in-Schleife ähnelt. 3 v-text v-html text (html string) Befehl

kann mit jquery text(), html() verknüpft werden. Sie werden feststellen, dass die Interpolationsoperation {{}} verwendet wird, was sich bis zu einem gewissen Grad auf die Leistung auswirkt

<body>
    <div id="app">
     <p v-text="msgText"></p>
     <p v-html="msgHtml"></p>
    </div>
</body>
<script>
    var vm= new Vue({
        el:"#app",
        data:{
          msgText:"China",
          msgHtml:"<span>中国</span>"
        }
    });
</script>

Das Beispiel des v-on-Bindungsereignis-Listeners

ist wie folgt:

Ähnlich, analog zur on()-Methode von jquery, Bindung Für bestimmte Ereignisse, v-on: click kann im Beispiel als @click abgekürzt werden. Click kann durch andere Mausoperationen wie Mouseout, Mouseover usw. ersetzt werden. 2-5 v-bind-Befehl

<body>
    <div id="app">
     <button v-on:click="Hi()">Button</button>
    </div>
</body>
<script>
    var vm= new Vue({
        el:"#app",
        methods:{
            Hi:function(){
                alert("Hello World!")
            }
        }
    });
</script>

Das Beispiel lautet wie folgt :

Der Effekt besteht darin, dass die Beschriftung a rot angezeigt wird und ihr src-Attribut die v-bind-Direktive ist. Wird hauptsächlich zum Festlegen der Attribute von HTML-Tags verwendet. Die Abkürzung lautet v-bind:——>:

Zwei-Wege-Bindungsanweisung für 2-6 V-Modelldaten

<body>
    <div id="app">
        <a v-bind:style="{color:&#39;red&#39;}" :src="message">{{message}}</a>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "前端工程师"
        }
    });
</script>

Das Beispiel lautet wie folgt:

Wenn sich der Eingabewert ändert, ändert sich auch der im p-Tag enthaltene Inhalt und bleibt mit dem ersteren konsistent.

2-7 v-pre-Befehl

<body>
    <div id="app">
        <p>{{message}}</p>
        <p v-pre>{{message}}</p>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "前端工程师"
        }
    });
</script>

Das Beispiel sieht wie folgt aus:

Das erste p-Tag gibt „Front-End-Ingenieur“ aus ", und die beiden p-Tags überspringen die Vue-Kompilierung und geben den ursprünglichen Wert aus, nämlich {{message}}.

2-8 v-cloak-Befehl

<body>
    <div id="app">
        <p>{{message}}</p>
        <p v-pre>{{message}}</p>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "前端工程师"
        }
    });
</script>

Die Funktion des v-cloak-Befehls besteht darin, ihn auszuführen, nachdem der DOM-Baum erstellt und die Seite gerendert wurde muss mit CSS konsistent sein. Zusammen verwenden

2-9 v-once-Direktive

Die v-once-Direktive funktioniert nur, wenn der DOM-Baum zum ersten Mal gerendert wird .

Das obige ist der detaillierte Inhalt vonWas sind die internen Anweisungen in Vue 2.0?. 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：Wie man die Grundlagen von objektorientiertem JavaScript und das Problem dieses Zeigens verstehtNächster Artikel：Wie man die Grundlagen von objektorientiertem JavaScript und das Problem dieses Zeigens versteht

In Verbindung stehende Artikel

Mehr sehen