1. 插值表达式（Interpolation）：
使用双大括号 {{ }} 进行插值，将数据绑定到视图：
<div>
<p>{{ message }}</p>
</div>
2. 指令（Directives）：
指令是带有 v- 前缀的特殊属性，用于响应式地操作 DOM。一些常见的指令包括：
- v-bind： 将属性绑定到表达式。
<a v-bind:href="url">Link</a>
- v-model： 在表单元素上创建双向绑定。
<input v-model="username">
- v-if、v-else-if、v-else： 条件渲染。
<p v-if="isTrue">This is true</p>
<p v-else>This is false</p>
- v-for： 循环渲染。
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
3. 事件处理：
使用 v-on 指令监听 DOM 事件，并触发相应的方法：
<button v-on:click="handleClick">Click me</button>
4. 属性绑定和样式绑定：
使用对象语法进行动态属性绑定：
<button v-bind="{ disabled: isDisabled, 'aria-label': label }">Submit</button>
使用数组语法进行样式绑定：
<div v-bind:class="[isActive ? 'active' : '', errorClass]">Class binding</div>
5. 过滤器：
Vue 3.0 保留了过滤器的概念，但使用方式略有变化：
<!-- 过滤器在插值表达式中使用 -->
{{ message | capitalize }}
<!-- 在指令中使用 -->
<p v-bind:title="rawMessage | capitalize">Hover me</p>
6. Fragment（片段）：
使用 <template> 或 <> 和 </> 语法来创建多个根元素的片段：
<template>
<div>
<p>First paragraph</p>
<p>Second paragraph</p>
</div>
</template>
<!-- 或者使用片段语法 -->
<>
<p>First paragraph</p>
<p>Second paragraph</p>
</>
以上是 Vue 3.0 中一些常用的模板语法，它们可以帮助你构建响应式的用户界面。如果你需要更详细的信息，建议查阅 Vue.js 3.0 的官方文档，其中包含了更多的模板语法和示例。
转载请注明出处：http://www.zyzy.cn/article/detail/482/Vue 3.0