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

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>

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

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

相关文章

瑞麦德机电设备将莅临2024第13届生物发酵展

瑞麦德机电设备将莅临2024第13届生物发酵展

参展企业介绍 河南瑞麦德机电设备有限公司是专业从事机械输送气力输送、称重配料、筛分、磁选设备研发和制造于一体的企业&#xff0c;公司采用国内外同行业产品的先进技术&#xff0c;经专业团队设计、研发、生产&#xff0c;产品满足“ISO9001”&#xff0c;“GMP”等标准要…
阅读更多...
超图新建三维数据集继续学习

超图新建三维数据集继续学习

1 新建三维数据集 之前操作过新建三维数据集&#xff0c;还不熟悉&#xff0c;继续熟悉&#xff1b; 现在有一个文件型的数据源&#xff0c;名为swtest1&#xff1b;它前面小图标上有UDX三个字母&#xff0c;表明这是一个UDX类型的数据源&#xff1b;在此数据源上右击&#x…
阅读更多...
LEAP模型的能源环境发展、碳排放建模预测及不确定性分析教程

LEAP模型的能源环境发展、碳排放建模预测及不确定性分析教程

原文链接&#xff1a;LEAP模型的能源环境发展、碳排放建模预测及不确定性分析教程https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247599754&idx4&sn243c9f8bff355235a7056c2cbb1331fa&chksmfa82076dcdf58e7b871c3369c95ead9ff1d90baa0431318b26b6abd27…
阅读更多...
剑指offer--数组中重复的数字

剑指offer--数组中重复的数字

一.题目描述 在一个长度为 n 的数组 nums 里的所有数字都在 0&#xff5e;n-1 的范围内。数组中某些数字是重复的&#xff0c;但不知道有几个数字重复了&#xff0c;也不知道每个数字重复了几次。请找出数组中任意一个重复的数字。 算法1.排序,然后遍历,时间复杂度O(nlogn),空…
阅读更多...
Flask Python:请求上下文和应用上下文

Flask Python:请求上下文和应用上下文

请求上下文和应用上下文详解 一、背景二、什么是上下文2.1、请求上下文2.2、应用上下文2.3、两种上下文的底层逻辑 三、写在最后 一、背景 在如何实现异步发送邮件的时候&#xff0c;遇到过这样一个报错 RuntimeError: Working outside of request context.This typically me…
阅读更多...
Mysql实战--为什么表数据删掉一半，表文件大小不变

Mysql实战--为什么表数据删掉一半，表文件大小不变

经常会有同学来问我&#xff0c;我的数据库占用空间太大&#xff0c;我把一个最大的表删掉了一半的数据&#xff0c;怎么表文件的大小还是没变&#xff1f; 那么今天&#xff0c;我就和你聊聊数据库表的空间回收&#xff0c;看看如何解决这个问题。 这里&#xff0c;我们还是针…
阅读更多...
搜索与图论——Prim算法求最小生成树

搜索与图论——Prim算法求最小生成树

在最小生成树问题里&#xff0c;正边和负边都没问题 朴素版prim算法 时间复杂度O(n^2) 生成树&#xff1a;每一次选中的t点&#xff0c;它和集合的距离对应的那条边&#xff0c;就是生成树的一条边 算法流程和dijkstra算法非常相似 #include<iostream> #include<cs…
阅读更多...
是否应该升级到ChatGPT 4.0？深度对比ChatGPT 3.5与4.0的差异

是否应该升级到ChatGPT 4.0？深度对比ChatGPT 3.5与4.0的差异

如果只是想简单地体验AI的魅力&#xff0c;感受大模型的独特之处&#xff0c;或是玩一玩文字游戏&#xff0c;那么升级至ChatGPT 4.0可能并非必需。然而&#xff0c;若你期望将AI作为提升工作学习效率的得力助手&#xff0c;那么我强烈建议你升级到ChatGPT 4.0。 如果你不知道…
阅读更多...
点点数据K参数加密逆向分析（RPC方案跟加密算法还原）

点点数据K参数加密逆向分析（RPC方案跟加密算法还原）

文章目录 1. 写在前面2. 接口分析3. 断点分析4. RPC调用5. 算法还原 【&#x1f3e0;作者主页】&#xff1a;吴秋霖 【&#x1f4bc;作者介绍】&#xff1a;擅长爬虫与JS加密逆向分析&#xff01;Python领域优质创作者、CSDN博客专家、阿里云博客专家、华为云享专家。一路走来长…
阅读更多...
设计模式——行为型——责任链模式Chain Of Responsibility

设计模式——行为型——责任链模式Chain Of Responsibility

请求类 public class ApproverRequest {private int type;//请求批准的类型private float price;//请求的金额private int id;//请求的编号 } 审批人抽象类 public abstract class ApproverPerson {protected ApproverPerson next;protected String name;//审批过程public a…
阅读更多...
【详细讲解语言模型的原理、实战与评估】

【详细讲解语言模型的原理、实战与评估】

&#x1f308;个人主页:程序员不想敲代码啊&#x1f308; &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家&#x1f3c6; &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提…
阅读更多...
【Java面试题系列】基础篇

【Java面试题系列】基础篇

目录 基本常识标识符的命名规则八种基本数据类型的大小&#xff0c;以及他们的封装类3*0.10.3返回值是什么short s1 1; s1 s1 1;有什么错? short s1 1; s1 1;有什么错?简述&&与&的区别&#xff1f;简述break与continue、return的区别&#xff1f;Arrays类的…
阅读更多...
【性能测试】性能场景收集与分析

【性能测试】性能场景收集与分析

本文章为学习笔记&#xff0c;内容是性能场景收集以及如何分析 压测场景 压测策略 系统架构梳理 性能场景设计-业务范围 分布式压测 指标监控
阅读更多...
Netty学习——源码篇10 Netty内存分配ByteBuf基础 备份

Netty学习——源码篇10 Netty内存分配ByteBuf基础 备份

1 初始ByteBuf ByteBuf是Netty整个结构中最为底层的模块&#xff0c;主要负责把数据从底层I/O读取到ByteBuf&#xff0c;然后传递给应用程序&#xff0c;应用程序处理完成后再把数据封装成ByteBuf写回I/O。所以&#xff0c;ByteBuf是直接与底层打交道的一层抽象。 2 ByteBuf的…
阅读更多...
计算机视觉的技术领域

计算机视觉的技术领域

计算机视觉是一门研究如何使计算机能够“看”和理解图像和视频的科学。它结合了图像处理、模式识别、机器学习、人工智能等多个领域的技术。以下是计算机视觉中的一些关键技术领域。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1. …
阅读更多...
Netty核心原理剖析与RPC实践11-15

Netty核心原理剖析与RPC实践11-15

Netty核心原理剖析与RPC实践11-15 11 另起炉灶&#xff1a;Netty 数据传输载体 ByteBuf 详解 在学习编解码章节的过程中&#xff0c;我们看到 Netty 大量使用了自己实现的 ByteBuf 工具类&#xff0c;ByteBuf 是 Netty 的数据容器&#xff0c;所有网络通信中字节流的传输都是…
阅读更多...
C++其他语法..

C++其他语法..

1.运算符重载 之前有一个案例如下所示 其中我们可以通过add方法将两个点组成一个新的点 class Point {friend Point add(Point, Point);int m_x;int m_y; public:Point(int x, int y) : m_x(x), m_y(y) {}void display() {cout << "(" << m_x <<…
阅读更多...
十四.PyEcharts基础学习

十四.PyEcharts基础学习

目录 1-PyEcharts介绍 优点&#xff1a; 安装: 官方文档&#xff1a; 2-PyEcharts快速入门 2.1 第一个图表绘制 2.2 链式调用 2.3 opeions配置项 2.4 渲染图片文件 2.5 使用主题 3-PyEcharts配置项 3.1 初始化配置项InitOpts InitOpts 3.2 全局配置项set_global_o…
阅读更多...
SQLBolt，一个练习SQL的宝藏网站

SQLBolt，一个练习SQL的宝藏网站

知乎上有人问学SQL有什么好的网站&#xff0c;这可太多了。 我之前学习SQL买了本SQL学习指南&#xff0c;把语法从头到尾看了个遍&#xff0c;但仅仅是心里有数的程度&#xff0c;后来进公司大量的写代码跑数&#xff0c;才算真真摸透了SQL&#xff0c;知道怎么调优才能最大化…
阅读更多...
时序数据库IoTDB：功能详解与行业应用

时序数据库IoTDB：功能详解与行业应用

一文读懂时序数据库 IoTDB。 01 为什么需要时序数据库 解释时序数据库前&#xff0c;先了解一下何谓时序数据。 时序数据&#xff0c;也称为时间序列数据&#xff0c;是指按时间顺序记录的同一统计指标的数据集合。这类数据的来源主要是能源、工程、交通等工业物联网强关联行业…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023