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

news/2024/6/16 10:48:54/文章来源:https://blog.csdn.net/weixin_41821642/article/details/137076097

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-bindv-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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1034136.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

COCO数据集——B站课程学习笔记

COCO数据集——B站课程学习笔记 因为要对coco数据格式的数据集进行切片&#xff0c;但对于coco数据集的结构及pycocotools不熟导致走了很多弯路&#xff0c;还有就是对字典格式的使用&#xff0c;需要取对原字典复制后的进行取出&#xff0c;否则就会改变原字典&#xff0c;真…

公司服务器被.rmallox攻击了如何挽救数据?

公司服务器被.rmallox攻击了如何挽救数据&#xff1f; .rmallox这种病毒与之前的勒索病毒变种有何不同&#xff1f;它有哪些新的特点或功能&#xff1f; .rmallox勒索病毒与之前的勒索病毒变种相比&#xff0c;具有一些新的特点和功能。这种病毒主要利用加密技术来威胁用户&am…

【攻防世界】warmup (代码审计)

进入题目环境&#xff0c;只有一个表情&#xff1a; ctrl u 查看源代码&#xff1a; 源代码提示我们访问 /source.php。访问结果如下&#xff1a; 我们进行代码审计&#xff0c;发现解题的关键点 include &_REQUEST[file]。但是题目使用了白名单进行了过滤。我们发现白名单…

【JavaEE初阶系列】——多线程案例三——定时器

目录 &#x1f6a9;定时器是什么 &#x1f6a9;标准库中的定时器 &#x1f6a9;自定义定时器 &#x1f388;构造Task类 &#x1f4dd;相对时间和绝对时间 &#x1f388;构造MyTime类 &#x1f4dd;队列空和队列不为空 &#x1f4dd;wait(带参)解决消耗资源问题 &#…

Redis.配置文件

基础篇Redis 6.1.2 .配置文件 spring:redis:host: 192.168.150.101port: 6379password: 123321lettuce:pool:max-active: 8 #最大连接max-idle: 8 #最大空闲连接min-idle: 0 #最小空闲连接max-wait: 100ms #连接等待时间6.1.3.测试代码 SpringBootTest class RedisDemo…

ios启动页与flutter启动页无缝衔接,无闪烁和黑屏解决

1、首先需要配置原生的 LaunchScreen 如下图&#xff1a; 注意&#xff1a;LaunchScreen中View的SafeArea 一定要有。如果这里没有SafeArea就会出现flutter渲染第一帧和native衔接时出现闪烁的现象。splash.png也尽量放在根目录中&#xff0c;不要放在Assets中。 2、flutter启…

【MySQL系列】使用 ALTER TABLE 语句修改表结构的方法

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

设计模式深度解析:深入浅出的揭秘游标尺模式与迭代器模式的神秘面纱 ✨

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 深入浅出的揭秘游标尺模式与迭代器模式的神秘面纱 开篇&#xff1a; 欢迎来到设计模式的神秘…

租用2核4G云服务器优惠价格,阿里云腾讯云京东云报价

当前最新2核4G云服务器多少钱&#xff1f;165元一年&#xff0c;30元3个月。阿里云2核4G服务器165元一年&#xff0c;30元3个月、腾讯云2核4G5M服务器165元一年、京东云2核4G云主机126元1年&#xff0c;华为云也提供2核4G配置云服务器。阿腾云atengyun.com整理2024年最新云服务…

iPad Pro安装Code APP结合内网穿透实现公网SSH远程连接服务器云开发

文章目录 1. 在iPad下载Code APP2.安装cpolar内网穿透2.1 cpolar 安装2.2 创建TCP隧道 3. iPad远程vscode4. 配置固定TCP端口地址4.1 保留固定TCP地址4.2 配置固定的TCP端口地址4.3 使用固定TCP地址远程vscode 本文主要介绍开源iPad应用IDE Code App 如何下载安装&#xff0c;并…

【网络安全技术】——密码技术基础与身份认证技术(学习笔记)

&#x1f4d6; 前言&#xff1a;加密技术是目前网络安全的基础。数据加密技术是指对在网络中所发送的明文消息用加密密钥加密成密文进行传送&#xff0c;接收方用解密密钥进行解密再现明文消息&#xff0c;从而保证传输过程中密文信息即使被泄漏&#xff0c;在无密钥的情况下仍…

【Linux】体验一款开源的Linux服务器运维管理工具

今天为大家介绍一款开源的 Linux 服务器运维管理工具 - 1panel。 一、安装 根据官方那个提供的在线文档&#xff0c;这款工具的安装需要执行在线安装&#xff0c; # Redhat / CentOScurl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o quick_start…

【Linux】UnixBench介绍、分数调优思路以及测试2D3D的方法

一.简介 unixbench是一个用于测试unix系统性能的工具&#xff0c;也是一个比较通用的benchmark&#xff0c; 此测试的目的是对类Unix 系统提供一个基本的性能指示&#xff0c;很多测试用于系统性能的不同方面&#xff0c;这些测试的结果是一个指数值&#xff08;index value&am…

在遭受攻击时如何有效监测服务器流量峰值——实战指南

引言 在网络安全领域&#xff0c;分布式拒绝服务攻击&#xff08;DDoS&#xff09;是一种常见的针对服务器及网络资源的恶意行为&#xff0c;它通过短时间内发送大量无效请求&#xff0c;导致服务器不堪重负而无法正常服务合法用户。当服务器遭受攻击时&#xff0c;快速识别并…

实测梳理一下kafka分区分组的作用

清空topickafka-topics.sh --bootstrap-server localhost:9092 --delete --topic second创建分区kafka-topics.sh --create --bootstrap-server localhost:9092 --replication-factor 1 --partitions 3 --topic second发kafka-console-producer.sh --bootstrap-server localhos…

Linux系统下安装jdk与tomcat【linux】

一、yum介绍 linux下的jdk安装以及环境配置&#xff0c;有两种常用方法&#xff1a; 1.使用yum一键安装。 2.手动安装&#xff0c;在Oracle官网下载好需要的jdk版本&#xff0c;上传解压并配置环境。 这里介绍第一种方法&#xff0c;在此之前简单了解下yum。 yum 介绍 yum&…

MySQL生产环境常见故障及解决方案汇总

MySQL生产环境常见故障及解决方案汇总 1. MySQL主从同步异常故障1.1. 情景说明1.2. 排查过程1.3. 数据同步2. MySQL慢查询故障1. MySQL主从同步异常故障 1.1. 情景说明 MySQL主库网卡需要更换IP地址,并将原IP地址配置为MySQL集群的VIP地址,上层应用程序其实不需要更改连接My…

vue项目打包优化之-productionSourceMap设置

productionSourceMap 是一个用于配置生产环境下是否生成 source map 文件的选项。在 webpack 中&#xff0c;source map 文件是一种映射关系文件&#xff0c;可以将编译后的代码映射回原始源代码&#xff0c;方便开发者在调试时定位问题。 在生产环境中&#xff0c;通常不建议暴…

深入探讨Docker in Docker:原理与实战指南

在软件开发和部署中&#xff0c;容器化技术已经成为一个不可或缺的工具。而在使用Docker进行容器化时&#xff0c;有时可能会遇到需要在一个Docker容器中运行另一个Docker容器的情况&#xff0c;这就是所谓的"Docker in Docker"&#xff08;简称DinD&#xff09;。本…

观察和配置MAC地址表

目录 原理概述 实验目的 实验内容 实验拓扑 ​编辑1&#xff0e;基本配置 2.观察正常状态时的MAC地址表 4.配置静态MAC地址表项 原理概述 MAC 地址表是交换机的一个核心组成部分&#xff0c;交换机主要是根据 MAC 地址表来进行帧的转发的。交换机对帧的转发操作行为一共有…