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可以做的一些皮毛的小事情,在它的生態系統中有各種豐富的東西可以幫助構建、組織、發展前端應用,接下來我們繼續學習。