初衷
本人前端小菜鳥一枚，之前對(duì)vue停留在了解的層面，最近在項(xiàng)目中用到vue，通過(guò)工作實(shí)踐陸陸續(xù)續(xù)掌握了一些vue的用法。所謂仰之彌高，鉆之彌堅(jiān)，越用越發(fā)現(xiàn)vue的魅力之大，同時(shí)也愈加認(rèn)識(shí)到自己知識(shí)體系的不完善性，因此決定，重新系統(tǒng)的學(xué)習(xí)一遍vue。目前的計(jì)劃為，先通讀官方文檔，然后構(gòu)建實(shí)戰(zhàn)應(yīng)用。此文章系列為的是分享一些學(xué)習(xí)感悟和總結(jié)，同時(shí)也希望借此能督促自己堅(jiān)持下去，也希望能夠和眾多行走在前端路上的初學(xué)者一起探討一起進(jìn)步！
正文
1.安裝
安裝vue，這個(gè)無(wú)需多說(shuō)
# 最新穩(wěn)定版
$ npm install vue
補(bǔ)充：vue-cli
這是官方提供的一個(gè)命令行工具，可以快速搭建現(xiàn)代化應(yīng)用，很方便。如果是從未接觸過(guò)vue的同學(xué)，建議先不要管這個(gè)。
# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
$ vue init webpack my-project
# 安裝依賴，走你
$cdmy-project
$ npm install
$ npm run dev
2.下面開(kāi)始探索vue的廣闊世界吧！
介紹vue
下面是官方文檔(中文)的說(shuō)明:
Vue.js（讀音 /vju?/, 類似于 view） 是一套構(gòu)建用戶界面的 漸進(jìn)式框架。與其他重量級(jí)框架不同的是，Vue 采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)。Vue 的核心庫(kù)只關(guān)注視圖層，并且非常容易學(xué)習(xí)，非常容易與其它庫(kù)或已有項(xiàng)目整合。另一方面，Vue 完全有能力驅(qū)動(dòng)采用單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)的復(fù)雜單頁(yè)應(yīng)用。
Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
估計(jì)對(duì)于有的初學(xué)者同學(xué)來(lái)說(shuō)，看到這個(gè)說(shuō)明就已經(jīng)懵了，不要緊，在后面的學(xué)習(xí)中會(huì)逐漸理解里面的每個(gè)概念。目前，只需知道兩點(diǎn)就夠了:
- vue很強(qiáng)大，基本能夠滿足你能想到的所有需求，你想不到的很多需要，它也能夠滿足。
- vue很簡(jiǎn)單易用，哪怕是前端初學(xué)者，也能很快的上手使用。
如果你堅(jiān)持學(xué)習(xí)并使用著vue，相信后面的日子里，你會(huì)對(duì)于這兩點(diǎn)的體會(huì)越來(lái)越深。
最簡(jiǎn)單的vue實(shí)例
下面這個(gè)是官方給出的一個(gè)vue入門實(shí)例
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
千萬(wàn)不要小看這個(gè)簡(jiǎn)簡(jiǎn)單單的實(shí)例，從這個(gè)實(shí)例里我們能理解到很多vue的理念和思想。
在我理解看來(lái)，或許更改把上面的代碼上下順序調(diào)過(guò)來(lái)，把js寫在前面，html寫在后面或許更能體現(xiàn)vue的思想。什么意思呢?這就回到了前面的官方說(shuō)明了。
vue的核心庫(kù)只關(guān)注圖層。
vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
你會(huì)發(fā)現(xiàn)vue對(duì)視圖上的數(shù)據(jù)使用不要更簡(jiǎn)單粗暴，如果你想往頁(yè)面里傳入數(shù)據(jù)，你需要做的，僅僅是在vue的data里定義一下就可以了，不需要再做任何其他的操作，視圖就能直接拿來(lái)用!我想，什么叫做只關(guān)注圖層，這就叫只關(guān)注圖層，它能讓你用難以想象的簡(jiǎn)單方式來(lái)實(shí)現(xiàn)頁(yè)面的數(shù)據(jù)綁定。
同時(shí)，這種綁定是動(dòng)態(tài)的，什么意思？就是只要你js中data里的message值發(fā)生變化，頁(yè)面也會(huì)自動(dòng)更新這個(gè)值，同樣不需要你做任何操作。
可能上面的說(shuō)法對(duì)一些人來(lái)說(shuō)還是有些抽象，沒(méi)關(guān)系，等到你真正應(yīng)用到了它，你就會(huì)感受到它的神奇之處。
條件與循環(huán)
有了vue，你可以直接在html里面寫循環(huán)和條件判斷。同樣這個(gè)只針對(duì)初學(xué)者同學(xué)，可能有一定angular基礎(chǔ)的同學(xué)對(duì)這個(gè)早已經(jīng)見(jiàn)怪不怪了。
下面是個(gè)條件判斷簡(jiǎn)單例子
<div id="app">
<p v-if="display">顯示</p>
</div>
var app = new Vue({
el: '#app',
data: {
display: true
}
})
如果data里的display為true，頁(yè)面上"顯示"兩個(gè)字就能顯現(xiàn)出來(lái)，如果display為false，頁(yè)面上則看不到"顯示"，相信不難理解。至于它是怎么實(shí)現(xiàn)這個(gè)效果的，暫時(shí)不在這里解釋。當(dāng)然有興趣的同學(xué)可以自己寫個(gè)簡(jiǎn)單案例試一試，很容易就能知道了。
下面是個(gè)循環(huán)的簡(jiǎn)單例子
<div id="app">
<ol>
<li v-for="student in students">
{{ student }}
</li>
</ol>
</div>
var app = new Vue({
el: '#app',
data: {
students: [
'小明',
'小華',
'小軍',
]
}
})
頁(yè)面上的效果是:
1.小明
2.小華
3.小軍
這個(gè)應(yīng)該也不難理解，不再多說(shuō)。
處理用戶輸入
vue里面用v-on綁定監(jiān)聽(tīng)事件，如下面的例子:
<div id="app">
<p>{{ student }}</p>
<button v-on:click="changeStudent">把小明改為小軍</button>
</div>
var app = new Vue({
el: '#app',
data: {
student: '小明'
},
methods: {
changeStudent: function () {
this.message = '小軍'
}
}
})
實(shí)例很簡(jiǎn)單，就不多說(shuō)了。出來(lái)的頁(yè)面效果是:
點(diǎn)擊一下按鈕，小明就會(huì)變成小軍。
Vue 也提供了 v-model 指令，它使得在表單輸入和應(yīng)用狀態(tài)中做雙向數(shù)據(jù)綁定變得非常輕巧。如下例子:
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app= new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
出來(lái)的頁(yè)面效果是:
你在輸入框輸入什么，頁(yè)面能夠?qū)崟r(shí)的顯示出來(lái)。它的原理可以解釋為這樣:
當(dāng)綁定v-model之后，vue就開(kāi)始監(jiān)聽(tīng)頁(yè)面上對(duì)應(yīng)輸入框的value的變化，一旦輸入框的value發(fā)生改變，vue就獲取這個(gè)value值，并把它賦值給data里的message，當(dāng)message發(fā)生變化的時(shí)候，頁(yè)面回自動(dòng)更新它所綁定的元素。
小結(jié)
vue的基礎(chǔ)介紹就是這么多，總結(jié)起來(lái)vue有如下特點(diǎn):
- 對(duì)視圖的處理十分強(qiáng)大，用戶只需要關(guān)注數(shù)據(jù)的運(yùn)算邏輯就可以，無(wú)需關(guān)注視圖層的變化，vue自會(huì)幫你處理好。
- 極大改善了視圖本身的數(shù)據(jù)處理方式，極大提高了含有多用戶交互頁(yè)面的編寫效率。
最后，如果你讀到了這里，謝謝你的閱讀，下面一句話共勉:
前端路漫漫，保持激情，保持年輕!
