Welche Funktionen haben Vuejs?

Vuejs-Funktionen: 1. Verwenden Sie eine prägnante Vorlagensyntax, um Daten deklarativ in das DOM zu rendern. 2. Verwenden Sie die Anweisungen „v-if“ und „v-for“, um bedingte Strukturen und Schleifenstrukturen zu implementieren um eine bidirektionale Datenbindung zu realisieren; 4. Verwenden Sie Ereignis-Listener, um eine Schnittstelleninteraktion zu realisieren. 5. Komponentenbasierte Entwicklung usw.

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

Erfahren Sie mehr über die Grundfunktionen von Vue.js~

1. Datenrendering

　Der Kern von Vue.js besteht darin, eine prägnante Vorlagensyntax zu verwenden, um Daten deklarativ im DOM zu rendern!

　Beispiel 1:

<div id="app">{{ message }}</div>

rrree

Dies hat eine Vue-Anwendung generiert. Solange app.message geändert wird, wird das DOM entsprechend aktualisiert!

Beispiel 2:

<script type="text/javascript">
        var app=new Vue({
            el:"#app",
            data:{
                message:"hello vue"
            }
        })
    </script>

    <div id="app_2">
        <span v-bind:title="message">
            Hover your mouse over me for a few seconds to see my dynamically bound title!
        </span>
    </div>

　 Beispiel 2 beinhaltet Vues spezielle Attribute v-bind-Direktive, die auch auf dem entsprechenden DOM-Element gerendert wird!

2. Bedingungen und Schleifen

　 Vue kann nicht nur DOM-Text an Daten binden, sondern auch DOM-Struktur an Daten binden!

　1. Bedingung

　　Wir können die Anweisung v-if verwenden, um eine Bedingungseinstellung zu erreichen, und es ist auch sehr einfach, die Anzeige eines Elements in tatsächlichen Anwendungen zu steuern.

　　Beispiel 3:

<script type="text/javascript">
        var app_2=new Vue({
            el:&#39;#app_2&#39;,
            data:{
                message:&#39;You loaded this page on &#39;+new Date()
            }
        })
    </script>

<div id="app_3">
  <p v-if="flags">Now you see me</p>
</div>

　　Das Datenattribut kann auch geändert werden, um die Antwort zu erreichen. 2. Schleife .todos.push({ text: 'New item' }), Sie werden feststellen, dass der Liste ein neues Element hinzugefügt wurde.

3. Zwei-Wege-Bindung

　 Vue bietet eine

v-model

-Direktive, mit der problemlos eine bidirektionale Bindung zwischen Formulareingabe und Anwendungsstatus erreicht werden kann.

　Beispiel 5: .todos.push({ text: '新项目' })，你会发现列表中添加了一个新项。

3、双向绑定

　　Vue 提供了一个 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

　　例5：

<script>
        var app_3=new Vue({
            el:&#39;#app_3&#39;,
            data:{
                flags:true
            }
        })
    </script>

<div id="app_3_2">
        <ul>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ul>
    </div>

4、界面交互

　　为了让用户和你的应用进行互动，我们可以用 v-on

var app_3_2=new Vue({
            el:'#app_3_2',
            data:{
                todos:[
                    { text:'Learn JavaScript' },
                    { text:'Learn Vue' },
                    { text:'Learn Other ' }
                ]
            }
        })

    <div id="app5">
        <input type="text" v-model="msg2" />
        <p>{{msg2}}</p>
    </div>

4. Schnittstelleninteraktion

Um Benutzern die Interaktion mit Ihrer Anwendung zu ermöglichen, können wir den Befehl

v-on

verwenden, um einen Ereignis-Listener zu binden. through Es ruft die in unserer Vue-Instanz definierte Methode auf!　Beispiel 6:

var app5 = new Vue({
        el: '#app5',
        data: {
        　　msg2: '# hello '
     　　}
    })

     <div id="app6">
         <p>{{message}}</p>
         <button v-on:click="reverseMessage">Reverse Message</button>
    </div>

　Hinweis: In der Methodenmethode wird nur der Status aktualisiert und das DOM nicht berührt!

5

　 Achten Sie darauf, die Komponente zuerst zu registrieren und dann zu instanziieren!

　Stellen Sie sicher, dass Sie die Komponente registrieren, bevor Sie die Root-Instanz initialisieren!

　

Andernfalls erhalten Sie eine Fehlermeldung, wenn Sie es ohne Registrierung verwenden!

　

　 Die Komponente ist relativ leistungsfähig, kann erweitert werden und kapselt wiederverwendbaren Code, ist aber ziemlich nervig (*@ο@*) Wow ~ Sie müssen damit vertraut sein!

Beispiel 7:

var app6=new Vue({
            el:'#app6',
            data:{
                message:'Hello Vue.js!'
            },
            methods:{
                reverseMessage:function(e){
                    this.message=this.message.split('').reverse().join('');
                }
            }
        })

rrreeKomponenten sind ein sehr wichtiger Teil. Nachdem Sie mit den oben genannten Inhalten vertraut sind, sollten Sie das Komponentensystem sorgfältig studieren.

Bei Verwendung in tatsächlichen Projekten können mehrere Seiten denselben Teil und dieselbe Komponente wiederverwendenEs ist so großartig~O(∩_∩)O~~

🎜Verwandte Empfehlungen: „🎜vue.js Tutorial🎜 》🎜

Das obige ist der detaillierte Inhalt vonWelche Funktionen haben Vuejs?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!