一、Vue3 的模板语法主要包括以下几个部分：
- 插值表达式：使用 {{}} 进行数据的展示。
- 指令：以 v- 开头，用于对元素进行操作。
- 计算属性：使用 computed 函数定义，可以缓存结果，只有当依赖的属性发生变化时才会重新计算。
- 侦听器：使用 watch 选项定义，可以监听某个数据的变化，并在变化时执行回调函数。
- 条件渲染：使用 v-if、v-else-if、v-else 进行条件判断。
- 列表渲染：使用 v-for 遍历数组或对象。
- 事件绑定：使用 v-on 或简写为 @ 绑定事件。
- 表单输入绑定：使用 v-model 实现双向数据绑定。
- Class 与 Style 绑定：使用 :class 和 :style 绑定类名和样式。
- v-bind：用于绑定属性。
- v-on：用于监听事件。
- v-once：只渲染一次。
- v-pre：跳过编译过程，直接显示原始内容。
- v-text：将纯文本渲染为 HTML。
- v-html：将 HTML 字符串渲染为元素。
- v-cloak：在编译过程中隐藏元素，直到编译完成。
- v-show：根据条件显示或隐藏元素。
- v-if、v-else-if、v-else：根据条件渲染元素。
- v-for：遍历数组或对象，生成元素。
- v-on：监听事件，触发回调函数。
- v-bind：绑定属性，动态更新属性值。
- v-model：实现双向数据绑定。
- v-slot：自定义插槽。
- v-directive：自定义指令。
下面是一个简单的 Vue3 模板语法实例：
<template> <div> <h1>{{ title }}</h1> <p>{{ content }}</p> <button @click="handleClick">点击我</button> <ul> <li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul> <input type="text" v-model="inputValue" /> <p>{{ inputValue }}</p> <div v-if="isShow">显示内容</div> <div v-else>隐藏内容</div> </div> </template> <script> export default { data() { return { title: "Vue3 模板语法", content: "这是一个简单的 Vue3 模板语法实例", items: ["苹果", "香蕉", "橙子"], inputValue: "", isShow: true, }; }, methods: { handleClick() { alert("按钮被点击了"); }, }, }; </script>
二、Vue3 模板语法主要包括以下几个部分：
- 插值表达式（Interpolation）
- 指令（Directive）
- 计算属性（Computed Property）
- 方法（Method）
- 事件监听（Event Listener）
- 条件渲染（Conditional Rendering）
- 列表渲染（List Rendering）
- 表单输入绑定（Form Input Binding）
- 组件实例化（Component Instancing）
下面是每个语法单独生成实例的教程：
- 插值表达式（Interpolation）
插值表达式用于在模板中显示数据。基本语法如下：
<div>{{ message }}</div> export default { data() { return { message: 'Hello, Vue!' }; } };
- 指令（Directive）
指令是带有 v- 前缀的特殊属性，用于在模板中添加行为。例如，v-if、v-else、v-for 等。
<!-- v-if --> <div v-if="show">Hello, Vue!</div> <!-- v-else --> <div v-else>Hello, World!</div> <!-- v-for --> <div v-for="(item, index) in items" :key="index">{{ item }}</div> export default { data() { return { show: true, items: ['apple', 'banana', 'orange'] }; } };
- 计算属性（Computed Property）
计算属性是基于它们的依赖进行缓存的。基本语法如下：
<div>{{ fullName }}</div> export default { data() { return { firstName: 'John', lastName: 'Doe' }; }, computed: { fullName() { return this.firstName + ' ' + this.lastName; } } };
- 方法（Method）
方法可以在模板中调用。基本语法如下：
<button @click="sayHello">点击我</button> export default { methods: { sayHello() { alert('Hello, Vue!'); } } };
- 事件监听（Event Listener）
事件监听用于在模板中监听元素上的事件。基本语法如下：
<button @click="handleClick">点击我</button> export default { methods: { handleClick() { alert('按钮被点击了'); } } };
- 条件渲染（Conditional Rendering）
条件渲染用于根据条件显示或隐藏元素。基本语法如下：
<div v-if="isShow">显示内容</div> <div v-else>隐藏内容</div> export default { data() { return { isShow: true }; } };
- 列表渲染（List Rendering）
列表渲染用于遍历数组并创建元素。基本语法如下：
<ul> <li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul> export default { data() { return { items: ['apple', 'banana', 'orange'] }; } };
- 表单输入绑定（Form Input Binding）
表单输入绑定用于将表单元素的值与组件的数据进行双向绑定。基本语法如下：
<input v-model="message" placeholder="请输入消息"> export default { data() { return { message: '' }; } };
- 组件实例化（Component Instancing）
组件实例化用于在模板中引入其他组件。基本语法如下：
<my-component></my-component> import MyComponent from './MyComponent.vue'; export default { components: { MyComponent } };
