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

Vue2之模板语法

news 2026/1/31 21:13:03

文章目录

  • 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

19c补丁后oracle属主变化，导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

编程新知 2026/1/27 10:50:07

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

编程新知 2026/1/27 18:11:42

Linux 文件类型，目录与路径，文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

编程新知 2026/1/24 21:40:53

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

编程新知 2026/1/20 7:07:44

脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

编程新知 2025/11/19 22:56:53

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/12/12 0:56:22

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

编程新知 2026/1/31 5:09:27

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

编程新知 2026/1/29 17:56:19

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

编程新知 2025/10/19 5:14:05

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/12/31 6:28:08