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可以做的一些皮毛的小事情，在它的生态系统中有各种丰富的东西可以帮助构建、组织、发展前端应用，接下来我们继续学习。