指令——v-text ，v-html， v-show ，v-if v-else v-else-if ，v-for ，v-on ，v-bind ，v-model， v-slot ，v-pre ，v-once， v-memo ，v-cloak

指令综述

指令	作用
v-text	通过设置元素的textContent属性来工作，因此它将覆盖元素内的任何现有内容。如果你需要更新
v-html	作为纯html插入，不会处理Vue模板语法。（谨慎使用）可尝试改用组件来重新考虑解决方案，在网站上动态呈现任意html可能非常危险，它很容易导致XSS攻击。仅用于v-html受信任的内容，切勿用于用户提供的内容。
v-show	本质是display: none; / block
v-if / v-else / v-else-if	是真的条件渲染
v-for	遍历数据渲染
v-on	语法糖：@
v-bind	动态绑定数据，语法糖：:
v-model	动态绑定文本，仅用于input，select，textarea标签
v-slot	插槽有默认插槽和具名插槽
v-pre	所有 Vue 模板语法都将被保留并按原样呈现。最常见的用例是显示原始胡须标签。就是{{}}这个
v-once	仅渲染元素和组件一次，并跳过以后的更新。常用于某些通过v-for创建的静态节点
v-memo	当v-memo的值没有改变的时候，直接跳过VNode的创建，在大列表，大表单中用来挤挤性能有一定的效果（虽然不常用）
v-cloak	防止在组件没渲染完之前看到{{}}，（现在基本用不上）

v-model三个修饰符

修饰符	作用
.trim	去除空格
.lazy	听change事件而不是input
.number	将有效的输入字符串转换为数字

v-slot，用于将父组件的部分内容插入到子组件中

默认插槽

允许父组件再子组件中指定位置插入内容

Son.vue
<button>
  <slot></slot>
</button>

Father.vue
<v-button>
  <i>Icon</i>
  search
</v-button>
components: { "v-button": Son }

效果：

具名插槽

Father.vue
<Son>
  <template v-slot:body>    //注意是冒号 : 不是等号 = ，也没有双引号
    <p>body</p>
  </template>
  <template v-slot:footer>
    <p>footer</p>
  </template>
  <template v-slot:header>
    <p>header</p>
  </template>
</Son>

Son.vue
<slot name="header"></slot>
<slot name="body"></slot>
<slot name="footer"></slot>
尽管上面的父子组件之间名字是错位的，但是还是会一一对应，进入各自的插槽

v-memo

<div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">    //只要item.id === selected不变，这个节点的VNode就不会重新创建，性能就是这样挤出来的
  <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>
  <p>...more child nodes</p>
</div>
<script setup>
import { ref } from 'vue'
let selected = ref(0)
</script>
//也支持多值，那就要多个值都没变才能不创建VNode
<div v-memo="[valueA, valueB]">
  ...
</div>

v-cloak

[v-cloak] {
  display: none;
}
<div v-cloak>
  {{ message }}
</div>