第2节：Vue3 模板语法

Vue3 的模板语法主要包括以下几个部分：

1. 插值表达式：使用双大括号 { { }} 包裹变量，可以直接在模板中显示变量的值。

<div>{
  { message }}</div>

2. 指令：以 v- 开头，后面跟一个自定义的名字，用于操作 DOM 元素。

<!-- 绑定点击事件 -->
<button v-on:click="handleClick">点击我</button>

<!-- 条件渲染 -->
<p v-if="seen">现在你看到我了</p>
<p v-else>你现在看不到我</p>

3. 事件监听：使用 v-on 或简写为 @ 监听事件。

<!-- 监听点击事件 -->
<button @click="handleClick">点击我</button>

4. 表单输入绑定：使用 v-model 实现双向数据绑定。

<!-- 输入框双向绑定 -->
<input v-model="message" placeholder="edit me">

5. 列表渲染：使用 v-for 指令遍历数组或对象生成列表。

<!-- 遍历数组 -->
<ul>
  <li v-for="item in items">{
  { item }}</li>
</ul>

<!-- 遍历对象 -->
<ul>
  <li v-for="(value, key) in myObject">{
  { key }}: {
  { value }}</li>
</ul>

6. 计算属性：使用 computed 属性创建计算属性。

computed: {
   
  fullName() {
   
    return this.firstName + ' ' + this.lastName;
  }
}

7. 方法：在组件中定义方法，可以使用 methods 属性。

methods: {
   
  handleClick() {
   
    alert('按钮被点击了！');
  }
}

订阅专栏，每日更新

第3节：Vue3 v-bind指令