一、前言

最近開始學習輕量級的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：

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

3、綁定事件：Eg：

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

2.1 創建Vue實例

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

1 <div id="app">{{ message }}</div> 1 var app = new Vue({ 2 3 el: '#app', 4 5 data: { 6 7 message: 'Hello Vue!' 8 9 } 10 11 })

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

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

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

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

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

Eg：

1 vm = new Vue({ 2 3 el : 'test', 4 5 data : { 6 7 msg : ' app.$data.message ' 8 9 } 10 11 })

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

2.2列表循環

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

直接使用：v-for="item in items"來進行渲染。類似于原生中for in的循環方法 1 <div v-for="item in items"> 2 3 {{ item.text }} 4 5 </div>

2.3事件綁定

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

在Vue中我們使用v-on:click="doSometing（'a','b'）";來綁定。 Eg： 1 <button v-on:click="doThis"></button> 有了這3點，就可以開始編寫這個簡單的ToDoList了。

轉載于:https://www.cnblogs.com/GaoX/p/6118515.html

總結

以上是生活随笔為你收集整理的【JS】Vue.js实现简单的ToDoList（一）——前期准备的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。