【Vue3入门】：Vue3中的模板语法有哪些？
最新回答
狗屎味的小仙女
2024-09-08 04:20:13
嗨~ 今天的你过得还好吗？
愿你付出甘之如饴
所得归于欢喜
- 2023.07.13 -
上期带大家认识了Vue 3 前端框架，并且了解了Vue 3值得关注的新特性。Vue.js 从版本 1.x 到版本 3.x，官方代码案例和推荐使用都是模板语法，那么本篇文章我们也根据官方的推荐，来了解一下模板语法是怎么一回事。
一、什么是模板语法
我们可以把 Vue.js 的模板语法，直接理解为 HTML 语法的一种扩展，它所有的模板节点声明、属性设置和事件注册等都是按照 HTML 的语法来进行扩展设计的。按照官方的说法就是“所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析”。
在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。
二、内容渲染指令
1、 v-text
使用 v-tex t指令，将数据采用纯文本方式填充其空元素中。
2、 {{ }} 插值表达式
在元素中的某一位置采用纯文本的方式渲染数据。
3、 v-html
使用 v-html 指令，将数据采用 HTML 语法填充其空元素中。
三、双向绑定指令
1、 v-model
v-model 双向数据绑定指令，视图数据和数据源同步。
一般情况下 v-model 指令用在表单元素中：
2、 v-model的修饰符
四、属性绑定指令
响应式地绑定一个元素属性，应该使用 v-bind：指令。如果绑定的值是 null 或者 undefined，那么该属性将会从渲染的元素上移除。因为 v-bind 非常常用，我们提供了特定的简写语法：
1、动态绑定多个属性值
直接使用 v-bind 来为元素绑定多个属性及其值
渲染结果：
2、 绑定class和style属性
class 和 style 可以和其他属性一样使用 v-bind 将它们和动态的字符串绑定；但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。
因此， Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强；除了字符串外，表达式的值也可以是对象或数组。
class属性绑定
绑定对象
绑定数组
style属性绑定
绑定对象
绑定数组
还可以给 :style 绑定一个包含多个样式对象的数组，这些对象会被合并后渲染到同一元素上。
五、条件渲染指令
1. v-if、v-else-if、v-else
2. v-show
3. v-if和v-show的区别
六、事件绑定指令
我们可以使用 v-on: 指令 (简写为@) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript，用法：v-on:click="" 或 @click=""。
1、事件修饰符
.prevent
.prevent ：阻止该事件的默认行为。
.stop
.stop ：阻止事件产生的冒泡现象。
.once
.once ：绑定的事件只触发 1 次。
.self
.self ：只有在 event.target 是当前元素自身时触发事件处理函数。
capture
.capture ：给元素添加一个监听器。
.passive
.passive ：不阻止事件的默认行为，与 .prevent 不要同时使用。
2、按键修饰符
按键别名：.enter、.tab、.esc、.space、.up、.down、.left、.right、.delete (捕获 Delete 和 Backspace 两个按键)。
系统修饰符：.ctrl、.alt、.shift、.meta。
准确的修饰符：.exact。
3、鼠标按键修饰符
鼠标按键修饰符：.left、.right、.middle。
七、列表渲染指令
使用 v-for 指令基于一个数组来渲染一个列表。
1、v-for渲染数组
语法：
2、v-for渲染对象
使用 v-for 来遍历一个对象的所有属性，遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。
语法：
1）in 前一个参数：value in object
2）in 前两个参数：(value, name) in object
3）in 前三个参数：(value, name, index) in object
3、 通过 key 管理状态
当列表的数据变化时，默认情况下，vue 会尽可能的复用已存在的 DOM 元素，从而提升渲染的性能；但这种默认的性能优化策略，会导致有状态的列表无法被正确更新。
为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲染的性能；此时，需要为每项提供一个唯一的key属性。
key 的注意事项：
以上就是Vue3中的模板语法，文中已经介绍的非常详细了，希望能够帮助你更快地掌握Vue3的使用，让你的前端开发更轻松！
我们下期再见！
END
文案编辑|云端学长
文案配图|云端学长
内容由：云端源想分享
热门标签
