一、前言

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

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

廢話多了，現(xiàn)在進入正文

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

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

1、創(chuàng)建Vue實例：Eg：

var vm=new Vue();

2、列表渲染：Eg：

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

3、綁定事件：Eg：

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

2.1 創(chuàng)建Vue實例

在官網(wǎng)中使用了如下的方法來創(chuàng)建一個實例

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

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

在這里，這個app這個變量就是我們使用構造函數(shù)new Vue()構造的一個實例，它是一個對象。那么我們對這個實例的操作就可以看為是對一個對象進行操作。

我們現(xiàn)在來取一下app的message值。

首先，取data：app.$data。（Vue 實例觀察的數(shù)據(jù)對象。Vue 實例代理了對其 data 對象屬性的訪問）

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

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

Eg：

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

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

2.2列表循環(huán)

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

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

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

2.3事件綁定

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

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

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

本文已被整理到了《Vue.js前端組件學習教程》，歡迎大家學習閱讀。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。