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

Vue2之模板语法

news 2026/2/8 2:12:55

文章目录

  • 1.模板语法
    • 1.1 插值语法{{}}可以写什么
    • 1.2 指令语法
      • 1.2.1 指令概述
      • 1.2.2 v-bind指令
      • 1.2.3 v-model指令

1.模板语法

1.1 插值语法{{}}可以写什么

（1）在data中声明的
（2）常量
（3）合法的JavaScript表达式
（4）模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date

<body><div id="app"><!-- data中声明的 --><div>{{msg}}</div><div>{{age}}</div><!-- 常量 --><div>{{1313}}</div><!-- 合法的JavaScript表达式 --><div>{{1+1}}</div><!-- 模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date --><h1>{{Date.now()}}</h1></div><script>// 创建vue实例const myVue = new Vue({data: {age: 28,msg: 'agvc'},el: '#app'})// myVue.$mount('#app')</script>
</body>

1.2 指令语法

1.2.1 指令概述

（1）Vue框架中的所有指令的名字都以”v-“开始。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应的作用于DOM
（2）Vue框架中的指令都是以HTML标签的属性形式存在的，指令对于浏览器是无法看懂的，需要先让Vue框架进行编译，编译之后浏览器才可以看懂。

<span 指令写在这里></span>

（3）指令的语法规则

<HTML标签 v-指令名:参数="表达式"></HTML标签>

①表达式：在插值语法在{{}}可以写的，在指令表达式都可以写(指令中不用加{{}})
②不是所有的指令都有参数和表达式，有的指令不需要参数也不需要表达式:如v-once。
v-once:只渲染元素一次，随后的重新渲染，元素及其所有的子元素将被视为静态内容并跳过，可以用于优化性能。
（4）什么时候使用插值语法，什么时候使用指令？
①凡是标签体当中的内容想要动态，需要使用插值语法
②想让HTML标签的属性动态，需要使用指令语法

1.2.2 v-bind指令

（1）v-bind指令是干嘛的？
它可以让HTML标签的某个属性的值产生动态的效果
（2）v-bind指令的语法格式：

<HTML标签 v-bind:参数="表达式"></HTML标签>

（3）v-bind指令的编译原理
①编译前：<HTML标签 v-bind:参数="表达式"></HTML标签>
②编译后：<HTML标签 参数="表达式"></HTML标签>
③注意两项：
a.在编译的时候v-bind后面的”参数名“会被编译为HTML标签的”属性名“
b.表达式会关联data，当data发生改变之后，表达式的执行结果就会发生变化。连带的就会产生动态效果
（3）由于 v-bind 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 : ）

1.2.3 v-model指令

v-bind和v-model的区别和联系
（1）v-bind和v-model这两个指令都可以完成数据绑定
（2）v-bind是单向数据绑定：data ==>视图；v-model是双向数据绑定：data <==> 视图
（3）v-bind可以使用在任何HTML标签当中；v-model只能使用在表单元素上，例如：input标签、select标签。v-model有这个限制是因为只有表单类的元素才能给用户提供交互输入的界面
（4）v-bind和v-model都有简写方式：
①v-bind:参数="表达式" 简写为 :参数="表达式"
②v-model:value="表达式" 简写为 v-model="表达式"

相关文章：

Vue2之模板语法

文章目录 1.模板语法1.1 插值语法{{}}可以写什么1.2 指令语法1.2.1 指令概述1.2.2 v-bind指令1.2.3 v-model指令 1.模板语法 1.1 插值语法{{}}可以写什么 &#xff08;1&#xff09;在data中声明的 &#xff08;2&#xff09;常量 &#xff08;3&#xff09;合法的JavaScript…...

编程日记 2024/6/8 20:54:36

java基础练习题

1、一个".java"源文件中是否可以包括多个类&#xff1f;有什么限制&#xff1f; 可以包含多个类。但是只有一个类可以声明为public&#xff0c;且要求声明为public的类的类名与源文件名相同。 2、java的优势&#xff1f; a、跨平台性 b、安全性高 c、简单性 d、…...

编程日记 2024/6/8 20:50:32

unity中通过实现底层接口实现非按钮（图片）的事件监听

编写监听脚本 PEListenter 继承自MonoBehaviour类&#xff0c;并实现了IPointerDownHandler、IPointerUpHandler和IDragHandler接口&#xff0c;按照需求定义需要接收事件&#xff08;鼠标按下、抬起、拖拽&#xff09;的回调函数 //监听类&#xff08;需要挂载在物体上面&am…...

编程日记 2024/6/8 20:49:31

重庆耶非凡科技有限公司的选品师项目加盟靠谱吗？

在当今电子商务的浪潮中&#xff0c;选品师的角色愈发重要。而重庆耶非凡科技有限公司以其独特的选品师项目&#xff0c;在行业内引起了广泛关注。对于想要加盟该项目的人来说&#xff0c;项目的靠谱性无疑是首要考虑的问题。 首先&#xff0c;我们来看看耶非凡科技有限公司的背…...

编程日记 2024/6/8 20:48:30

《青少年编程与数学》课程方案：4、课程策略

《青少年编程与数学》课程方案&#xff1a;4、课程策略 一、工程师思维二、使命感驱动三、价值观引领四、学习现代化五、工作生活化六、与时代共进 《青少年编程与数学》课程策略强调采用工程师思维&#xff0c;避免重复造轮子&#xff0c;培养使命感&#xff0c;通过探索兴趣、…...

编程日记 2024/6/8 20:47:28

用爬虫实现---模拟填志愿

先来说实现逻辑&#xff0c;首先我要获取到这个网站上所有的信息&#xff0c;那么我们就可以开始对元素进行检查 我们发现他的每一个学校信息都有一个对应的属性&#xff0c;并且是相同的&#xff0c;那么我们就可以遍历这个网页中的所有属性一样的开始爬取 在来分析&#xff0…...

编程日记 2024/6/8 20:45:27

vscode Run Code输出出现中文乱码情况问题解决方案

主要解决方案是通过修改计算机默认的编码格式，来完成的。 chcp 是 Windows 操作系统中的一个命令，用于显示或设置控制台的代码页（code page）。代码页决定了控制台如何解释和显示字符，特别是非 ASCII 字符（例如 Unicode 字符）。 使用方法 显示当前代码页： 输入 chcp 而…...

编程日记 2024/6/8 20:44:25

代码随想录训练营Day30

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、重新安排行程 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 今天是跟着代码随想录刷题的第30天&#xff0c;主要是复习了回溯算法…...

编程日记 2024/6/8 20:43:25

Swift 序列（Sequence）排序面面俱到 - 从过去到现在（二）

概览 在上篇 Swift 序列（Sequence）排序面面俱到 - 从过去到现在（一）博文中，我们讨论了 Swift 语言中序列和集合元素排序的一些基本知识，我们还给出了以自定义类型中任意属性排序的“康庄大道”。 不过在实际的撸码场景中，我们往往需要的是“多属性”同时参与到排序的考…...

编程日记 2024/6/8 20:42:24

STM32F103C8T6基于HAL库移植uC/OS-III

文章目录 一、建立STM32CubeMX工程二、移植1、 uC/OS-III源码2、移植过程 三、配置相关代码1、bsp.c和bsp.h2、main.c3、修改启动代码4、修改app_cfg.h文件5、修改includes.h文件6、修改lib_cfg.h文件 四、编译与烧录总结参考资料 学习嵌入式实时操作系统&#xff08;RTOS&…...

编程日记 2024/6/8 20:41:23

微服务学习Day9-分布式事务Seata

文章目录 分布式事务seata引入理论基础CAP定理BASE理论 初识Seata动手实践XA模式AT模式TCC模式SAGA模式 高可用 分布式事务seata 引入 理论基础 CAP定理 BASE理论 初识Seata 动手实践 XA模式 AT模式 TCC模式 Service Slf4j public class AccountTCCServiceImpl implements A…...

编程日记 2024/6/8 20:39:21

vue用vite配置代理解决跨域问题（target、rewrite和changeOrigin的使用场景）

Vite的target、rewrite和changeOrigin的使用场景 1. target 使用场景&#xff1a;target 属性在 Vite 的 vite.config.ts 或 vite.config.js 文件的 server.proxy 配置中指定&#xff0c;用于设置代理服务器应该将请求转发到的目标地址。这通常是一个后端服务的API接口地址。…...

编程日记 2024/6/8 20:38:20

为什么PPT录制没有声音 电脑ppt录屏没有声音怎么办

一、为什么PPT录制没有声音 1.软件问题 我们下载软件的时候可能遇到软件损坏的问题&#xff0c;导致录制没有声音&#xff0c;但其他功能还是可以使用的。我建议使用PPT的隐藏功能&#xff0c;下载插件&#xff0c;在PPT界面的加载项选项卡中就能使用。我推荐一款可以解决录屏…...

编程日记 2024/6/8 20:37:19

JDBC学习笔记（三）高级篇

一、JDBC 优化及工具类封装 1.1 现有问题 1.2 JDBC 工具类封装 V1.0 resources/db.properties配置文件&#xff1a; driverClassNamecom.mysql.cj.jdbc.Driver urljdbc:mysql:///atguigu usernameroot password123456 initialSize10 maxActive20 工具类代码&#xff1a; p…...

编程日记 2024/6/8 20:36:18

c++编译器在什么情况下会提供类的默认构造函数等，与析构函数

我们都知道&#xff0c;在 c 里&#xff0c;编写的简单类&#xff0c;若没有自己编写构造析构函数与 copy 构造函数 与 赋值运算符函数&#xff0c;那么编译器会提供这些函数&#xff0c;并实现简单的语义&#xff0c;比如成员赋值。看 源码时&#xff0c;出现了下图类似的情形…...

编程日记 2024/6/8 20:35:16

SpringBoot3整合Mybatis-Plus3.5.5出现的问题

主要是由于 mybatis-plus 中 mybatis 的整合包版本不够导致的 排除 mybatis-plus 中自带的 mybatis 整合包&#xff0c;单独引入即可 java.lang.IllegalArgumentException: Invalid value type for attribute factoryBeanObjectType: java.lang.Stringat org.springframework.…...

编程日记 2024/6/8 20:34:16

服务器数据恢复—强制上线raid5阵列离线硬盘导致raid不可用的数据恢复案例

服务器数据恢复环境&#xff1a; 某品牌2850服务器中有一组由6块SCSI硬盘组建的raid5磁盘阵列&#xff0c;linux操作系统ext3文件系统。 服务器故障&#xff1a; 服务器运行过程中突然瘫痪。服务器管理员检查阵列后发现raid5阵列中有两块硬盘离线&#xff0c;将其中一块硬盘进行…...

编程日记 2024/6/8 20:33:15

初入阿里云，上手走一波

初入阿里云&#xff0c;上手走一波 一阶&#xff1a;ECSMysqlDMS安装Mysql初始化MysqlMysql操作DMS管理Mysql 二阶&#xff1a;ECSOSS远程连接ECSOSS控制台其他图片服务 三阶&#xff1a;更多搭配操作 可以说个人在日常使用过程中&#xff0c;操作最多的阿里云产品就是阿里云服…...

编程日记 2024/6/8 20:29:10

[C++] 小游戏 斗破苍穹 2.2.1至2.11.5所有版本(中) zty出品

目录 2.8.2 2.9.1 2.10.1 2.10.2 2.10.3 2.10.4 2.10.5 2.8.2 #include<stdio.h> #include<iostream> #include<ctime> #include<bits/stdc.h> #include<time.h> //suiji #include<windows.h> //SLEEP函数 using namespace std; st…...

编程日记 2024/6/8 20:28:09

Javaweb---HTTPS

题记 为了保护数据的隐私性我们引入了HTTPS 加密的方式都有那些呢? 1.对称加密: 加密和解密使用的密钥是同一个密钥 2.非对称加密:有两个密钥(一对),分为公钥和私钥(公钥是公开的,私钥是要藏好的) HTTPS的工作过程(旨在对body和header进行加密) 1.对称加密 上述引出的…...

编程日记 2024/6/8 20:26:05

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

编程新知 2026/2/5 14:06:47

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2026/1/31 18:36:21

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

编程新知 2026/2/5 1:30:05

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

编程新知 2026/1/4 3:47:09

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2026/2/7 8:31:55

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

编程新知 2026/2/1 16:32:53

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2026/2/8 1:58:01

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

编程新知 2026/2/7 21:32:44

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

编程新知 2025/9/13 20:07:18

Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

编程新知 2025/10/4 21:24:40