Vue.js實作簡單ToDoList 前期準備

一、前言

最近開始學習輕量級的mvvm框架Vue.js。就中文文檔來說，算是很齊全了。之前本來在學習1.0版本，某日突然打開官網發現已更新為2.0。便把之後的都改為了2.0的文法。 ps：如果剛好你是Vue的初學者的話，慕課網上有一個視頻倒是可以去學習參考（我就是參考那個寫了個ToDoList的小玩具，在這記錄一下學習過程）。

二、開篇
mvvm框架是前端現在比較熱門的話題，去拉勾網上轉一圈，基本70%都有要求。所以不說虛的，只是為了多賺點錢，咱們也該跟上時代的步伐不是。推薦一篇文章‘http://www.cnblogs.com/xueduanyang/p/3601471.html'，我覺得講的挺透，辯證的看嘛。

廢話多了，現在進入正文

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

在這個todolist當中，一共需要的Vue.js點有:

1、創建Vue實例：Eg：

var vm= new Vue();

2、列表渲染：Eg：

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

3、綁定事件：Eg：

v-on:3、綁定事件：Eg：

 "toogleFinishi(item,index)"；

2.1 創建Vue實例

在官網中使用瞭如下的方法來創建一個實例

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

    

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

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

    

建構子new Vue()建構的一個實例，它是一個物件。那我們對這個實例的操作就可以看成是對一個物件進行操作。

我們現在來取一下app的message值。

首先，取data：app.$data。 （Vue 實例觀察到的資料物件。Vue 實例代理了對其 data 物件屬性的存取）

然後，取message：app.$data.message。

透過這個方法我們就可以取到實例中我們想要的屬性值。

Eg：

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

   

可以進行實例間的相互傳至。

2.2列表循環

我們不需要再像原生js一樣使用for()循環來渲染一個動態列表，

直接使用：v-for="item in items"來進行渲染。類似原生中for in的循環方法

rrreee

   

2.3事件綁定

在JQ中我們常用$().on('click',function(){});來點擊事件綁定);定。

在Vue中我們使用v-on:click="doSometing（'a','b'）";來綁定。
Eg：

有了這3點，就可以開始寫這個簡單的ToDoList了。