Vue.js入门模板语法[上] 及Vue.js实现购物车---详细讲解
前言
前面我们学习了Vue的基础入门，接下来我们学习有关Vue的模板语法，学习Vue语法能提高我们的前端开发效率
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。vue将模板编译成虚拟dom，结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少
一，插值
1.1 文本
{{msg}}
<body><div id="wenben"><h1>文本</h1>{{msg}}</div><script >new Vue({el:'#wenben',data(){return{msg:"Hello Smart!"}}});</script>
1.2 html
使用v-html指令用于输出html代码
<!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></head><body><div id="wenben"><p>html解析</p><h1 v-html="msg2"></h1></div><script >new Vue({el:'#wenben',data(){return {msg2:'<span style="color:red;">Hello Smart!</span>'}}});</script></body> </html>
1.3 属性
<!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><style>.f40{font-size: 100px;} </style></head><body><div id="wenben"><p>属性</p><h1 :class="msg3" v-html="msg2"></h1></div><script >new Vue({el:'#wenben',data(){return {msg2:'<span style="color:red;">Hello Smart!</span>',msg3:'f40'}}});</script></body> </html>
1.4 表达式
<!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><style>.f40{font-size: 40px;} </style></head><body><div id="wenben"><!-- <h1>文本</h1> --><!-- {{msg1}} --><!-- <p>html解析</p><h1 v-html="msg2"></h1> --><!-- <p>属性</p><h1 :class="msg3" v-html="msg2"></h1> --><!--表达式-->{{num+10}},{{warm.substr(9,15)}},<input v-model="ok"/>{{ok==1?'被打了':'不行我要还回去'}}</div><script >new Vue({el:'#wenben',data(){return {// msg1:'Hello Smart!',// msg2:'<span style="color:red;">Hello Smart!</span>',// msg3:'f40'num:10,warm:'nishigedashuaige',ok:1}}});</script></body> </html>
二，指令
1.v-if&v-else&v-else-if
<!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></head><body><!-- 定义边界 --><div id="zz"><h1>v-if...的使用</h1><input v-model="yanzhi"/><br/><b v-if="yanzhi<60">丑男</b><b v-else-if="yanzhi>=60 && yanzhi<=70">看得过去</b><b v-else-if="yanzhi>70 && yanzhi<=80">小帅</b><b v-else-if="yanzhi>80 && yanzhi<=90">美男子</b><b v-else=" ">吴彦祖</b></div></body><script type="text/javascript">// 构建vue实例 绑定边界 new Vue({el:'#zz',data(){return{yanzhi:60,}},})</script></body> </html>
2.v-show
与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码:style="display:none"
<!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></head><body><!-- 定义边界 --><div id="zz"><h1>v-if|v-else|v-else-if的使用</h1><input v-model="yanzhi"/><br/><b v-if="yanzhi<60">丑男</b><b v-else-if="yanzhi>=60 && yanzhi<=70">看得过去</b><b v-else-if="yanzhi>70 && yanzhi<=80">小帅</b><b v-else-if="yanzhi>80 && yanzhi<=90">美男子</b><b v-else=" ">吴彦祖</b><p v-show="yanzhi>90">>v-show-成为大神的人</p> <p v-if="yanzhi>90">v-if-成为大神的人<p></div></body><script type="text/javascript">// 构建vue实例 绑定边界 new Vue({el:'#zz',data(){return{yanzhi:60,}},})</script></body> </html>3 v-for
类似JS的遍历：
遍历数组: v-for="item in items", items是数组，item为数组中的数组元素
遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标
html代码：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>指令</title><!-- jQuery--><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script><!-- vue.js--><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> </head> <body> <!-- 定义边界 --> <div id="app"><h1>v-for的使用</h1>下拉框：<select v-model="hobbySelected"><option v-for="h in hobby" :value="h.id">{{h.name}}</option></select><br>复选框：<div v-for="h in hobby"><input :value="h.id" type='checkbox'/>{{h.name}}</div> </div> </body> <script type="text/javascript">// 绑定边界 new Vue({el: '#app',data() {return {hobby: [{id: "1", name: "一杀"},{id: "2", name: "二杀"},{id: "3", name: "三杀"},{id: "4", name: "四杀"}]};}}) </script></html>
4 动态参数：
从2.6.0开始，可以用方括号括起来的JavaScript表达式作为一个指令的参数
<a v-bind:[attrname]="url"> ... </a>
同样地，你可以使用动态参数为一个动态的事件名绑定处理函数
<button v-on:[evname]="dt">点击事件</button>
注1：动态参数表达式有一些语法约束，evName无效,evname有效，回避大写
<!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></head><!-- 定义边界 --><div id="app"><h1>动态参数</h1><input v-model="evname" /><button v-on:[evname]="test">点击</button></div><script type="text/javascript">// 构建vue实例 绑定边界 new Vue({el:'#app',data(){return{evname:'click'};},methods: {test(){alert("点一点更棒!");}}})</script> </html>
三，过滤器
3.1 局部过滤器
vue允许自定义过滤器，一般用于常见的文本格式化，过滤器可用的两个地方：双花括号插值与v-bind表达式，过滤器应该被添加在js表达式的尾部，使用管道运算符 " | "
<!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></head><body><!-- 定义边界 --><div id="B">{{msg}}<br />{{msg|single}}<br />{{msg|param(0,2)}}</div><script type="text/javascript">// 绑定边界 ES6具体体现new Vue({el: '#B',data() {return {msg: "或许就像他们说~"};},filters: {'single': function(val) {return val.substring(4, 8);},'param': function(val, start, end) {return val.substring(start, end);}}})</script></body> </html>
3.2 全局过滤器
拷入date.js（日期格式化）放入项目js目录中，在页面中引入。
定义全局过滤器<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>全局过滤器</title><!-- vue.js--><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script><script src="date.js"></script> </head> <body> <!-- 定义边界 --> <div id="B"><h3>全局过滤器</h3>{{time}}<br>{{time | fmtDateFilter}} </div> </body> <script type="text/javascript">// 全局过滤器Vue.filter('fmtDateFilter', function (value) {return fmtDate(value);});// 绑定边界 ES6具体体现new Vue({el: '#B',data() {return {time: new Date()};}}) </script> </html>
四，计算属性&监听器
4.1 计算属性
计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新。
使用场景：当一个属性需要复杂的逻辑运算之后才能获取其值，可以使用计算属性，在一个计算属性中可以完成各种复杂的逻辑，包括运算，方法调用等，只要最终返回一个结果就可以了
语法：computed:{}<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>计算属性</title><!-- vue.js--><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> </head> <body> <div id="B">单价：<input v-model="price">数量：<input v-model="num">总价：<input v-model="count"> </div> </body> <script type="text/javascript">new Vue({el: '#B',data() {return {price: 50,num: 1}},computed: {count: function () {return this.price * this.num}}}) </script> </html>
4.2 监听器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>监听属性</title><!-- vue.js--><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> </head> <body> <!-- 定义边界 --> <div id="B"><p>监听属性</p>千米：<input v-model="km"/>米：<input v-model="m"/> </div> </body> <script type="text/javascript">// 绑定边界 ES6具体体现new Vue({el: '#B',data() {return {km: 2,m: 2000};},watch: {// v指的是m变量m: function (v) {this.km = parseInt(v) / 1000;},// v指的是km变量km: function (v) {this.m = parseInt(v) * 1000;}}}) </script></html>
五、购物车实现
购物车代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--引入vue.js--><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title>购物车</title>
<style>th, td {padding: 15px;text-align: center;}
</style>
</head>
<body>
<div id="B"><div ><h1>购物车</h1><table width="80%" border="1" cellspacing="1" cellpadding="1"><thead><tr><th>商品名</th><th>数量</th><th>单价</th><th>小计</th></tr></thead><tbody><tr v-for="item in items" :key="item.id"><td ><h3 class="">{{ item.name }}</h3></td><td class=""><button @click="updatetity(item, -1)">-</button><!-- 绑定事件 --><span class="quantity-label">{{ item.quantity }}</span><button @click="updatetity(item, 1)">+</button></td><td class="">{{ item.price }}</td><td><p class="">{{ subtotal(item) }}</p></td></tr></tbody><tfoot><tr><td colspan="3"></td><td><p class="" colspan="4" sty>总计{{ count() }}</p></td></tr></tfoot></center></table></div>
</div><script>
new Vue({el: '#B',data: {items: [{ id: 1, name: '乒乓球', price: '$2', quantity: 1 },{ id: 2, name: '足球', price: '$109', quantity: 2 },{ id: 3, name: '篮球', price: '$150', quantity: 1 },{ id: 4, name: '羽毛球', price: '$99', quantity: 2 },]},methods: {updatetity(item, amount) {item.quantity += amount;},subtotal(item) {return '$' + (parseFloat(item.price.slice(1)) * item.quantity).toFixed(2);},count() {let total = 0;for (let item of this.items) {total += parseFloat(item.price.slice(1)) * item.quantity;}return '$' + total.toFixed(2);}}
});
</script>
</body>
</html>相关文章：
Vue.js入门模板语法[上] 及Vue.js实现购物车---详细讲解
前言 前面我们学习了Vue的基础入门，接下来我们学习有关Vue的模板语法，学习Vue语法能提高我们的前端开发效率 Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML &a…...
windows下gvim的配置
一、vim配置文件 "查看自己的vimrc所在的目录 "在命令模式下 :echo $MYVIMRC"打开自己的vimrc文件 "在命令模式下 :e $MYVIMRC 二、排版 "查看自己当前的字体及大小 "在命令模式下 :set guifont?"设置默认的字体为仿宋_GB2312ÿ…...
基于复旦微的FMQL45T900全国产化ARM开发开发套件（核心板+底板）
TES745D是我司自主研制的一款基于上海复旦微电子FMQL45T900的全国产化ARM核心板（模块）。该核心板将复旦微的FMQL45T900（与XILINX的XC7Z045-2FFG900I兼容）的最小系统集成在了一个87*117mm的核心板上，可以作为一个核心模…...
环形链表)
Leetcode Top100(23)环形链表
给你一个链表的头节点 head ，判断链表中是否有环。 如果链表中有某个节点，可以通过连续跟踪 next 指针再次到达，则链表中存在环。 为了表示给定链表中的环，评测系统内部使用整数 pos 来表示链表尾连接到链表中的位置（索…...
线性代数基础-行列式
一、行列式之前的概念 1.全排列： 把n个不同的元素排成一列，称为n个元素的全排列，简称排列 （实际上就是我们所说的排列组合，符号是A，arrange） 2.标准序列： 前一项均小于后一项的序列…...
RT-Thread（学习）
RT-Thread是一款完全由国内团队开发维护的嵌入式实时操作系统（RTOS），具有完全的自主知识产权。经过16个年头的沉淀，伴随着物联网的兴起，它正演变成一个功能强大、组件丰富的物联网操作系统。 RT-Thread概述 RT-Threa…...
【MySQL】 MySQL 死锁问题分析优化器特性及优化方案
MySQL 死锁问题分析优化器特性及解决方案 MySQL 锁机制介绍 1、MySQL常用存储引擎的锁机制 MyISAM和MEMORY采用表级锁(table-level locking) BDB采用页面锁(page-level locking)或表级锁，默认为页面锁 InnoDB支持行级锁(row-level locking)和表级锁,默认为行级…...
【C++面向对象侯捷】8.栈，堆和内存管理
文章目录 栈，堆stack object的生命周期static local object的生命周期global object的生命周期heap objects 的生命期new：先分配memory，再调用构造函数delete: 先调用析构函数，再释放 memory动态分配所得的内存块，in V…...
在比特币上使用可检索性证明支付存储费用
我们为用户开发了一种为云存储付费的新方法。 与亚马逊的 S3 等传统云存储相比，用户不必信任服务器。 我们使用比特币智能合约来确保支付取决于服务器的可检索性证明 (PoR)，该证明只能在数据仍然可用且需要时可以检索的情况下生成。 可检索性证明 (PoR)…...
实现服务端给客户端发消息)
使用SSE(Server-Sent Events)实现服务端给客户端发消息
首先是客户端，看着比较简单。但实际应用中可能要比这复杂，因为默认sse只支持get请求，而且没法携带header。所以如果默认的方法达不到需求的话可能需要额外实现，当然也可以引用第三方库，比如rangermauve/fetch-event-so…...
【Redis】使用rpm包安装redis
背景说明 公司环境处于内网，某同事需要安装redis，如果使用通过源码编译安装redis，很多编译工具如gcc就需要先安装，但处于内网安装起来不太方便，当然也不是不可以。我们此处就选用通过redis的rpm包进行安装。 rpm包查…...
论文阅读-Group-based Fraud Detection Network on e-Commerce Platforms
目录 摘要 1 Introduction 2 BACKGROUND AND RELATED WORK 2.1 Preliminaries 2.2 Related Works 3 MODEL 3.1 Structural Feature Initialization 3.2 Fraudster Community Detection 3.3 Training Objective 4 EXPERIMENT 4.1 Experimental Setup 4.2 Prediction …...
java程序启动时指定JVM内存参数和Xms、Xmx参数学习
先找个java程序来试验；找这个， java实现计算机图形学中点画线算法_java 多个点连成一条线 算法-CSDN博客 JVM内存参数中， -Xms：设置堆内存的初始大小，默认为物理内存的1/64； -Xmx：设置堆内存的…...
【C++编程能力提升】
代码随想录训练营Day44 | Leetcode 518、377 一、完全背包问题1、完全背包与01背包的区别 二、518 零钱兑换II三、377 组合总和IV 一、完全背包问题 1、完全背包与01背包的区别 第一，物品的有限与无限； 01背包：物品是有限的。（每…...
FlashDuty Changelog 2023-09-21 | 自定义字段和开发者中心
FlashDuty：一站式告警响应平台，前往此地址免费体验！ 自定义字段 FlashDuty 已支持接入大部分常见的告警系统，我们将推送内容中的大部分信息放到了 Lables 进行展示。尽管如此，我们用户还是会有一些扩展或定制性的需求…...
贪心算法-
代码随想录 什么是贪心 贪心的本质是选择每一阶段的局部最优，从而达到全局最优。 这么说有点抽象，来举一个例子： 例如，有一堆钞票，你可以拿走十张，如果想达到最大的金额，你要怎么拿ÿ…...
漫谈：C语言 C++ 左值、右值、类型转换
编程不是自然语言，编程自有其内在逻辑。 左值引起的BUG 编译器经常给出类似这样的BUG提示： “表达式必须是可修改的左值” “非常量引用的初始值必须是左值” 看一下示例： #include <iostream>void f(int& x) {} int main() {sho…...
前车之鉴，后车之师
问题分类具体解释可能导致的后果解决方法备注主从延迟数据库写后立即读的场景，比如订单落地成功抛消息，消息接收方再读订单推订单中心、发触达、落地数据等场景，再读数据时走从库，可能读不到数据。脏数据业务逻辑有问题延迟消费。…...
WEB使用VUE3实现地图导航跳转
我们在用手机查看网页时可以通过传入经纬度去设置目的地然后跳转到对应的地图导航软件，如果没有下载软件则会跳转到下载界面 注意： 高德地图是一定会跳转到一个新网页然后去询问用户是否需要打开软件百度和腾讯地图是直接调用软件的这个方法有缺陷&…...
今天聊一聊高性能系统架构设计是什么样的
Java全能学习面试指南：https://javaxiaobear.cn 今天聊一聊大家常听到的高性能系统架构。 高性能系统架构，主要包括两部分内容，性能测试与性能优化。性能优化又可以细分为硬件优化、中间件优化、架构优化及代码优化，知识架构图如…...
Python爬虫实战：研究MechanicalSoup库相关技术
一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...
前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包（Closure）？闭包有什么应用场景和潜在问题？2.解释 JavaScript 的作用域链（Scope Chain） 二、原型与继承3.原型链是什么？如何实现继承&a…...
基于SpringBoot在线拍卖系统的设计和实现
摘 要 随着社会的发展，社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统，主要的模块包括管理员；首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...
基于IDIG-GAN的小样本电机轴承故障诊断
目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) 梯度归一化（Gradient Normalization） (2) 判别器梯度间隙正则化（Discriminator Gradient Gap Regularization） (3) 自注意力机制（Self-Attention） 3. 完整损失函数 二…...
Python+ZeroMQ实战：智能车辆状态监控与模拟模式自动切换
目录 关键点 技术实现1 技术实现2 摘要： 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式（自动驾驶、人工驾驶、远程驾驶、主动安全），并通过实时消息推送更新车…...
手机平板能效生态设计指令EU 2023/1670标准解读
手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读，综合法规核心要求、最新修正及企业合规要点： 一、法规背景与目标 生效与强制时间 发布于2023年8月31日（OJ公报&…...
Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强：基于微服务与容器化的解决方案
在大数据时代，海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构，在处理大规模数据抓取任务时展现出强大的能力。然而，随着业务规模的不断扩大和数据抓取需求的日益复杂，传统…...
PH热榜 | 2025-06-08
1. Thiings 标语：一套超过1900个免费AI生成的3D图标集合 介绍：Thiings是一个不断扩展的免费AI生成3D图标库，目前已有超过1900个图标。你可以按照主题浏览，生成自己的图标，或者下载整个图标集。所有图标都可以在个人或…...
【深尚想】TPS54618CQRTERQ1汽车级同步降压转换器电源芯片全面解析
1. 元器件定义与技术特点 TPS54618CQRTERQ1 是德州仪器（TI）推出的一款 汽车级同步降压转换器（DC-DC开关稳压器），属于高性能电源管理芯片。核心特性包括： 输入电压范围：2.95V–6V，输…...
Yii2项目自动向GitLab上报Bug
Yii2 项目自动上报Bug 原理 yii2在程序报错时, 会执行指定action, 通过重写ErrorAction, 实现Bug自动提交至GitLab的issue 步骤 配置SiteController中的actions方法 public function actions(){return [error > [class > app\helpers\web\ErrorAction,],];}重写Error…...