当前位置： 首页 > news >正文

后端前行Vue之路(二)：模版语法之插值与指令

news 2026/5/12 19:50:27

1.概述

Vue.js的模板语法是一种将Vue实例的数据绑定到HTML文档的方法。Vue的模板语法是一种基于HTML的扩展，允许开发者将Vue实例中的数据绑定到HTML元素，以及在HTML中使用一些简单的逻辑和指令。Vue.js 基于 HTML 的模板语法允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

Vue的模板语法大体上分为两类：插值语法和指令语法。接下来我们我就分别来看看这两种语法是如何使用的。

2.插值语法

插值： 使用双大括号 {{ }} 将数据插入到HTML中。即{{xxx}}，xxx是JS表达式，且可以直接读取到data中的所有属性。插入语法用于解析标签体内容。

<span>{{ number }}</span>

什么是JS表达式？

一个表达式会产生一个值，可以放在任何一个需要值的地方：

{{number}}{{ number + 1 }}{{method(1)}}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。但是下面的语句就不是表达式，而是语句了：

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

下面我们就来看看上面表达式的示例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>模板语法</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><h2>插值语法示例如下：</h2><h3>number = {{number}}</h3><h3>number加1 = {{number+1}}</h3><h3>方法计算 = {{add(5)}}</h3><h3>三目运算：{{number > 6 ? "哈哈" : "呵呵"}}</h3><h3>字符串反转操作：{{ message.split('').reverse().join('') }}</h3></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{number: 10,message: "hello world"},methods:{add(i) {return this.number+i}}})</script>
</html>

浏览器运行结果如下：

项目推荐：基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba企业级系统架构底层框架封装，解决业务开发时常见的非功能性需求，防止重复造轮子，方便业务快速开发和企业技术栈框架统一管理。引入组件化的思想实现高内聚低耦合并且高度可配置化，做到可插拔。严格控制包依赖和统一版本管理，做到最少化依赖。注重代码规范和注释，非常适合个人学习和企业使用

Github地址：https://github.com/plasticene/plasticene-boot-starter-parent

Gitee地址：https://gitee.com/plasticene3/plasticene-boot-starter-parent

微信公众号：Shepherd进阶笔记

交流探讨qun：Shepherd_126

3.指令语法

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，后续我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。指令语法用于解析标签（包括：标签属性、标签体内容、绑定事件…）

v-bind：动态绑定HTML属性，数据只能从data流向页面，即单向绑定。

<a v-bind:href="url">...</a>

v-model：数据不仅能从data流向页面，还可以从页面流向data。即双向绑定。

<input type="text" v-model:value="name">

在浏览器运行，单向输入框输入数据下面输入框不会跟着变，但是输入双向输入框上面的输入框会跟着变，这说明双向绑定v-model一般都应用在表单类元素上（如：input、select等），单向绑定v-bind用于表单没有意义。

	<!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 --><h2 v-model:x="name">你好啊</h2>

v-on：监听DOM事件。

<button v-on:click="handleClick">Click me</button>

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

<!-- v-bind完整语法 -->
<a v-bind:href="url">...</a>
<!-- v-bind缩写 -->
<a :href="url">...</a><!-- v-on完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- v-on缩写 -->
<a @click="doSomething">...</a>

Vue中的事件修饰符：

1.prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event.target是当前操作的元素时才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

		<!-- 阻止默认事件（常用） --><a href="http://www.baidu.com" @click.prevent="say">点我提示信息</a><!-- 阻止事件冒泡（常用） --><div class="demo1" @click="showInfo"><button @click.stop="showInfo">点我提示信息</button><!-- 修饰符可以连续写 --><!-- <a href="http://www.baidu.com" @click.prevent.stop="showInfo">点我提示信息</a> --></div><!-- 事件只触发一次（常用） --><button @click.once="showInfo">点我提示信息</button>

指令语法综合示例如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>模板语法</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><a :href="address"> 测试v-bind绑定标签属性</a><hr>v-model双向数据绑定：<input type="text" v-model="name"> &nbsp <span>name={{name}}</span><br/><hr>v-on事件测试 <button @click="say">点我</button><hr><span>测试事件修饰符</span><br><!-- 阻止默认事件（常用） --><a href="https://www.baidu.com" @click.prevent="say" style="margin-top: 12px;">点我提示信息</a><!-- 阻止事件冒泡（常用） --><div style="margin-top: 8px;" @click="say"><button @click.stop="say">点我提示信息</button><!-- 修饰符可以连续写 --><!-- <a href="http://www.baidu.com" @click.prevent.stop="showInfo">点我提示信息</a> --></div><!-- 事件只触发一次（常用） --><button @click.once="say" style="margin-top: 8px;">点我提示信息</button><hr></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{name:"",address:"https://www.baidu.com"},methods:{say(){alert("你好呀")}}})</script>
</html>

4.动态参数

从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：

<!--
注意，参数表达式的写法存在一些约束，如之后的“对动态参数表达式的约束”章节所述。
-->
<a v-bind:[attributeName]="url"> ... </a>

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data property attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。

同样地，你可以使用动态参数为一个动态的事件名绑定处理函数：

<a v-on:[eventName]="doSomething"> ... </a>

在这个示例中，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。

对动态参数的值的约束

动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

对动态参数表达式的约束

动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。例如：

<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。

在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：

<!--
在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
-->
<a v-bind:[someAttr]="value"> ... </a>

相关文章：

后端前行Vue之路(二)：模版语法之插值与指令

1.概述 Vue.js的模板语法是一种将Vue实例的数据绑定到HTML文档的方法。Vue的模板语法是一种基于HTML的扩展&#xff0c;允许开发者将Vue实例中的数据绑定到HTML元素&#xff0c;以及在HTML中使用一些简单的逻辑和指令。Vue.js 基于 HTML 的模板语法允许开发者声明式地将 DOM 绑…...

编程日记 2024/4/3 4:53:41

Kotlin 中的类和构造方法

Kotlin 中的类与接口和 Java 中的类与接口还是有区别的。例如&#xff0c;Koltin 中的接口可以包含属性声明&#xff0c;与 Java 不同的是。Kotlin 的声明默认是 final 和 public 的。此外&#xff0c;嵌套的类默认并不是内部类&#xff1a;它们并没有包含对其它外部类的隐式引…...

编程日记 2024/4/3 4:52:39

【2024最新】vue3的基本使用(超详细)

一、Vue 3 概述 1. 为什么要学习Vue 3 Vue 3是Vue.js的最新主要版本&#xff0c;它带来了许多改进和新特性&#xff0c;包括但不限于&#xff1a; 性能提升&#xff1a;Vue 3提供了更快的渲染速度和更低的内存使用率。Composition API&#xff1a;引入了一个新的API&#xf…...

编程日记 2024/4/3 4:50:38

【xinference】（8）：在autodl上，使用xinference部署qwen1.5大模型，速度特别快，同时还支持函数调用，测试成功！

1&#xff0c;关于xinference Xorbits Inference (Xinference) 是一个开源平台&#xff0c;用于简化各种 AI 模型的运行和集成。借助 Xinference&#xff0c;您可以使用任何开源 LLM、嵌入模型和多模态模型在云端或本地环境中运行推理&#xff0c;并创建强大的 AI 应用。 Xor…...

编程日记 2024/4/3 4:49:36

YARN集群 和 MapReduce 原理及应用

YARN集群模式 本文内容需要基于 Hadoop 集群搭建完成的基础上来实现 如果没有搭建&#xff0c;请先按上一篇: <Linux 系统 CentOS7 上搭建 Hadoop HDFS集群详细步骤> 搭建&#xff1a;https://mp.weixin.qq.com/s/zPYsUexHKsdFax2XeyRdnA 配置hadoop安装目录下的 etc…...

编程日记 2024/4/3 4:46:33

C++算法——滑动窗口

一、长度最小的子数组 1.链接 209. 长度最小的子数组 - 力扣&#xff08;LeetCode&#xff09; 2.描述 3.思路 本题从暴力求解的方式去切入&#xff0c;逐步优化成“滑动窗口”&#xff0c;首先&#xff0c;暴力枚举出各种组合的话&#xff0c;我们先让一个指针指向第一个&…...

编程日记 2024/4/3 4:43:30

Rust---有关介绍

目录 Rust---有关介绍变量的操作Rust 数值库&#xff1a;num某些基础数据类型序列(Range)字符类型单元类型 发散函数表达式&#xff08;&#xff01; 语句&#xff09; Rust—有关介绍 得益于各种零开销抽象、深入到底层的优化潜力、优质的标准库和第三方库实现&#xff0c;Ru…...

编程日记 2024/4/3 4:42:29

vue项目双击from表单限制重复提交 添加全局注册自定义函数

第一步: 找到utils文件夹添加directive.js文件 import Vue from vue //全局防抖函数 // 在vue上挂载一个指量 preventReClick const preventReClick Vue.directive(preventReClick, {inserted: function (el, binding) {console.log(el.disabled)el.addEventListener(click,…...

编程日记 2024/4/3 4:39:27

WebPack的使用及属性配、打包资源

WebPack(静态模块打包工具)(webpack默认只识别js和json内容) WebPack的作用 把静态模块内容压缩、整合、转译等&#xff08;前端工程化&#xff09; 1️⃣把less/sass转成css代码 2️⃣把ES6降级成ES5 3️⃣支持多种模块文件类型&#xff0c;多种模块标准语法 export、export…...

编程日记 2024/4/3 4:36:23

机器学习实战17-高斯朴素贝叶斯(GaussianNB)模型的实际应用，结合生活中的生动例子帮助大家理解

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下机器学习实战17-高斯朴素贝叶斯(GaussianNB)模型的实际应用&#xff0c;结合生活中的生动例子帮助大家理解。GaussianNB&#xff0c;即高斯朴素贝叶斯模型&#xff0c;是一种基于概率论的分类算法&#xff0c;广泛应…...

编程日记 2024/4/3 4:26:14

数据处理库Pandas数据结构DataFrame

Dataframe是一种二维数据结构&#xff0c;数据以表格形式&#xff08;与Excel类似&#xff09;存储&#xff0c;有对应的行和列&#xff0c;如图3-3所示。它的每列可以是不同的值类型&#xff08;不像 ndarray 只能有一个 dtype&#xff09;。基本上可以把 DataFrame 看成是共享…...

编程日记 2024/4/3 4:25:13

中国发展新能源的核心驱动力是什么？其原理是如何运作的？

中国发展新能源的核心驱动力是推进能源消费方式变革、构建多元清洁能源供应体系、实施创新驱动发展战略、深化能源体制改革和持续推进国际合作。 新能源的发展背后有多重经济、政策及环境因素的推动&#xff1a; 经济发展需求&#xff1a;随着中国经济的快速发展&#xff0c;…...

编程日记 2024/4/3 4:24:12

skywalking

部署&#xff1a; docker部署方式 docker-compose.yaml version: 3 services:elasticsearch:build:context: elasticsearchrestart: alwaysnetworks:- skywalking_netcontainer_name: elasticsearchimage: elasticsearch:7.17.6environment:- "discovery.typesingle-no…...

编程日记 2024/4/3 4:23:11

江苏开放大学2024年春《大学英语（D） 060108》第二次过程性考核作业参考答案

答案&#xff1a;更多答案&#xff0c;请关注【电大搜题】微信公众号 答案&#xff1a;更多答案&#xff0c;请关注【电大搜题】微信公众号 答案&#xff1a;更多答案&#xff0c;请关注【电大搜题】微信公众号 单选题 1从选项中选出翻译最为准确的一项。 We cannot help …...

编程日记 2024/4/3 4:20:08

dockerfile制作-pytoch+深度学习环境版

你好你好&#xff01; 以下内容仅为当前认识&#xff0c;可能有不足之处&#xff0c;欢迎讨论&#xff01; 文章目录 文档内容docker相关术语docker常用命令容器常用命令根据dockerfile创建容器dokerfile文件内容 docker问题&#xff1a;可能的原因和解决方法示例修改修改后的D…...

编程日记 2024/4/3 4:18:06

YOLOv8结合SCI低光照图像增强算法！让夜晚目标无处遁形！【含端到端推理脚本】

这里的"SCI"代表的并不是论文等级，而是论文采用的方法 — “自校准光照学习” ~ 左侧为SCI模型增强后图片的检测效果，右侧为原始v8n检测效果 这篇文章的主要内容是通过使用SCI模型和YOLOv8进行算法联调，最终实现了如上所示的效果：在增强图像可见度的同时，对图像…...

编程日记 2024/4/3 4:17:04

视频监控/云存储/AI智能分析平台EasyCVR集成时调用接口报跨域错误的原因

EasyCVR视频融合平台基于云边端架构&#xff0c;可支持海量视频汇聚管理&#xff0c;能提供视频监控直播、云端录像、云存储、录像检索与回看、智能告警、平台级联、智能分析等视频服务。平台兼容性强&#xff0c;支持多协议、多类型设备接入&#xff0c;包括&#xff1a;国标G…...

编程日记 2024/4/3 4:16:04

VuePress基于 Vite 和 Vue 构建优秀框架

VitePress 是一个静态站点生成器 (SSG)&#xff0c;专为构建快速、以内容为中心的站点而设计。简而言之&#xff0c;VitePress 获取用 Markdown 编写的内容&#xff0c;对其应用主题&#xff0c;并生成可以轻松部署到任何地方的静态 HTML 页面。 VitePress 附带一个用于技术文档…...

编程日记 2024/4/3 4:15:02

冒泡排序，选择排序，插入排序，希尔排序，基数排序，堆排序代码分析（归并排序和快速排序后续更新）

所有的算法都是这样&#xff0c;算法思想最重要&#xff0c;其次是实现过程&#xff0c;最后才是实现的代码 上战伐谋&#xff0c;我们只要明确了其算法思想和实现过程&#xff0c;所有算法都是纸老虎&#xff0c;所有算法题都是纸老虎 笔者才疏学浅&#xff0c;也算是刚刚接…...

编程日记 2024/4/3 4:09:56

从入门到精通：NTP卫星时钟服务器技术指南

从入门到精通&#xff1a;NTP卫星时钟服务器技术指南 从入门到精通&#xff1a;NTP卫星时钟服务器技术指南 一、 产品功能 卫星时钟服务器是一款采用GPS或北斗卫星提供高精度网络时间服务的产品。卫星天线安装简便&#xff08;根据天线所放位置提示实时卫星颗数&#xff09;&a…...

编程日记 2024/4/3 4:08:55

英特尔转型芯片代工：从IDM巨头到服务商的六大挑战与机遇

1. 英特尔代工之路&#xff1a;从IDM巨头到服务提供商的六大挑战在半导体行业&#xff0c;英特尔这个名字几乎就是高性能微处理器的代名词。这家公司凭借其垂直整合制造模式&#xff0c;在过去几十年里构筑了难以撼动的技术护城河。然而&#xff0c;当行业的目光从单纯的制程竞…...

编程新知 2026/5/12 19:45:26

对比体验Taotoken平台不同大模型在创意生成上的差异

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 对比体验Taotoken平台不同大模型在创意生成上的差异 对于内容创作者而言&#xff0c;大模型是激发灵感、提升效率的得力工具。然而…...

编程新知 2026/5/12 19:39:06

5步掌握OpenCore Configurator：黑苹果配置终极可视化指南

5步掌握OpenCore Configurator&#xff1a;黑苹果配置终极可视化指南 【免费下载链接】OpenCore-Configurator A configurator for the OpenCore Bootloader 项目地址: https://gitcode.com/gh_mirrors/op/OpenCore-Configurator 如果你正在为黑苹果系统的复杂配置而烦恼…...

编程新知 2026/5/12 18:00:59

【实战篇】Nginx反向代理负载均衡：从轮询到权重的策略演进

1. 反向代理与负载均衡基础认知 第一次接触Nginx的反向代理功能时&#xff0c;我盯着配置文件里的proxy_pass参数看了半天。这行看似简单的配置&#xff0c;背后其实隐藏着现代分布式系统的核心设计思想。想象一下这样的场景&#xff1a;当你在电商网站点击"立即购买"…...

编程新知 2026/5/12 17:16:56

如何用bitsandbytes轻松实现PyTorch大模型量化：内存减半，性能不减

如何用bitsandbytes轻松实现PyTorch大模型量化&#xff1a;内存减半&#xff0c;性能不减 【免费下载链接】bitsandbytes Accessible large language models via k-bit quantization for PyTorch. 项目地址: https://gitcode.com/gh_mirrors/bi/bitsandbytes 你是否曾因…...

编程新知 2026/5/12 17:06:26

企业组网实战：用爱快+水星AC打造跨地域无线网络，远程管理分支AP就这么简单

企业级无线组网实战&#xff1a;跨地域统一管理与远程控制方案 在数字化转型浪潮中&#xff0c;中小企业对无线网络的依赖程度越来越高。无论是总部办公室、分支机构还是临时办公点&#xff0c;稳定、安全且易于管理的无线网络已成为企业高效运营的基础设施。然而&#xff0c;…...

编程新知 2026/5/12 16:49:13

VisualCppRedist AIO 深度解析：从MSI自动化处理到系统注册表管理的完整解决方案

VisualCppRedist AIO 深度解析&#xff1a;从MSI自动化处理到系统注册表管理的完整解决方案 【免费下载链接】vcredist AIO Repack for latest Microsoft Visual C Redistributable Runtimes 项目地址: https://gitcode.com/gh_mirrors/vc/vcredist 在Windows系统开发和…...

编程新知 2026/5/12 16:40:30

OpenClaw vs Hermes Agent，谁是 2026 年 AI Agent 最优解？

OpenClaw+Hermes 全集成，一键调用所有 AI 技能：https://ai-skills.ai/?inviteCode=S2JV3NCK 前言 2026 年，AI Agent 已从 “实验玩具” 迈入 “工程化落地” 关键期。GitHub 上 OpenClaw 与 Hermes Agent 两大开源项目热度飙升，均宣称解决大模型 “失忆、弱执行、难沉淀”…...

编程新知 2026/5/12 14:36:03

AI编程规划工具vibe-driven-dev：从模糊想法到清晰开发蓝图

1. 项目概述&#xff1a;从“感觉”到“计划”的桥梁在AI编程助手&#xff08;或者说“编码智能体”&#xff09;越来越普及的今天&#xff0c;一个常见的困境是&#xff1a;我们脑子里有一个很棒的产品想法&#xff0c;但当你试图把它交给Claude Code、Cursor或者Windsurf这类…...

编程新知 2026/5/12 14:28:52

从 ROS 到 Cognitive OS、Agentic OS：机器人操作系统与具身智能新时代

一、先搞懂&#xff1a;我们常说的机器人操作系统&#xff0c;到底是什么&#xff1f;在机器人领域&#xff0c;“操作系统” 从来不是单一概念&#xff0c;而是一套功能分层、各司其职的完整软件体系。不同层级定位不同、职责分明&#xff0c;实际项目中可组合部署、按需协作&…...

编程新知 2026/5/12 14:07:31