Vue语法--完成购物车案例-阿里云开发者社区

一、模版语法

1.1 插值

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。vue将模板编译成虚拟dom，结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

html模板语法: 这是一种基于字符串的模板技术,以字符串和数据为输入,通过用正则表达式将占位符替换为所需数据的方式,构建出完整的 HTML 字符串。

1.1.1 文本

直接使用{{xxx}}的形式，标签将会被替换成为数据对象（data）上xxx属性值，当绑定的数据对象上的xxx属性值发生变化时，插值处的值也会发生变化（双向绑定）

<div id="app">

{{msg}}

</div>

1.1.2 html解析

如果要输出html格式的数据，需要使用v-html指令。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>html解析</title>
    <!-- 1.导入工具 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  </head>
  <body>
    <!-- 2.定义边界 -->
    <div id="app">
      <div v-html="htmlstr"></div>
    </div>
    <!-- 3.构建vue实例并绑定边界 -->
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            htmlstr: '<h3 style="color:red;">这是一个html片段</h3>'
          }
        }
      })
    </script>
  </body>
</html>

1.1.3 属性

HTML属性中的值应使用v-bind指令。类型与jQuery中的$("#xxx").attr(Name，Val)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>html解析</title>
    <!-- 1.导入工具 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
      .red{
        font-size: 30px;
        color: red;
      }
    </style>
  </head>
  <body>
    <!-- 2.定义边界 -->
    <div id="app">
      <p v-bind:class="hontColor">哈哈</p>
    </div>
    <!-- 3.构建vue实例并绑定边界 -->
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            hontColor:"red"
          }
        }
      })
    </script>
  </body>
</html>

1.1.4 表达式

Vue提供了完全的JavaScript表达式支持:

{{str.substr(0,3)}}

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>

这些就不一一演示了，大家自己去玩

1.2.3 动态参数

注意：在动态参数中，作为参数的变量名（如：attrname）要全部小写，否则无效！！

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>动态参数</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  </head>
  <body>
    <!-- 定义边界 -->
    <div id="app">
      <p>动态参数</p>
      <input v-model="evname" />
      <button v-on:[evname]="handle">动态参数</button>
    </div>
  </body>
  <script type="text/javascript">
    new Vue({
      el: '#app',
      data() {
        return {
          evname:'dblclick'
          }
            },
          methods: {
            handle() {
              alert("触发事件");
            }
          }
        })
  </script>
</html>

Vue为v-bind和v-on这两个最常用的指令，提供了特定简写

指令	简写	示例
v-bind:xxx	:xxx	v-bind:href 简写为 :href
v-on:xxx	@xxx	v-on:click 简写为 @click

二、过滤器

vue允许自定义过滤器，一般用于常见的文本格式化，过滤器可用的两个地方：双花括号插值与v-bind表达式，过滤器应该被添加在js表达式的尾部，使用管道运算符 " | "

2.1 局部过滤器

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>过滤器</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  </head>
  <body>
    <!-- 定义边界 -->
    <div id="app">
            {{msg}}<br />
      {{msg|single}}<br />
      {{msg|param(9,10)}}
    </div>
    <script type="text/javascript">
      // 绑定边界 ES6具体体现
      new Vue({
        el: '#app',
        data() {
          return {
            msg: "bui快离开~bu坤快离开~"
          };
        },
        filters: {
          'single': function(val) {
            return val.substring(2, 3);
          },
          'param': function(val, start, end) {
            return val.substring(start, end);
          }
        }
      })
    </script>
  </body>
</html>

2.2 全局过滤器

时间转换案例：

//给Date类添加了一个新的实例方法format
Date.prototype.format = function (fmt) {
  //debugger;
    var o = {
        "M+": this.getMonth() + 1,                 //月份
        "d+": this.getDate(),                    //日
        "h+": this.getHours(),                   //小时
        "m+": this.getMinutes(),                 //分
        "s+": this.getSeconds(),                 //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds()             //毫秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
};
function fmtDate(date, pattern) {
  var ts = date.getTime();
    var d = new Date(ts).format("yyyy-MM-dd hh:mm:ss");
    if (pattern) {
        d = new Date(ts).format(pattern);
    }
    return d.toLocaleString();
};

拷入date.js（日期格式化）放入项目js目录中，在页面中引入。

定义全局过滤器

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>过滤器</title>
    <script src="data.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  </head>
  <body>
    <!-- 定义边界 -->
    <div id="app">
      <p>{{date | fmtDate}}</p>
      无过滤器:<br />
      {{date}}
    </div>
    <script type="text/javascript">
      // 全局过滤器
      Vue.filter('fmtDate', function(value) {
        return fmtDate(value, 'yyyy年MM月dd日')
      });
      // 绑定边界 ES6具体体现
      new Vue({
        el: '#app',
        data() {
          return {
            date: new Date()
          };
        }
      })
    </script>
  </body>
</html>

三、监听器

监听属性 watch，我们可以通过 watch 来响应数据的变化

语法：watch:{}

示例：米和厘米的单位换算

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>计算属性</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  </head>
  <body>
    <!-- 定义边界 -->
    <div id="app">
      <p>监听属性</p>
      米：<input v-model="m" />
      厘米：<input v-model="cm" />
    </div>
  </body>
  <script type="text/javascript">
    // 绑定边界 ES6具体体现
    new Vue({
      el: '#app',
      data() {
        return {
          m: 2,
          cm: 200
        };
      },
      watch: {
        m: function(v) {
          this.cm = parseInt(v) * 100;
        },
        cm: function(v) {
          this.m = parseInt(v) / 100;
        }
      }
    })
  </script>
</html>

四、完整购物车案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ShopCar</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim"
        crossorigin="anonymous"></script>
</head>
<body>
    <h1 style="text-align: center;">东天帝商城</h1>
    <hr>
    <br>
    <br>
    <table id="ShopCarTable" class="table table-light" style="border-radius: 50%; width: 80%; margin: auto;">
        <tr class="table-info">
            <td>
                <!-- 全选框 -->
                <input type="checkbox" v-model="checkAllStatus" @change="toggleCheckAll">
            </td>
            <td>商品名称</td>
            <td>商品价格</td>
            <td>商品数量</td>
            <td>商品总价</td>
        </tr>
        <!-- 循环渲染商品列表 -->
        <tr v-for="(good, index) in goods" :key="index">
            <td>
                <!-- 商品选择框 -->
                <input type="checkbox" v-model="good.isChecked" @change="update">
            </td>
            <td>{{ good.name }}</td>
            <td>{{ good.price }}</td>
            <td>
                <!-- 商品数量输入框 -->
                <input type="number" v-model="good.number" @input="sum">
            </td>
            <td>{{ good.number * good.price }}</td>
        </tr>
        <tr>
            <td colspan="5" style="text-align: right;">
                <!-- 总价 -->
                总价：{{ totalPrice }}
            </td>
        </tr>
    </table>
    <script>
        new Vue({
            el: "#ShopCarTable",
            data() {
                return {
                    goods: [
                        { name: '皮带', price: 10, isChecked: false, number: 1 }, // 商品对象，包含名称、价格、选中状态和数量
                        { name: '皮鞭', price: 20, isChecked: false, number: 1 },
                        { name: '皮椅', price: 30, isChecked: false, number: 1 }
                    ],
                    checkAllStatus: false, // 全选状态，默认为未选中
                    totalPrice: 0 // 总价，默认为0
                }
            },
            methods: {
                toggleCheckAll() {
                    // 切换全选状态以及更新商品列表中每个商品的选中状态
                    this.goods.forEach(item => {
                        item.isChecked = this.checkAllStatus;
                    });
                    this.sum(); // 更新总价
                },
                update() {
                    // 更新全选状态
                    //  every方法会遍历goods数组中的每个元素，对于每个元素，会执行回调函数。回调函数中的item表示当前遍历到的元素。如果所有元素都满足回调函数中的条件，即item.isChecked为true，则every方法的返回值为true，否则返回值为false。
                    // 这里的目的是检查是否所有的商品都被选中（isChecked为true），如果是，则将checkAllStatus设置为true，表示全选选中；否则，将其设置为false，表示全选未选中。
                    this.checkAllStatus = this.goods.every(item => item.isChecked);
                    // 接下来，调用sum方法来更新总价：
                    this.sum(); // 更新总价
                },
                sum() {
                    // 计算总价
                    //reduce方法接受两个参数，一个是回调函数，另一个是初始值。回调函数中的第一个参数 total 是累加器，表示当前的累加结果，初始值为0。第二个参数 item 是遍历时的当前元素。
                    // 在每次遍历时，如果当前商品 item 被选中（isChecked 为 true），则将当前商品的价格 price 乘以数量 number，然后加到累加器 total 中。如果当前商品未被选中，则直接返回累加器 total，继续下一次遍历。
                    // 最后，reduce方法返回最终的累加结果，即所有选中商品的总价，并将其赋值给 this.totalPrice 属性。
                    this.totalPrice = this.goods.reduce((total, item) => {
                        if (item.isChecked) {
                            return total + item.price * item.number; // 若商品被选中，则计算该商品的总价并加入总价中
                        } else {
                            return total;
                        }
                    }, 0);
                }
            }
        });
    </script>
</body>
</html>

五、计算属性--简易购物车（无复选框）

计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新。

使用场景：当一个属性需要复杂的逻辑运算之后才能获取其值，可以使用计算属性，在一个计算属性中可以完成各种复杂的逻辑，包括运算，方法调用等，只要最终返回一个结果就可以了

语法：computed:{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ShopCar</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim" crossorigin="anonymous"></script>
</head>
<body>
<h1 style="text-align: center;">东天帝商城</h1>
    <hr>
<br>
<br>
<table id="ShopCar" class="table table-light" style="border-radius: 50%; width: 80%;  margin: auto;"   >
    <tr class="table-info">
        <td>商品名称</td>
        <td>商品价格</td>
        <td>商品数量</td>
        <td>商品总价</td>
    </tr>
<tr>
    <td>男人得装</td>
    <td>{{man}}</td>
    <td> &nbsp;<input type="number" v-model="man2">&nbsp;</td>
    <td>{{man1}}</td>
</tr>
<tr>
    <td>和天下</td>
    <td>{{smoke}}</td>
    <td> &nbsp;<input type="number" v-model="smoke2">&nbsp;</td>
    <td>{{smoke1}}</td>
</tr>
<tr>
    <td>奥特曼变身手环</td>
    <td>{{Ultraman}}</td>
    <td> &nbsp;<input type="number" v-model="Ultraman2">&nbsp;</td>
    <td>{{Ultraman1}}</td>
</tr>
<tr>
   <td colspan="3" style="text-align: right;">总价：</td>
    <td>{{sum}}</td>
</tr>
</table>
<script>
new Vue({
    // 挂载组件
    el:"#ShopCar",
    // 回显数据
    data(){
        return {
            man:79,
            smoke:100,
            Ultraman:10000,
            man2:1,
            smoke2:1,
            Ultraman2:1
        }
    },
    // 计算函数
    computed:{
        man1(){
            return this.man * this.man2
        },
        smoke1(){
            return this.smoke * this.smoke2
        },
        Ultraman1(){
            return this.Ultraman * this.Ultraman2
        },
        sum(){
            return this.man1+this.smoke1+this.Ultraman1
        }
    }
})
</script>
</body>
</html>

Vue语法--完成购物车案例