Vue.js implementiert eine einfache vorläufige ToDoList-Vorbereitung

1. Vorwort

Ich habe vor kurzem begonnen, das leichte MVVM-Framework Vue.js zu lernen. Was die chinesische Dokumentation betrifft, ist sie recht vollständig. Ich habe vorher Version 1.0 studiert, aber eines Tages öffnete ich plötzlich die offizielle Website und stellte fest, dass sie auf 2.0 aktualisiert wurde. Dann wurde alles danach auf die 2.0-Syntax geändert. ps: Wenn Sie ein Anfänger in Vue sind, gibt es im MOOC ein Video, das Sie als Referenz zum Lernen verwenden können (ich habe hier nur auf das kleine Spielzeug verwiesen, das eine ToDoList geschrieben und den Lernprozess aufgezeichnet hat).

2. Eröffnung
Das MVVM-Framework ist heutzutage ein heißes Thema im Frontend. Wenn Sie nach Lagou gehen und sich umschauen, werden Sie feststellen, dass 70 % davon Anforderungen haben. Es ist also keine Lüge, nur um mehr Geld zu verdienen, sollten wir mit der Zeit gehen, oder? Ich empfehle einen Blog-Beitrag „http://www.cnblogs.com/xueduanyang/p/3601471.html“. Ich denke, er ist ziemlich gründlich und sollte dialektisch betrachtet werden.

Genug Unsinn, jetzt kommen wir zum Text

/************************************************** *************/

In dieser Aufgabenliste sind die insgesamt erforderlichen Vue.js-Punkte:

1. Erstellen Sie eine Vue-Instanz: Beispiel:

var vm=new Vue();

2. Listenwiedergabe: Beispiel:

v -for ="(item,index) in todo_items";

3. Bindungsereignis: Beispiel:

v-on:click="toogleFinishi(item,index)";

2.1 Erstellen Sie eine Vue-Instanz

Die folgende Methode wird auf der offiziellen Website verwendet, um eine Instanz zu erstellen

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

var app = new Vue({
 
 el: '#app',
 
 data: {
 
 message: 'Hello Vue!'
 
 }
 
})

Hier ist die App-Variable eine Instanz, die wir mit dem Konstruktor new Vue() erstellen, der ein Objekt ist. Dann kann unsere Operation an dieser Instanz als Operation an einem Objekt betrachtet werden.

Lassen Sie uns jetzt den Nachrichtenwert der App ermitteln.

Nehmen Sie zunächst die Daten: app.$data. (Das von der Vue-Instanz beobachtete Datenobjekt. Die Vue-Instanz vermittelt den Zugriff auf ihre Datenobjekteigenschaften)

Nehmen Sie dann die Nachricht: app.$data.message.

Durch diese Methode können wir die gewünschten Attributwerte in der Instanz erhalten.

ZB:

vm = new Vue({
el : 'test',
data : {
msg : ' app.$data.message '
}
})

können aufeinander übertragen werden.

2.2 Listenschleife

Wir müssen keine for()-Schleife mehr verwenden, um eine dynamische Liste wie natives js zu rendern.

Direkt verwenden: v-for="item in items" zum Rendern. Ähnlich der nativen for-in-Loop-Methode

   
<div v-for="item in items">
  
 {{ item.text }}
  
 </div>

2.3 Ereignisbindung

In JQ verwenden wir oft $() on('. click',function(){}); um Klickereignisse zu binden.

In Vue verwenden wir v-on:click="doSometing('a','b')" zum Binden.
ZB:

Mit diesen 3 Punkten können Sie mit dem Schreiben dieser einfachen ToDoList beginnen.