1. 模板语法

1.1 文本插值，它使用的是“Mustache”语法 (即双大括号)：

Message: {{ msg }}
```
<span>Message: {{ msg }}</span>
```
1.2 Attribute 绑定
- 单值绑定
```
<div v-bind:id="dynamicId"></div>
```
v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。
- 如果你有像这样的一个包含多个 attribute 的 JavaScript 对象：
js
```
data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}
```
通过不带参数的 v-bind，你可以将它们绑定到单个元素上：

template
```
    <div v-bind="objectOfAttrs"></div>
```
1.3 调用函数#

可以在绑定的表达式中使用一个组件暴露的方法：

template
```
<span :title="toTitleDate(date)">
  {{ formatDate(date) }}
</span>
```
1.4 指令 Directives

指令是带有 v- 前缀的特殊 attribute。Vue 提供了许多内置指令，包括 v-bind 和 v-html。

指令 attribute 的期望值为一个 JavaScript 表达式 (除了少数几个例外，即之后要讨论到的 v-for、v-on 和 v-slot)。一个指令的任务是在其表达式的值变化时响应式地更新 DOM。

1.5 参数 Arguments#

某些指令会需要一个“参数”，在指令名后通过一个冒号隔开做标识。例如用 v-bind 指令来响应式地更新一个 HTML attribute：

template

<a v-bind:href="url"> ... </a>

<!-- 简写 -->
<a :href="url"> ... </a>

这里 href 就是一个参数，它告诉 v-bind 指令将表达式 url 的值绑定到元素的 href attribute 上。在简写中，参数前的一切 (例如 v-bind:) 都会被缩略为一个 : 字符。

另一个例子是 v-on 指令，它将监听 DOM 事件：

template

<a v-on:click="doSomething"> ... </a>

<!-- 简写 -->
<a @click="doSomething"> ... </a>

这里的参数是要监听的事件名称：click。v-on 有一个相应的缩写，即 @ 字符。

1.6 修饰符 Modifiers#

修饰符是以点开头的特殊后缀，表明指令需要以一些特殊的方式被绑定。例如 .prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault()：

template

<form @submit.prevent="onSubmit">...</form>

2. 条件渲染

2.1 v-if v-else-if v-else

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

2.2 v-show

<h1 v-show="ok">Hello!</h1>

2.2 v-if vs. v-show

v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。

v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。

相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。

总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

3. `v-for`

<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

4. 事件处理

我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="methodName" 或 @click="handler"。

4.1 内联事件处理器


data() {
  return {
    count: 0
  }
}



<button @click="count++">Add 1</button>
<p>Count is: {{ count }}</p>

4.2 方法事件处理器

<!-- `greet` 是上面定义过的方法名 --> 
<button @click="greet">Greet</button>

4.3 在内联事件处理器中访问事件参数

<!-- 使用特殊的 $event 变量 --> 
<button @click="warn('Form cannot be submitted yet.', $event)"> Submit </button> 
<!-- 使用内联箭头函数 --> 
<button @click="(event) => warn('Form cannot be submitted yet.', event)"> Submit </button>

methods: { warn(message, event) { 
    // 这里可以访问 DOM 原生事件 
    if (event) { 
        event.preventDefault() 
    } 
    alert(message) } 
}

4.4 事件修饰符

为解决这一问题，Vue 为 v-on 提供了事件修饰符。修饰符是用 . 表示的指令后缀，包含以下这些：

.stop
.prevent
.self
.capture
.once
.passive

<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>

<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>

<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>

<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如：事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>

5. 表单输入绑定

<input
  :value="text"
  @input="event => text = event.target.value">

v-model 指令帮我们简化了这一步骤：

<input v-model="text">

vue3（二）基础语法 : 模板语法及常用指令

1. 模板语法

2. 条件渲染

3. v-for

4. 事件处理

5. 表单输入绑定

3. `v-for`