Vue3——模板语法(文本插值、vue内置指令)

文章目录

  • 文本插值{{}}
  • 受限的全局访问
  • 指令Directives
    • 指令的参数
    • 指令的修饰符
    • vue3的内置指令
      • 渲染文本内容(v-text)
      • 渲染html (v-html)
      • 单项绑定(v-bind)
        • 单项绑定的使用
        • 单项绑定v-bind的简写
        • 同名简写
        • 动态绑定多个值
        • 修饰符
      • 双向绑定(v-modal)
        • 简写
        • 响应式
        • 修饰符
        • 适用范围限制
      • 控制元素可见性( v-show )
      • 条件渲染(v-if)
      • v-else
      • v-else-if
      • 循环渲染(v-for)
      • 事件绑定( v-on)
        • 简写
        • 修饰符
        • 动态事件
      • 插件绑定(v-slot)
        • 标签限制
      • 原样渲染( v-pre)
      • 单次渲染(v-once)
      • 缓存更新(v-memo)
        • 使用
        • 与 v-for 一起使用
      • v-cloak

Vue 使用一种基于 HTML 的模板语法,使我们能够 声明式地将其组件实例的数据绑定到呈现的 DOM 上。

文本插值{{}}

最基本的数据绑定形式是文本插值{{}},即双大括号,双大括号里面的值是js表达式,常见的有:变量、三元表达式等。

<span>Message: {{ msg }}</span>

双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。

受限的全局访问

模板中的表达式将被沙盒化,仅能够访问到有限的全局对象列表

	沙盒化:将运行的模板隔离在特定的环境中,避免应用的其他模板对改模板造成影响。

全局对象列表中会暴露常用的内置全局对象,比如 Math 和 Date。没有显式包含在列表中的全局对象将不能在模板内表达式中访问,例如用户附加在 window 上的属性。然而,你也可以自行在 app.config.globalProperties 上显式地添加它们,供所有的 Vue 表达式使用。

指令Directives

指令是带有 v- 前缀的特殊 attribute。Vue 提供了许多内置指令。

  • 一个指令的任务是在其表达式的值变化时响应式地更新 DOM

指令的参数

  • 某些指令会需要一个参数,在指令名后通过一个冒号隔开做标识。
<a v-bind:href="url"> ... </a>
<a v-on:click="doSomething"> ... </a>
  • 指令的参数也可以是动态的,使用中括号[]包裹就可以了。
<a v-bind:[attributeName]="url"> ... </a>
<!-- 简写 -->
<a :[attributeName]="url"> ... </a>
<a v-on:[eventName]="doSomething"> ... </a>
<!-- 简写 -->
<a @[eventName]="doSomething"> ... </a>
  • 动态参数的限制条件
    • 动态参数中表达式的返回值应该是一个字符串,或者是 null
    • 动态参数的表达式中不应该出现空格和引号,如果必须用,建议使用计算属性来代替
<!-- 这会触发一个编译器警告 -->
<a :['foo' + bar]="value"> ... </a>
如果是直接编写在html中的模板,我们需要避免在名称中使用大写字母,因为浏览器会强制将其转换为小写:
<a :[someAttr]="value"> ... </a> 
面的例子将会在 DOM 内嵌模板中被转换为 :[someattr]。
如果变量的取值是“someAttr”是,将会在 DOM 内嵌模板中被转换为 :someattr。
且你的组件拥有 “someAttr” 属性而非 “someattr”,这段代码将不会工作。单位文件组件没有此限制

指令的修饰符

指令也可以添加修饰符,修饰符是是以.开头的特殊后缀:

<form @submit.prevent="onSubmit">...</form>

.prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault()

vue3的内置指令

渲染文本内容(v-text)

用于渲染元素的文本内容。
原理:v-text 通过设置元素的 textContent 属性来工作,因此它将覆盖元素中所有现有的内容

<span v-text="msg"></span>
<!-- 等同于 -->
<span>{{msg}}</span>

渲染html (v-html)

如果有一个变量存储一段html的字符串,可以被渲染成对应的节点,直接使用文本插值v-text的方法是没有办法将该变量渲染成html片段的
这是因为,双大括号会将数据解释为纯文本,而不是 HTML。若想插入 HTML,你需要使用 v-html 指令:

<p>Using v-html directive: <span v-html="rawHtml"></span></p>
	在单文件组件,scoped 样式将不会作用于 v-html 里的内容,因为 HTML 内容不会被 Vue 的模板编译器解析。可是使用全局的css样式来为v-html中的内容添加样式

单项绑定(v-bind)

动态的绑定一个或多个 attribute,也可以是组件的 prop
当用于组件 props 绑定时,所绑定的 props 必须在子组件中已被正确声明。

单项绑定的使用

使用
属性名之前使用 v-bind:指令,使用该指令表示该属性的属性值是一个js表达式 ,js表达式会通过vue实例获取值然后再赋值给该属性:

<div v-bind:id="dynamicId"></div>

单项绑定v-bind:的作用就是将变量赋值给标签的属性,同时标签的属性值会随着变量的变化而变化。

响应式
如果通过v-bind绑定的变量是响应式的,那么,当变量修改时就会触发v-bind重新获取最新的值,将最新的值赋值给属性。从而达到变量值一修改对应的属性值就修改的效果。这种效果正是我们想要的。

单项绑定v-bind的简写

因为 v-bind 非常常用,我们提供了特定的简写语法:, 即v-bind:属性可以直接简写成:属性
上述案例简写为

<div :id="dynamicId"></div>
同名简写

如果 attribute 的名称绑定的 JavaScript 值的名称相同,那么可以进一步简化语法,省略 attribute 值:

<!--:id="id" 相同 -->
<div :id></div><!-- 这也同样有效,不简写v-bind,之简写名称 -->
<div v-bind:id></div>
动态绑定多个值

如果一个标签含有多个单项绑定的属性值,可以使用v-bind的对象模式进行绑定。
eg:

const objectOfAttrs = {id: 'container',class: 'wrapper'
}

通过不带参数的v-bind可以将他们绑定到单个元素上

<div v-bind="objectOfAttrs"></div>

此时div就被绑定了名为idclass的了两个属性值

修饰符
  • .camel - 将短横线命名的 attribute 转变为驼峰式命名。

  • .prop - 强制绑定为 DOM property。

  • .attr - 强制绑定为 DOM attribute。

  • 作为prop使用的时候可以简写成.

<div :someProperty.prop="someObject"></div>
<!-- 等同于 -->
<div .someProperty="someObject"></div>

双向绑定(v-modal)

在表单输入元素或组件上创建双向绑定。也需要指定属性值,一般属性值就是value,绑定格式是v-model:value="绑定的值"

<input v-model:value="model" />
简写

因为绑定的属性值一般都是value,所以value可以简写

<input v-model="model" />
响应式

双向绑定带来的效果是:当表单元素绑定的值修改,页面上表单的输入值也会修改(v-bind也能实现);而且当页面表单的输入只修改后,表单元素绑定的值也会修改(v-bind无法实现)。

修饰符
  • .lazy - 监听 change 事件而不是 input
  • .number - 将输入的合法字符串转为数字
  • .trim - 移除输入内容两端空格
适用范围限制

v-model的使用仅限输入组件

  • <input>
  • <select>
  • <textarea>

控制元素可见性( v-show )

基于表达式值的真假性,来改变元素的可见性。
原理:v-show 通过设置内联样式的 display CSS 属性来工作。当条件改变时,也会触发过渡效果。

条件渲染(v-if)

基于表达式值的真假性,来条件性地渲染元素。
原理:当 v-if 元素被触发,元素及其所包含的指令/组件都会销毁和重构。如果初始条件是假,那么其内部的内容根本都不会被渲染。

所以v-showv-if的区别是:
v-if会销毁元素,v-show只是修改元素的属性。

	如果需要频繁切换显示状态,v-show效率更高。如果元素可能永远都不需要被显示出来,那就使用v-if。

v-else

表示 v-if 链式调用的else 块,无需传入表达式。
限定:上一个兄弟元素必须有 v-ifv-else-if

<div v-if="Math.random() > 0.5">Now you see me
</div>
<div v-else>Now you don't
</div>

v-else-if

表示 v-if 的else if 块。可以进行链式调用。
限定:上一个兄弟元素必须有 v-ifv-else-if

循环渲染(v-for)

基于原始数据多次渲染元素或模板块。

<div v-for="(item, index) in array"></div>
<div v-for="(value, key) in object"></div>

当同时使用 v-ifv-for时 , v-if 比 v-for 优先级更高。我们并不推荐在一元素上同时使用这两个指令 。

事件绑定( v-on)

给元素绑定事件监听器。事件类型由参数来指定。

  • 当用于普通元素,只监听原生 DOM 事件。
  • 当用于自定义元素组件,则监听子组件触发的自定义事件。
<!-- 方法处理函数 -->
<button v-on:click="doThis"></button>
简写

v-on:可以简写成@

<!-- 方法处理函数 -->
<button @click="doThis"></button>
修饰符
  • .stop - 调用 event.stopPropagation(),阻止冒泡。
  • .prevent - 调用 event.preventDefault(),阻止默认事件。
  • .capture - 在捕获模式添加事件监听器。
  • .self - 只有事件从元素本身发出才触发处理函数。
  • .{keyAlias} - 只在某些按键下触发处理函数。
  • .once - 最多触发一次处理函数。
  • .left - 只在鼠标左键事件触发处理函数。
  • .right - 只在鼠标右键事件触发处理函数。
  • .middle - 只在鼠标中键事件触发处理函数。
  • .passive - 通过 { passive: true } 附加一个 DOM 事件。
<!-- 停止传播 -->
<button @click.stop="doThis"></button><!-- 阻止默认事件 -->
<button @click.prevent="doThis"></button><!-- 不带表达式地阻止默认事件 -->
<form @submit.prevent></form><!-- 链式调用修饰符 -->
<button @click.stop.prevent="doThis"></button><!-- 按键用于 keyAlias 修饰符-->
<input @keyup.enter="onEnter" />
动态事件

事件名对应的变量用[]括起来

<!-- 动态事件 -->
<button v-on:[event]="doThis"></button><!-- 使用缩写的动态事件 -->
<button @[event]="doThis"></button>

插件绑定(v-slot)

用于声明具名插槽或是期望接收 props 的作用域插槽
插槽的使用方法,可以点这里进行查看

标签限制
  • <template>标签上使用。
  • components 组件上使用
<!-- 具名插槽 -->
<BaseLayout><template v-slot:header>Header content</template><template v-slot:default>Default slot content</template><template v-slot:footer>Footer content</template>
</BaseLayout><!-- 接收 prop 的具名插槽 -->
<InfiniteScroll><template v-slot:item="slotProps"><div class="item">{{ slotProps.item.text }}</div></template>
</InfiniteScroll><!-- 接收 prop 的默认插槽,并解构 -->
<Mouse v-slot="{ x, y }">Mouse position: {{ x }}, {{ y }}
</Mouse>

原样渲染( v-pre)

跳过该元素及其所有子元素的编译。
元素内具有 v-pre,所有 Vue 模板语法都会被保留并按原样渲染:如果变迁中有插值语法{{}},就会显示原始双大括号标签及内容。

<span v-pre>{{ this will not be compiled }}</span>

单次渲染(v-once)

仅渲染元素和组件一次,并跳过之后的更新。
在随后的重新渲染,元素/组件及其所有子项将被当作静态内容并跳过渲染。这可以用来优化更新时的性能。

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 带有子元素的元素 -->
<div v-once><h1>comment</h1><p>{{msg}}</p>
</div>
<!-- 组件 -->
<MyComponent v-once :comment="msg" />
<!-- `v-for` 指令 -->
<ul><li v-for="i in list" v-once>{{i}}</li>
</ul>

缓存更新(v-memo)

用来缓存一个模板的子树。在元素和组件上都可以使用。

使用

为了实现缓存,该指令需要传入一个固定长度的依赖值数组进行比较。如果数组里的每个值都与最后一次的渲染相同,那么整个子树的更新将被跳过。
举例来说:

<div v-memo="[valueA, valueB]">...
</div>

当组件重新渲染,如果 valueA 和 valueB 都保持不变,这个 <div> 及其子项的所有更新都将被跳过。

v-memo 传入空依赖数组 (v-memo=“[]”) 将与 v-once 效果相同。

与 v-for 一起使用

v-memo 仅用于性能至上场景中的微小优化,应该很少需要。最常见的情况可能是有助于渲染海量 v-for 列表 (长度超过 1000 的情况):

<div v-for="item in list" :key="item.id" v-memo="[item.id === selected]"><p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p><p>...more child nodes</p>
</div>

默认情况下,当组件的 selected 状态改变,就会重新渲染,默认会重新创建大量的 vnode,尽管绝大部分都跟之前是一模一样的。
v-memo 用在这里本质上是在说:“只有当该项的被选中状态改变时才需要更新”。
当搭配 v-for 使用 v-memo,确保两者都绑定在同一个元素上。v-memo 不能用在 v-for 内部。

v-cloak

用于隐藏尚未完成编译的DOM模板。

问题: 当使用直接在 DOM 中书写的模板时,可能会出现一种叫做“未编译模板闪现”的情况:用户可能先看到的是还没编译完成的双大括号标签,直到挂载的组件将它们替换为实际渲染的内容。

解决: v-cloak可以解决这一问题,v-cloak在模板编译之前会保留在所绑定的元素上,直到相关组件实例被挂载后才移除。一般v-clock有一个对应的[v-clock]样式,通过该样式编写该模块在编译完成之前显示的内容。

<div v-cloak>{{ message }}
</div>
[v-cloak] {display: none;
}

直到编译完成前,

将不可见。

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

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

相关文章

机器学习 | 探索朴素贝叶斯算法的应用

朴素贝叶斯算法是一种基于贝叶斯定理和特征条件独立假设的分类算法。它被广泛应用于文本分类、垃圾邮件过滤、情感分析等领域&#xff0c;并且在实际应用中表现出色。 朴素贝叶斯法是基于贝叶斯定理与特征条件独立假设的分类方法&#xff1a; 1&#xff09;对于给定的待分类项r…

达梦数据库主备切换知识

一、切换模式 达梦数据库主备切换分为主动切换和被动切换模式 primary:主库状态 standby:备库状态 suspend;挂起状态,数据库会变成只读模式 主库正常切换的前提: 1、监视器正常 2、接管备库是 Standby 模式、Open 状态。 二、监视器模式 MON_DW_CONFIRM为1时为确认监视…

Architecture Lab:Part C【流水线通用原理/Y86-64的流水线实现/实现IIADDQ指令】

目录 任务描述 知识回顾 流水线通用原理 Y86-64流水线实现&#xff08;PIPE-与PIPE&#xff09; 开始实验 IIADDQ指令的添加 优化 ncopy.ys 仅用第四章知识&#xff0c;CEP11.55 8x1展开&#xff0c;CPE9.35 8x1展开2x1展开消除气泡&#xff0c;CPE8.10 流水线化通过…

算法每日一题: 使用循环数组所有元素相等的最少秒数 | 哈希

大家好&#xff0c;我是星恒&#xff0c;今天给大家带来的是一道需要感觉规律的题目&#xff0c;只要读懂题目中的规律&#xff0c;就可以做出来了 这道题用到了哈希&#xff0c;还有一个关键点比较类似循环队列 题目&#xff1a;leetcode 2808 给你一个下标从 0 开始长度为 n…

C++ 值传递,引用传递,以及指针传递

值传递&#xff1a; 直接复制变量值给函数使用&#xff0c;函数内部不影响原变量。 引用传递&#xff1a; 不复制变量&#xff0c;而是提供对原变量的直接访问&#xff0c;函数内部操作可改变原变量值。 指针传递&#xff1a; 通过传递变量地址间接访问和操作变量&#xff0c;提…

Postman发送带登录信息的请求

环境&#xff1a;win10Postman10.17.7 假设有个请求是这样的&#xff1a; RequiresPermissions("tool:add") PostMapping(value"/predict") ResponseBody /** * xxx * param seqOrderJson json格式的参数 * return */ public String predictSampleIds(Req…

svg基础(三)分组、渐变

上一篇文章简单介绍了svg常用标签及其属性,本篇主要介绍分组&#xff0c;渐变 1 分组<g> 分组容器 添加到g元素上的变换会应用到其所有的子元素上添加到g元素的属性会被其所有的子元素继承定义复杂对象&#xff0c;可通过<use>元素引用 1.1 分组 <svg>&…

EasyExcel分页上传数据

EasyExcel分页上传数据 一、实例 controller上传入口 PostMapping("/upload")ResponseBodyLog(title "导入工单", businessType BusinessType.IMPORT)public AjaxResult uploadFile(HttpServletRequest request, MultipartFile files) throws Exceptio…

Node.js+Express+Mysql服务添加环境变量

1、使用dotenv插件 1&#xff09;安装插件&#xff1a;npm install dotenv-cli --save-dev 2&#xff09;在项目根目录下添加对应的 .env 配置文件&#xff1b; // .env配置文件内容 MODEdevelopment, BASE_URLhttp://127.0.0.1:80813) 在启动命令中设置对应的加载文件&#…

springboot159基于springboot框架开发的景区民宿预约系统的设计与实现

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的 适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考&#xff0c; 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负。 看运行截图看 第五章 第四章 获取资料方式 **项…

STM32内部Flash

目录 一、内部Flash简介 二、内部Flash构成 1. 主存储器 2. 系统存储区 3. 选项字节 三、内部Flash写入过程 1. 解锁 2. 页擦除 3. 写入数据 四、工程空间分布 某工程的ROM存储器分布映像&#xff1a; 1. 程序ROM的加载与执行空间 2. ROM空间分布表 一、内部Flash…

2024.3.28-29日ICVS-AI智能汽车产业峰会(杭州)

本次安策将携手泰雷兹一起&#xff0c;参展ICVS2024第四届AI智能汽车产业峰会(杭州)&#xff0c;2024年3月28日-29日&#xff0c;欢迎新老朋友参加和莅临27号展台交流。 随着自动驾驶汽车政策密集落地。从我国四部门联合发布《关于开展智能网联汽车准入和上路通行试点工作的通知…

【0256】揭晓pg内核中MyBackendId的分配机制(后端进程Id,BackendId)(二)

上一篇:【0255】揭晓pg内核中MyBackendId的分配机制(后端进程Id,BackendId)(一) 文章目录 1. 前言2. 分配BackendId2.1 何时为backend process分配BackendId2.1.1 找出未使用的slot(inactive slot)2.3 BackendId序号从多少开始?2.4 后端进程退出后,其BackendId被释放…

【头歌·计组·自己动手画CPU】一、计算机数据表示(讲解版) 【计算机硬件系统设计】

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux &#x1f618;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &#x1f3c7;码字不易&#xff0c;你的&#x1f44d;点赞&#x1f64c;收藏❤️关注对我真的很重要&…

五、Redis之发布订阅及事务管理

5.1 发布订阅 5.1.1 Redis 发布订阅 (pub/sub) 是一种消息通信模式&#xff1a;发送者 (pub) 发送消息&#xff0c;订阅者 (sub) 接收消息。Redis 客户端可以订阅任意数量的频道。下图展示了频道 channel1 &#xff0c;以及订阅这个频道的三个客户端 —— client1 、client2 …

力扣题目-1633.各赛事的用户注册率

力扣题目-1633.各赛事的用户注册率 仅作学习&#xff0c;不作他用 题干 用户表&#xff1a; Users Column NameTypeuser_namevarcharuser_idint user_id 是该表的主键(具有唯一值的列)。 该表中的每行包括用户 ID 和用户名。 注册表&#xff1a; Register Column NameTy…

C入门番外篇——C, Are you OK?

今日路上看到一个车牌&#xff0c;52U0K&#xff0c;感觉很有意思&#xff0c;如果做一下简单的翻译就是&#xff0c;“我爱你&#xff0c;好么&#xff1f;” 这样让我脑子中闪现了这样的一个画面&#xff1a;“一个男生追一个女生&#xff0c;看到女生不怎么搭理自己的样子&a…

Spring核心基础:全面总结Spring中提供的那些基础工具类!

内容概要 Spring Framework 提供了众多实用的工具类&#xff0c;这些工具类在简化开发流程、提升代码质量和维护性方面发挥了重要作用&#xff0c;以下是部分关键工具类的总结及其使用场景&#xff1a; StringUtils&#xff1a;不仅提供了基础的字符串操作&#xff0c;如拼接…

转融通业务是什么?好处和弊端是什么?

转融通业务是指证券金融公司借入证券、筹得资金后&#xff0c;再转借给证券公司&#xff0c;为证券公司开展融资融券业务提供资金和证券来源&#xff0c;包括转融券业务和转融资业务两部分。从证券金融公司角度看&#xff0c;向证券公司提供资金和证券供其开展融资融券业务&…

Redis中的缓存穿透、雪崩、击穿的原因以及解决方案(详解)

一、概述 ① 缓存穿透&#xff1a;大量请求根本不存在的key&#xff08;下文详解&#xff09; ② 缓存雪崩&#xff1a;redis中大量key集体过期&#xff08;下文详解&#xff09; ③ 缓存击穿&#xff1a;redis中一个热点key过期&#xff08;大量用户访问该热点key&#xff0c;…