在 Vue3 的世界里，模板语法是我们构建用户界面的基石。今天，让我们一起深入了解 Vue3 的模板语法，我将用通俗易懂的语言和实用的例子，带你掌握这项必备技能。
1、文本插值：最基础的开始
想在页面上显示数据？双大括号语法 就是你的好帮手！
2、插入 HTML： 指令
双大括号会将数据解释为纯文本，而不是 HTML。
如果想插入 HTML，需要使用 指令.
这里看到的 attribute 被称为一个指令。
指令由 作为前缀，表明它们是一些由 Vue 提供的特殊 attribute，它们将为渲染的 DOM 应用特殊的响应式行为。这里我们做的事情简单来说就是：在当前组件实例上，将此元素的 innerHTML 与 属性保持同步。
3 、绑定属性：让元素活起来
双大括号不能在 HTML attributes 中使用。
想要响应式地绑定一个 attribute，应该使用 指令。
（1）、常规 指令
测试案例：
运行结果：
（2）、简写
非常常用，简写语法：
开头为 的 attribute 可能和一般的 HTML attribute 看起来不太一样，但它的确是合法的 attribute 名称字符，并且所有支持 Vue 的浏览器都能正确解析它。此外，他们不会出现在最终渲染的 DOM 中。
（3）、布尔型 Attribute
对于布尔属性，常规值为 true 或 false，如果属性值为 null 或 undefined，则该属性不会显示出来。
（4）、类名和样式绑定
（5）、动态绑定多个值
如果有像这样的一个包含多个 attribute 的 JavaScript 对象：
通过不带参数的 ，可以将它们绑定到单个元素上：
使用案例：
输出结果：
(6)、使用 JavaScript 表达式
Vue 实际上在所有的数据绑定中都支持完整的 JavaScript 表达式：
这些表达式都会被作为 JavaScript ，以当前组件实例为作用域解析执行。
在 Vue 模板内，JavaScript 表达式可以被使用在如下场景上：
- 在文本插值中 (双大括号)
- 在任何 Vue 指令 (以 开头的特殊 attribute) attribute 的值中
仅支持单一表达式
每个绑定仅支持单一表达式，也就是一段能够被求值的 JavaScript 代码。一个简单的判断方法是是否可以合法地写在 后面。
下面的例子无效：
4、调用函数
可以在绑定的表达式中使用一个组件暴露的方法：
使用案例：
输出效果：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/164025.html