Vue.js で簡単な ToDoList の事前準備を実装

1. はじめに

私は最近、軽量の mvvm フレームワーク Vue.js を学び始めました。中国語のドキュメントに関する限り、非常に完全です。以前はバージョン1.0を勉強していたのですが、ある日ふと公式サイトを開いたら2.0にアップデートされていました。その後、それ以降はすべて 2.0 構文に変更されました。 ps: Vue の初心者の場合は、学習の参考として使用できるビデオが MOOC にあります (ここでは、ToDoList を作成して学習プロセスを記録した小さなおもちゃを参照しただけです)。

2. オープニング
最近、フロントエンドで注目されているのが mvvm フレームワークです。Lagou に行って調べてみると、基本的にその 70% には要件があります。ということは嘘ではなく、お金を増やすためには時代についていくべきですよね？ブログ投稿「http://www.cnblogs.com/xueduanyang/p/3601471.html」をお勧めします。これは非常に詳細であり、弁証法的に見る必要があると思います。

ナンセンスはこれくらいにして、本文に入りましょう

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

この Todolist で必要な Vue.js ポイントの合計は次のとおりです:

1 Vue インスタンスを作成します: 例:

var vm= new Vue();

2. リストのレンダリング: 例:

v-for="(item,index) in todo_items"; 3. バインディング イベント: 例:

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

2.1 Vueインスタンスの作成

公式サイトでは以下の方法でインスタンスを作成しています

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

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

ここで、このアプリの変数をは私たちが使用するものです コンストラクター new Vue() によって構築されたインスタンスはオブジェクトです。この場合、このインスタンスに対する操作は、オブジェクトに対する操作とみなすことができます。

今すぐアプリのメッセージ値を取得しましょう。

まず、データを取得します: app.$data。 (Vue インスタンスによって監視されるデータ オブジェクト。Vue インスタンスは、そのデータ オブジェクト プロパティへのアクセスをプロキシします)

次に、メッセージ app.$data.message を取得します。

このメソッドを通じて、インスタンスに必要な属性値を取得できます。

例：

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

はインスタンス間で相互に転送できます。

2.2 リストループ

ネイティブ JS のような動的リストをレンダリングするために for() ループを使用する必要はなくなりました。

レンダリングするには v-for="item in items" を直接使用します。ネイティブの for in ループメソッドと似ています

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

2.3 イベントバインディング

JQ では、クリックイベントをバインドするために $().on('click',function(){}); をよく使用します。

Vue では、v-on:click="doSometing('a','b')"; を使用してバインドします。

例:

d245964928ebaa51ba05853a75c7c66765281c5ac262bf6d81768915a4a77ac0

これらの 3 つのポイントで、この簡単な ToDoList を書き始めることができます。