Vue.js實現簡單ToDoList 前期準備（一）

這篇文章主要介紹了Vue.js實現簡單ToDoList的前期準備,具備必定的參考價值，感興趣的小夥伴們能夠參考一下

1、前言

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

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

廢話多了，如今進入正文

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

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

一、建立Vue實例：Eg：

var vm=new Vue();

二、列表渲染：Eg：

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

三、綁定事件：Eg：

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

2.1 建立Vue實例

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

?

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

?

1 2 3 4 5 6 7 8 9 10 11

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：

?

1 2 3 4 5 6

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

能夠進行實例間的相互傳至。

2.2列表循環

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

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

?

1 2 3 4 5

<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前端組件學習教程》，歡迎你們學習閱讀。

以上就是本文的所有內容，但願對你們的學習有所幫助，也但願你們多多支持。