这是我参与8月更文挑战的第5天，活动详情查看： 8月更文挑战
在使用 <template> 时必不可少的就是用到形形色色的指令, 在Vue3中官方给我们提供了14个常规指令和3个特殊指令 使用频次最高的只有8个左右, 某些指令的原形态和简化写法我们是应该都需要知道的.
接下来我们将学习所有的常规指令用法, 可能目前不一定全都会用到, 但是一定要知道.
v-text 更新文本
更新元素的 textContent。如果要更新部分的 textContent，需要使用 双括号语法{{}}(又叫Mustache 插值)。
<span v-text="msg"></span>
<!-- 等价于 -->
<span>{{msg}}</span>
v-html 更新HTML
更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。
<div v-html="html"></div>
v-show 显示隐藏
根据表达式的真假值，切换元素的 display CSS属性值。
当条件为true时, v-show内部什么都不做.
当条件为false时, v-show给定当前元素 display: none;
<div v-show="visible"></div>
v-if、v-else-if、v-else 条件判断
根据表达式的真假值来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template>，将提取它的内容作为条件块。
<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>
v-for 循环
模版循环, 类似JavaScript中的 for in 功能. 可以传入数组或对象
<div v-for="item in items">{{ item.text }}</div>
<div v-for="(item, index) in items"></div>
v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示：
<div v-for="item in items" :key="item.id">
{{ item.text }}
</div>
v-on 绑定事件
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 动态事件 -->
<button v-on:[event]="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 动态事件缩写 -->
<button @[event]="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter" />
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>
<!-- 对象语法 -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
v-bind 传递数据
动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。
<!-- 绑定 attribute -->
<img v-bind:src="imageSrc" />
<!-- 动态 attribute 名 -->
<button v-bind:[key]="value"></button>
<!-- 缩写 -->
<img :src="imageSrc" />
<!-- prop 绑定。"prop" 必须在 my-component 声明 -->
<my-component :prop="someThing"></my-component>
<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>
v-model 双向绑定
在表单控件或者组件上创建双向绑定。
<input v-model="message" />
<p>Message is: {{ message }}</p>
v-slot 插槽
提供具名插槽或需要接收 prop 的插槽。
<!-- 具名插槽 -->
<base-layout>
<template v-slot:header>
Header content
</template>
<template v-slot:default>
Default slot content
</template>
<template v-slot:footer>
Footer content
</template>
</base-layout>
<!-- 接收 prop 的具名插槽 -->
<infinite-scroll>
<template v-slot:item="slotProps">
<div class="item">
{{ slotProps.item.text }}
</div>
</template>
</infinite-scroll>
<!-- 接收 prop 的默认插槽，使用了解构 -->
<mouse-position v-slot="{ x, y }">
Mouse position: {{ x }}, {{ y }}
</mouse-position>
v-pre 原始
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
<span v-pre>{{ this will not be compiled }}</span>
v-cloak 隐蔽
这个指令保持在元素上直到关联组件实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 {{双括号}} 标签直到组件实例准备完毕。
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
解释一下:
当网速较慢，此时 Vue.js 文件还没有加载完毕，在页面会显示{{message}}的字样，直到Vue创建实例、编译模版时，DOM才会被替换，所以这个过程屏幕是有闪动的，需要配合CSS可以解决这个问题。
当我们使用webpack和vue-router时，项目中只有一个空的div元素，剩余的内容都是由路由去挂载不同组件完成的，所以不需要v-cloak。
v-once 仅一次渲染
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
<h1>comment</h1>
<p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令 -->
<ul>
<li v-for="i in list" v-once>{{i}}</li>
</ul>
