【Vue.JS】Vue.js 基本数据绑定 & 过滤器 & 计算属性 & 方法 & 购物车自动汇总总价的Demo

本文链接：https://blog.csdn.net/shaotaiban1097/article/details/90606440

Demo最终效果图

Vue 基本使用

基本的数据绑定
- {{}} 插值表达式绑定数据。这种情况返回输出的是纯字符串。
基本指令运用
- v-bind 绑定某一属性。如 v-bind:src=“http://…”
- v-on
- v-if
- v-html 如果想输出 HTML 文档
- v-pre 跳过当前元素和它子元素的编译过程。
- : 是 v-bind 的语法糖。v-bind:src="" 等价于 :src=""
- @ 是 v-on 的语法糖。v-on:click=“btnfunction()” 等价于 @click=“btnFunction()”
插值过滤器
- 通常用户格式化文本：{{date | filtersA}}
- 过滤器可以连接多个：{{date | filtersA | filterB}}
- 过滤器可以传参：{{date | formatDate(arg1, arg2)}}。但是接收参数时注意，第一个参数为数据本身，后面的参数依次为手动传入的参数。
计算属性 & 方法
- 相同点
  1. 二者的目的都是处理数据
  2. 二者内部的代码写法基本一样
- 不同点
  1. 调用方式不同
    + 调用方法时需要加小括号()，括号内可以传参，如果不加，也不会报错，但返回的是方法本身，而并非值。
  2. 队列缓存机制
    + 计算属性有自己的缓存机制，当计算属性依赖的数据发生变化时，才会重新取值，所以只要 text 不变，计算属性的值就不更新
    + 方法只要重新渲染DOM，就会被调用执行。
    + ★ 当处理大数据量时建议使用计算属性，因为缓存机制可以节省很多不必要的调用，除非业务需求不需要缓存。
  3. get & set
    + 方法没有 get & set 方法
    + 计算属性包含 get 和 set 方法。默认的用法只是利用 get 来读取。如果需要时，可以手动设置 set 方法。

代码

CSS 部分（对table表格和button按钮略微调整）

<style>
    table {
        border-collapse: collapse;
        border-width: 1;
        font-size: 11px;
        color: #333;
        border-color: #666;
    }
    th,
    td {
        border-style: solid;
        border-width: 1px;
        padding: 8px;
        border-color: #666;
        text-align: center;
        width: 137px;
        height: 16px;
    }
    th {
        background-color: #5f5f5f;
    }
    td {
        background-color: #e9e9e9;
    }
    table button {
        width: 12px;
        height: 12px;
        border-width: 0px;
        border-radius: 50%;
        background: #1E90FF;
        cursor: pointer;
        color: white;
        font-size: 4px;
        margin: 0 auto;
    }
    table button:hover {
        background: #5599FF;
    }
    table button span {
        line-height: 12px;
    }
</style>

HTML 部分

<div id="app">
    <!-- 插值表达式绑定数据 -->
    <p>{{text}}</p>
    <!-- v-html 输出 HTML 文档 -->
    <span v-html="link"></span>
    <!-- 跳过当前元素和它子元素的编译过程 -->
    <hr>
    <!-- v-if 绑定，其绑定的是一个 bool 类型 -->
    <p v-if='isShow'>Show Message ？</p>
    <!-- click 事件的两种绑定方式 -->
    <button v-on:click="btn_click">Click here</button>
    <button @click="isShow = !isShow">Or Click here</button>
    <hr>
    <p v-pre>{{text}}}</p>
    <!-- 调用计算属性 -->
    <p>{{reversedText2}}</p>
    <!-- 调用方法 -->
    <p>{{reversedText1()}}</p>
    <hr>
    <div style="width:770px">
        <table>
            <!-- 当前时间：使用 mounted 钩子事件监听，每秒钟更新一次，使用过滤器进行格式化 -->
            <caption>当前时间 ： {{date | formatDate}}</caption>
            <thead>
                <tr>
                    <td>No</td>
                    <td>goodsName</td>
                    <td>price</td>
                    <td>count</td>
                    <td>totalPrice</td>
                </tr>
            </thead>
            <!-- 使用 v-for 绑定数组对象，循环列表 -->
            <tbody v-for="(item, index) in demoArray">
                <tr>
                    <td>{{index}}</td>
                    <td>{{item.goodsName}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <!-- 绑定 click 事件，点击按钮时触发，改变监控的值，其它监控的值随之改变 -->
                        <!-- 使用 disabled 绑定，当 count 数量小于 0 时让其不可点击 -->
                        <button @click="reduce(index)" :disabled="item.count <= 0"><span>-</span>
                        </button>
                        {{item.count}}
                        <button @click="add(index)"><span>+</span>
                        </button>
                    </td>
                    <td>{{item.price * item.count}}</td>
                </tr>
            </tbody>
        </table>
        <!-- 使用计算属性绑定总和 -->
        <p style="float:right">总计：{{totalPrice}}</p>
    </div>
</div>

JS 部分

<script>
    /*定义一个方法，用来格式化日期输出，小于10时前面加0。如 01, 02 */
    var pDate = function (value) {
        return value < 10 ? '0' + value : value;
    }
    /*初始化 Vue 实例*/
    var app = new Vue({
        el: '#app',
        data: {
            text: '3.141.592.653.589.793.626.4',
            link: '<a href="./index.html">返回首页</a>',
            isShow: true,
            date: new Date(),
            //来个数组演示一下计算属性
            demoArray: [{
                goodsName: 'computer',
                price: 8000,
                count: 7
            }, {
                goodsName: 'LCD',
                price: 2310,
                count: 12
            }, {
                goodsName: 'Phone',
                price: 4300,
                count: 6
            }]
        },
        /*方法*/
        methods: {
            /*这里面函数的 this 是指向 Vue 实例本身的*/
            btn_click: function () {
                /*这里会发现一个奇怪的问题。 */
                /*isShow 的值改变在 alert 的前面，但实际页面中确是先弹窗后隐藏 DOM 节点*/
                /*这是因为 vue 监测数据变化时的队列缓存。具体可以参照 nextTick */
                this.isShow = !this.isShow;
                alert('onclick');
                /*这里面的方法也可以相互调用，因为都是 vue 实例下的方法，所以使用 this 来调用*/
                this.showMessageBox();
            },
            //弹窗
            showMessageBox: function () {
                alert('messageBox');
            },
            //反转输出文本
            reversedText1: function () {
                //为了区分计算属性。这里使用斜线 / 来 join
                return this.text.split('.').reverse().join('/');
            },
            /*商品数量 - 1*/
            reduce: function (index) {
                this.demoArray[index].count = this.demoArray[index].count - 1;
            },
            /*商品数量 + 1*/
            add: function (index) {
                this.demoArray[index].count = this.demoArray[index].count + 1;
            }
        },
        /*计算属性*/
        computed: {
            reversedText2: function () {
                //为了区分方法。这里使用逗号 , 来 join
                return this.text.split('.').reverse().join(',');
            },
            /*默认的写法是利用 get 读取数据。如果需要指定写入数据时的操作，需要指定 set 方法*/
            // totalPrice: function () {
            //     var total = 0;
            //     this.demoArray.forEach(item => {

            //         total += item.price * item.count;
            //     });
            //     //console.log(total);
            //     return total;
            // },
            totalPrice: {
                //读取数据时触发
                get: function () {
                    var total = 0;
                    this.demoArray.forEach(item => {

                        total += item.price * item.count;
                    });
                    return total;
                },
                //写入数据时触发
                set: function () {

                }
            }
        },
        /*过滤器*/
        filters: {
            formatDate: function (value) {
                var date = new Date(value);
                var year = date.getFullYear();
                var month = pDate(date.getMonth() + 1);
                var day = pDate(date.getDate());
                var hour = pDate(date.getHours());
                var miniutes = pDate(date.getMinutes());
                var seconds = pDate(date.getSeconds());
                return year + '-' + month + '-' + day + ' ' + hour + ':' + miniutes + ':' + seconds;
            }
        },
        /*常见钩子函数*/
        // 实例初始化之前
        beforeCreate: function () {
            console.log("实例初始化之前");
        },
        // 实例创建完成
        created: function () {
            console.log("实例创建完成");
        },
        // 实例挂载之前
        beforeMount: function () {
            console.log("实例挂载之前");
        },
        // el 被创建的 vm.$el 替换并挂载到实例上之后
        mounted: function () {
            console.log("实例挂载之后");
            /*开启计时器，每秒修改一次 date 数据*/
            var _this = this; //指向 Vue 实例
            this.timer = setInterval(function () {
                _this.date = new Date(); //每隔1秒，修改一次 date 的数据
            }, 1000)
        },
        // 数据更新，DOM 重新渲染之前
        beforeUpdate: function () {
            console.log("数据更新 DOM 重新渲染之前");
        },
        // 数据更新，DOM 重新渲染之后
        updated: function () {
            console.log("数据更新 DOM 重新渲染之后");
        },
        // 实例销毁之前
        beforeDestroy: function () {
            console.log("实例销毁之前");

            /*清空定时器*/
            if (this.timer) {
                clearInterval(this.timer);
            }
        },
        // 实例销毁之后
        destroyed: function () {
            console.log("实例销毁之后");
        },
    });
</script>