<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- 模板 -> vue -> 真实的dom -->
<div id="app">
<h1>标题：商品管理系统</h1>
<ul>
<li v-for="(item, i) in products">
商品名称：{{item.name}}，商品库存:
<button @click="changeStock(item, item.stock - 1)">-</button>
{{item.stock?item.stock:'无货'}}
<button @click="changeStock(item, item.stock + 1)">+</button>
<button @click="remove(i)">删除</button>
</li>
</ul>
<p>总库存: {{total}}</p>
</div>
<script src="./vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
// 页面中要使用的数据
products: [
{ name: "iphone", stock: 10 },
{ name: "xiaomi", stock: 9 },
{ name: "huawei", stock: 8 },
],
},
computed: {
total() {
return this.products.reduce((a, b) => a + b.stock, 0);
},
},
methods: {
changeStock(product, newStock) {
if (newStock < 0) {
newStock = 0;
}
product.stock = newStock; // 数据变化
},
remove(index) {
this.products.splice(index, 1);
},
},
});
</script>
</body>
</html>
- el代表要替代的元素，vue可以表示整个界面，也可以表示界面的某一部分，所有会有这个el来表示那的问题，这个el后面“”可以是各种选择器选中的元素
- data 表示页面上要使用的数据，data对象里面的属性都会被直接提到vue对象上，也就是说前面的products数组是在vue对象上的。
-
这个就是vue代替的对象，在这个地方是写模版的，模版可以是纯HTML的语法，也可以使用vue提供的语法。比方说
<h1>标题：商品管理系统</h1> 这一句就是原始的html语句，下面我们继续分析下面几句
<li v-for="(item, i) in products">
商品名称：{{item.name}}，商品库存:
<button @click="changeStock(item, item.stock - 1)">-</button>
{{item.stock?item.stock:'无货'}}
<button @click="changeStock(item, item.stock + 1)">+</button>
<button @click="remove(i)">删除</button>
</li>
v-for是vue提供的一个指令，可以遍历data里面定义的数组对象，格式是v-for= "item in 数组" 或者可以像上面一样用 v-for= "(item, i) in 数组"，当然这里你可以把item，i写成其他名字。在定义v-for的标签内部你可以像参数一样使用item i product这些对象，可以使用这些对象的属性等。只不过这里要使用大胡子语法，即 {{表达式}}。
- vue里面添加事件不是用的onclick 这样的，而是用 @click=“表达式”
- vue里面的重要的思想是定义数据，定义模版，然后改变数据从而去达到改变界面的目的，从不直接操作dom元素，而是通过操作数据来达到的。这里的思想可以从下面这句看出来，我现在要想删除当前这一行的显示，我操作的是删除product里面当前的这一行数据，这个和iOS里面的model,view的关系很像。
<button @click="remove(i)">删除</button>
- 再来看remove这个方法，这些方法是定义在vue的 methods里面的，还可以定义其他需要使用的方法。
- 再看模版里面的其他功能
<p>总库存: {{total}}</p>,我们需要在一个数据发生变化时候要根据这些变化的数据再做一些计算的时候就用到计算属性。computed: {} 里面放的计算属性，写法仍然按照方法的写法去写的，不过在使用的时候，不要加括号，就像这里的total用法一样。
