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:

ab509c080ec9f7ec77efedb1cdcd4bed{{ message }}16b28748ea4df4d9c2150843fecfba68

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>

    8ee39084f353b8cd4554f1e862f090af
        5440a9a6580508c1df68d3f056adcfc7
            Hover your mouse over me for a few seconds to see my dynamically bound title!
        54bdf357c58b8a65c66d7c19c8e4d114
    16b28748ea4df4d9c2150843fecfba68

　 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>

7b9e7549f8274d6577302a05a9a959fa
  14c94224c52d5f3c96b83a32bf0ae031Now you see me94b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68

　　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!