Vue2案例-侦听器购物车...

想使用vue首先要引入

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

vue 分为开发版本和生产版本  

在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!

开发版本：包含完整的警告和调试模式

生产版本：删除了警告

案例：侦听购物车

css模块

html模块

        

            

                
勾选状态
                
名称
                
数量
                
价格
                
小计
                
操作
            
            
            

                
数量：{{tNum}}
                
总价：{{tMoney}}
            
        
    

vue模块  

const vm = new Vue({
            el: '#app',
            data: {
                tNum: 0,
                tMoney: 0,
                arr: [{
                    id: 1,
                    name: "手表",
                    num: 1,
                    price: 20
                }, {
                    id: 2,
                    name: "鞋子",
                    num: 2,
                    price: 50
                }, {
                    id: 3,
                    name: "羽绒服",
                    num: 1,
                    price: 90
                }, {
                    id: 4,
                    name: "棉裤",
                    num: 1,
                    price: 10
                }, {
                    id: 5,
                    name: "秋裤",
                    num: 1,
                    price: 5
                }, {
                    id: 6,
                    name: "电风扇",
                    num: 1,
                    price: 30
                }]
            },
            // 创建vue后添加input选中状态
            created() {
                this.arr.forEach(item => {
                    this.$set(item, 'check', false);
                });
            },
            // 事件处理
            methods: {
                jian(item) {
                    item.num--;
                    if (item.num < 1) {
                        item.num = 1;
                        alert('商品数量不能低于1');
                    }
                },
                del(i) {
                    this.arr.splice(i, 1);
                }
            },
            // 监听arr数据是否有变化
            watch: {
                arr: {
                    deep: true, // 深监听
                    handler(nv) {
                        let n = 0; // 总数量
                        let m = 0; // 总价格
                        nv.forEach(item => {
                            if (item.num < 1) {
                                item.num = 1;
                                alert('商品数量不能低于1');
                            }
                            if (item.check) {
                                n += item.num;
                                m += item.price * item.num;
                            }
                        });
                        this.tNum = n;
                        this.tMoney = m;
                    }
                }
            }
        });

侦听器购物车是一个非很典型的案例，如果能够独立有思维的写出来这个案例，那么就说明你已经很好的把原生js与vue区分开来，并对vue有一个新的认知和理解。