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

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 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>


ec5bab106047451fa7c9d695ccc36a59.png


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>

c080ccb921014c1793f130d6ac8f1040.png


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>


85a0b16ecf1844daaaec54f46a42bd9e.gif

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>

89827ab7a98d48f29540f4ea41fb3efa.png


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>


e228bd6435694c9aa4c573c6568b5984.png


三、监听器


监听属性 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>


ba178a0f74da4eabbda80df53287e7b3.gif


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

  计算属性可用于快速计算视图(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>

82e17e4ce1d54fbd8d44fd69b476a4b8.gif

相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
4天前
|
JavaScript 数据格式
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
27 1
|
1天前
|
缓存 监控 JavaScript
如何优化 Vue 的执行流程?
【10月更文挑战第2天】
91 59
|
1天前
|
JavaScript
vue知识点
vue知识点
13 5
|
2天前
|
JavaScript 前端开发 网络架构
vue 路由器history和hash工作模式
vue 路由器history和hash工作模式
|
3天前
|
JSON JavaScript 前端开发
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
11 1
|
4天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
14 2
|
4天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【3.项目路由的分析】
vue尚品汇商城项目-day01【3.项目路由的分析】
13 1
|
4天前
|
JavaScript 前端开发 数据安全/隐私保护
vue尚品汇商城项目-day01【5.路由组件的搭建】
vue尚品汇商城项目-day01【5.路由组件的搭建】
12 0
vue尚品汇商城项目-day01【5.路由组件的搭建】
|
5天前
|
JavaScript 索引
vue尚品汇商城项目-day04【25.面包屑处理关键字】
vue尚品汇商城项目-day04【25.面包屑处理关键字】
23 1
|
5天前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day04【28.详情页面Detail】
vue尚品汇商城项目-day04【28.详情页面Detail】
14 1