Hello，我是 Alex 007，一個熱愛計算機編程和硬件設計的小白，爲啥是007呢？因爲叫 Alex 的人太多了，再加上每天007的生活，Alex 007就誕生了。
這篇文章我們來講一講爲什麼要學習Vue
Vue是一個用於創建用戶界面的開源JavaScript框架，也是一個創建單頁應用的Web應用框架。 在GitHub上，該項目平均每天能收穫95顆星，爲Github有史以來星標數第3多的項目。
在過去的十年時間裏，我們的網頁變得更加動態化和強大了，這都要歸功於JavaScript這門腳本語言。
現在的Web應用已經把很多傳統的服務端代碼放到了瀏覽器中，這樣就產生了成千上萬行的JavaScript代碼，它們連接了各式各樣的HTML和CSS代碼。
但是簡單的連接缺乏正規的組織形式，變得凌亂不堪，這也是爲什麼越來越多的前端開發者選擇使用JavaScript框架，諸如Angular、React和Vue。
Vue是一款友好的、多用途且高性能的JavaScript框架，它能幫你創建可維護性和可測試性更強的代碼庫。
Vue是漸進式的JavaScript框架，也就是說，如果你已經有一個現成的應用，你可以將Vue作爲該應用的一部分嵌入其中，帶來更加豐富的交互體驗。
或者如果你希望將更多業務邏輯放到前端來實現，那麼Vue的核心組件及其生態系統也可以滿足你的各式需求。
Vue和其它前端框架一樣，允許你將一個網頁分割成可複用的組件，每個組件都包含屬於自己的HTML、CSS、JavaScript以用來渲染網頁中相應的地方。
接下來我們就親自動手感受一下Vue，構建一個商品庫存的頁面。
這不是教你怎麼使用Vue，而是介紹一些核心概念，正是這些東西讓Vue如此實用。
我們從網頁中需要展示的數據開始，使用Vue的起步非常簡單，首先我們引入Vue庫：
<script src="https://unpkg.com/vue"></script>
創建一個Vue實例，通過應用的ID嵌入到我們的根元素中，將數據放入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>
這樣你就可以看到，它已經工作起來了：
很酷，但是Vue的魔力在數據變更時纔會出現。
打開控制檯，改變product的值：
app.product = 'Socks';
注意在product的值改變的同時，Vue自動更新了我們的HTML：
這是因爲Vue是響應式的，也就是說當我們的數據變更時，Vue會幫你更新所有網頁中用到它的地方。
除了字符串，Vue對其它類型的數據也是如此。
我們把product改成一個商品數組，並將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>
這樣你就會看到：
不過這還不夠有說服力，現在我們用更加複雜的數據來演示：
<!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>
這裏需要留意一下數量爲0的商品，我們添加一個span標籤來對數量爲0的商品做說明，這就需要用到v-if指令：
<!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>
</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>
如果我們想要顯示列表中商品的總數該怎麼辦呢？我們需要創建一個名爲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>
爲了好玩，現在我們在命令行中吧數組中的最後一個元素pop出來：
app.products.pop()
可以看到，不僅我們的列表同步更新了，連我們的商品總數也如我們所預期的同步更新了：
接下來，讓我們在頁面中通過button來添加一些交互行爲，我們爲每一個商品創建一個增加按鈕，點擊時對應的商品數量就加一：
<!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時，不只是更新整個庫存，同時增加對應商品的數量：
如果我們要大幅度更新商品的數量，單獨通過點擊按鈕就太麻煩了，所以我們可以創建一個可輸入的文本框，通過v-model指令綁定商品的數量：
<!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的已經簡單講完了，你現在看到的僅僅是Vue可以做的一些皮毛的小事情，在它的生態系統中有各種豐富的東西可以幫助構建、組織、發展前端應用，接下來我們繼續學習。