一、前言

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

二、開篇
mvvm框架是前端現(xiàn)在比較熱門的話題，去拉勾網(wǎng)上轉(zhuǎn)一圈，基本70%都有要求。所以不說(shuō)虛的，只是為了多掙點(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)中使用了如下的方法來(lái)創(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è)對(duì)象。那么我們對(duì)這個(gè)實(shí)例的操作就可以看為是對(duì)一個(gè)對(duì)象進(jìn)行操作。

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

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

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

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

Eg：

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

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

2.2列表循環(huán)

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

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

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

2.3事件綁定

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

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

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

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

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

最新評(píng)論