一、前言

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

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

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

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

在這個(gè)todolist當(dāng)中，一共需要的Vue.js點(diǎn)有:

1、創(chuàng)建Vue實(shí)例：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實(shí)例

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

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

var app = new Vue({

 el: '#app',

 data: {

 message: 'Hello Vue!'

 }

})

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

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

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

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

通過這個(gè)方法我們就可以取到實(shí)例中我們想要的屬性值。

Eg：

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

可以進(jìn)行實(shí)例間的相互傳至。

2.2列表循環(huán)

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

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

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

2.3事件綁定

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

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

有了這3點(diǎn)，就可以開始編寫這個(gè)簡單的ToDoList了。

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論