第一个vue应用-商品管理系统

讲解实例：商品管理系统

<div id="app">
    <h1>商品管理系统</h1>
    <ul>
        <li v-for="(item,index) 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(index)">删除</button>
        </li>
    </ul>
    <p>总库存：{{total}}</p>
</div>

const vm = new Vue({
    el: "#app",
    data: {
        products: [
            { name: "iphone", stock: 10 },
            { name: "xiaomi", stock: 9 },
            { name: "huawei", stock: 8 },
        ],
    },
    computed: {
        // 总库存
        total() {
            let totalStock = 0;
            this.products.forEach(element => {
                totalStock += element.stock
            });
            return totalStock;
        },
    },
    methods: {
        // 改变库存
        changeStock(product, newStock) {
            // 传入当前商品和新库存
            if(newStock < 0){
                newStock = 0;
            }
            product.stock = newStock;
        },

        // 删除商品
        remove(index) {
            // 传入商品的索引
            this.products.splice(index,1);
        },
    },
});

配置项

el

el:'#app' vue可以只控制页面的一个小区域，虽然我们经常控制整个页面。

data

data:{} 可以配置为对象，表示页面中要使用的数据。

当用vue去控制一个元素（例如：#app）时，这个元素的所有东西变成了vue模版。模版是不会显示到页面上的，虽然好像在页面上显示出来了，是因为经过了转换，最后变成了html才显示出来的。

所以，我们要有一个基本概念：模版会交给vue，vue会把它转换成真实的dom元素。

那么，模版里面能写什么呢？即，<div id="#app"></div>里能写什么呢？ 可以在元素内容里面使用特殊的语法：mustach（大胡子语法） {{js表达式}}，js表达式读取的是vue实例里能用的东西（比如：data数据）。那么，把数据替换掉模版里的值有什么意义呢？当把模版里的值变成vue的数据时有一个特点：数据是可以变化的，当数据变化时，模版会重新生成，会自动把模版重新渲染成真实的dom。

数据响应式：数据变化重新渲染模版

给按钮注册事件：@事件名="js代码"， 比如：@click="item.stock--"

methods

methods:{} js表达式不宜写太多，为了做更多的事，我们可以写一些方法。配置项里加个methods对象，对象里面可以写很多方法。

computed

computed:{} 计算属性：代表里面的东西是根据数据算出来的。对象里面可以写很多方法。

如何使用计算属性？

1. 在computed定义的方法里return 需要的数据

   computed: {
       // 总库存
       total() {
           let totalStock = 0;
           this.products.forEach(element => {
               totalStock += element.stock
           });
           return totalStock;
       },
   },
   

2. 在页面里把computed里定义的方法当vue的数据使用

   <p>总库存：{{total}}</p>
   

计算属性和方法里的this都指向vue实例，即vm。

删除数据，页面重新渲染，计算属性重新计算。