一、前言
最近開始學習輕量級的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:click="toogleFinishi(item,index)"；
2.1 創建Vue實例
在官網中使用了如下的方法來創建一個實例
<div id="app">{{ message }}</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
在這裡，這個app這個變量就是我們使用構造函數new Vue()構造的一個實例，它是一個對象。那麼我們對這個實例的操作就可以看為是對一個對象進行操作。
我們現在來取一下app的message值。
首先，取data：app.$data。（Vue 實例觀察的數據對象。Vue 實例代理了對其 data 對象屬性的訪問）
然後，取message：app.$data.message。
通過這個方法我們就可以取到實例中我們想要的屬性值。
Eg：
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'）";來綁定。
Eg：
<button v-on:click="doThis"></button>
有了這3點，就可以開始編寫這個簡單的ToDoList了。
本文已被整理到了《Vue.js前端組件學習教程》，歡迎大家學習閱讀。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。