0.为什么要学习Vue？
Hello，我是 Alex 007，一個(gè)熱愛(ài)計(jì)算機(jī)編程和硬件設(shè)計(jì)的小白，為啥是007呢？因?yàn)榻?Alex 的人太多了，再加上每天007的生活，Alex 007就誕生了。
0.為什么要學(xué)習(xí)Vue
這篇文章我們來(lái)講一講為什么要學(xué)習(xí)Vue
Vue是一個(gè)用于創(chuàng)建用戶(hù)界面的開(kāi)源JavaScript框架，也是一個(gè)創(chuàng)建單頁(yè)應(yīng)用的Web應(yīng)用框架。 在GitHub上，該項(xiàng)目平均每天能收獲95顆星，為Github有史以來(lái)星標(biāo)數(shù)第3多的項(xiàng)目。
0.為什么要學(xué)習(xí)Vue
在過(guò)去的十年時(shí)間里，我們的網(wǎng)頁(yè)變得更加動(dòng)態(tài)化和強(qiáng)大了，這都要?dú)w功于JavaScript這門(mén)腳本語(yǔ)言。
現(xiàn)在的Web應(yīng)用已經(jīng)把很多傳統(tǒng)的服務(wù)端代碼放到了瀏覽器中，這樣就產(chǎn)生了成千上萬(wàn)行的JavaScript代碼，它們連接了各式各樣的HTML和CSS代碼。
但是簡(jiǎn)單的連接缺乏正規(guī)的組織形式，變得凌亂不堪，這也是為什么越來(lái)越多的前端開(kāi)發(fā)者選擇使用JavaScript框架，諸如Angular、React和Vue。
Vue是一款友好的、多用途且高性能的JavaScript框架，它能幫你創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù)。
Vue是漸進(jìn)式的JavaScript框架，也就是說(shuō)，如果你已經(jīng)有一個(gè)現(xiàn)成的應(yīng)用，你可以將Vue作為該應(yīng)用的一部分嵌入其中，帶來(lái)更加豐富的交互體驗(yàn)。
或者如果你希望將更多業(yè)務(wù)邏輯放到前端來(lái)實(shí)現(xiàn)，那么Vue的核心組件及其生態(tài)系統(tǒng)也可以滿(mǎn)足你的各式需求。
Vue和其它前端框架一樣，允許你將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方。
接下來(lái)我們就親自動(dòng)手感受一下Vue，構(gòu)建一個(gè)商品庫(kù)存的頁(yè)面。
這不是教你怎么使用Vue，而是介紹一些核心概念，正是這些東西讓Vue如此實(shí)用。
我們從網(wǎng)頁(yè)中需要展示的數(shù)據(jù)開(kāi)始，使用Vue的起步非常簡(jiǎn)單，首先我們引入Vue庫(kù)：
<script src="https://unpkg.com/vue"></script>創(chuàng)建一個(gè)Vue實(shí)例，通過(guò)應(yīng)用的ID嵌入到我們的根元素中，將數(shù)據(jù)放入data對(duì)象中：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><div id="app"><h2>{{product}} are in stock.</h2></div><script src="https://unpkg.com/vue"></script><script type="text/javascript">const app = new Vue({el: '#app', // el是元素（Element）的縮寫(xiě)data: {product: 'Boots',},})</script></body> </html>這樣你就可以看到，它已經(jīng)工作起來(lái)了：
很酷，但是Vue的魔力在數(shù)據(jù)變更時(shí)才會(huì)出現(xiàn)。
打開(kāi)控制臺(tái)，改變product的值：
app.product = 'Socks';注意在product的值改變的同時(shí)，Vue自動(dòng)更新了我們的HTML：
這是因?yàn)閂ue是響應(yīng)式的，也就是說(shuō)當(dāng)我們的數(shù)據(jù)變更時(shí)，Vue會(huì)幫你更新所有網(wǎng)頁(yè)中用到它的地方。
除了字符串，Vue對(duì)其它類(lèi)型的數(shù)據(jù)也是如此。
我們把product改成一個(gè)商品數(shù)組，并將h2標(biāo)簽改成一個(gè)無(wú)序列表，使用Vue的v-for指令試試看：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><div id="app"><ul><li v-for="product in products">{{product}}</li></ul></div><script src="https://unpkg.com/vue"></script><script type="text/javascript">const app = new Vue({el: '#app', // el是元素（Element）的縮寫(xiě)data: {products: ['Boots','Jacket','Socks'],},})</script></body> </html>這樣你就會(huì)看到：
不過(guò)這還不夠有說(shuō)服力，現(xiàn)在我們用更加復(fù)雜的數(shù)據(jù)來(lái)演示：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><div id="app"><ul><li v-for="product in products">{{product.quantity}} {{product.name}}</li></ul></div><script src="https://unpkg.com/vue"></script><script type="text/javascript">const app = new Vue({el: '#app', // el是元素（Element）的縮寫(xiě)data: {products: [{'id': 1, 'quantity': 1, 'name': 'Compass'},{'id': 2, 'quantity': 0, 'name': 'Jack'},{'id': 3, 'quantity': 5, 'name': 'Hiking Socks'},{'id': 4, 'quantity': 2, 'name': 'Suntan Lotion'},],},})</script></body> </html>
這里需要留意一下數(shù)量為0的商品，我們添加一個(gè)span標(biāo)簽來(lái)對(duì)數(shù)量為0的商品做說(shuō)明，這就需要用到v-if指令：
如果我們想要顯示列表中商品的總數(shù)該怎么辦呢？我們需要?jiǎng)?chuàng)建一個(gè)名為totalProducts的計(jì)算屬性：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><div id="app"><ul><li v-for="product in products">{{product.quantity}} {{product.name}}<span v-if="product.quantity === 0">- OUT OF STOCK!</span></li></ul><h3>Total Inventory: {{totalProducts}}</h3></div><script src="https://unpkg.com/vue"></script><script type="text/javascript">const app = new Vue({el: '#app', // el是元素（Element）的縮寫(xiě)data: {products: [{'id': 1, 'quantity': 1, 'name': 'Compass'},{'id': 2, 'quantity': 0, 'name': 'Jack'},{'id': 3, 'quantity': 5, 'name': 'Hiking Socks'},{'id': 4, 'quantity': 2, 'name': 'Suntan Lotion'},],},computed:{totalProducts(){return this.products.reduce((sum, product) => {return sum + product.quantity;}, 0);}}})</script></body> </html>為了好玩，現(xiàn)在我們?cè)诿钚兄邪蓴?shù)組中的最后一個(gè)元素pop出來(lái)：
app.products.pop()可以看到，不僅我們的列表同步更新了，連我們的商品總數(shù)也如我們所預(yù)期的同步更新了：
接下來(lái)，讓我們?cè)陧?yè)面中通過(guò)button來(lái)添加一些交互行為，我們?yōu)槊恳粋€(gè)商品創(chuàng)建一個(gè)增加按鈕，點(diǎn)擊時(shí)對(duì)應(yīng)的商品數(shù)量就加一：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><div id="app"><ul><li v-for="product in products">{{product.quantity}} {{product.name}}<span v-if="product.quantity === 0">- OUT OF STOCK!</span><button @click="product.quantity += 1">Add</button></li></ul><h3>Total Inventory: {{totalProducts}}</h3></div><script src="https://unpkg.com/vue"></script><script type="text/javascript">const app = new Vue({el: '#app', // el是元素（Element）的縮寫(xiě)data: {products: [{'id': 1, 'quantity': 1, 'name': 'Compass'},{'id': 2, 'quantity': 0, 'name': 'Jack'},{'id': 3, 'quantity': 5, 'name': 'Hiking Socks'},{'id': 4, 'quantity': 2, 'name': 'Suntan Lotion'},],},computed:{totalProducts(){return this.products.reduce((sum, product) => {return sum + product.quantity;}, 0);}}})</script></body> </html>當(dāng)我們點(diǎn)擊Jacket的Add時(shí)，不只是更新整個(gè)庫(kù)存，同時(shí)增加對(duì)應(yīng)商品的數(shù)量：
如果我們要大幅度更新商品的數(shù)量，單獨(dú)通過(guò)點(diǎn)擊按鈕就太麻煩了，所以我們可以創(chuàng)建一個(gè)可輸入的文本框，通過(guò)v-model指令綁定商品的數(shù)量：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><div id="app"><ul><li v-for="product in products"><input type="number" v-model="product.quantity">{{product.name}}<span v-if="product.quantity === 0">- OUT OF STOCK!</span><button @click="product.quantity += 1">Add</button></li></ul><h3>Total Inventory: {{totalProducts}}</h3></div><script src="https://unpkg.com/vue"></script><script type="text/javascript">const app = new Vue({el: '#app', // el是元素（Element）的縮寫(xiě)data: {products: [{'id': 1, 'quantity': 1, 'name': 'Compass'},{'id': 2, 'quantity': 0, 'name': 'Jacket'},{'id': 3, 'quantity': 5, 'name': 'Hiking Socks'},{'id': 4, 'quantity': 2, 'name': 'Suntan Lotion'},],},computed:{totalProducts(){return this.products.reduce((sum, product) => {return sum + parseInt(product.quantity);}, 0);}}})</script></body> </html>
好了，Vue的簡(jiǎn)單演示就到這里。
如果我們要構(gòu)建一個(gè)大型的應(yīng)用，需要將東西分割成為各自的組件和文件。
Vue提供了一個(gè)命令行工具，可以快速初始化一個(gè)Vue項(xiàng)目。
我們也可以使用Vue的單文件組件，它包含了各自的HTML，JavaScript以及帶作用域的CSS或SCSS。
好了，Vue的已經(jīng)簡(jiǎn)單講完了，你現(xiàn)在看到的僅僅是Vue可以做的一些皮毛的小事情，在它的生態(tài)系統(tǒng)中有各種豐富的東西可以幫助構(gòu)建、組織、發(fā)展前端應(yīng)用，接下來(lái)我們繼續(xù)學(xué)習(xí)。
總結(jié)
以上是生活随笔為你收集整理的0.为什么要学习Vue？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 215. Kth Largest Ele
- 下一篇： 1.Vue 安装与简单使用