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