v-text

<template>
  <div v-text="msg"></div>
<!-- 等同于 -->
  <div>{{msg}}</div>
</template>

<script setup lang="ts">
  import { ref } from "vue"
  const msg = ref('hello world')
</script>

v-html

更新元素的innerHTML

<template>
  <div v-html="htmlStr"></div>
</template>

<script setup lang="ts">
  import { ref } from "vue"
  const htmlStr = ref("<span style='color: #1469BF'>hello world</span>" )
</script>

v-show

基于表达式值的真假性，来改变元素的可见性。

v-show 通过设置内联样式的 display CSS 属性来工作，当元素可见时将使用初始 display 值。当条件改变时，也会触发过渡效果。

v-if

基于表达式值的真假性，来条件性地渲染元素或者模板片段。当 v-if 元素被触发，元素及其所包含的指令/组件都会销毁和重构。如果初始条件是假，那么其内部的内容根本都不会被渲染。当条件改变时会触发过渡效果。

v-else

表示 v-if 或 v-if / v-else-if 链式调用的“else 块”

限定：上一个兄弟元素必须有 v-if 或 v-else-if。

<template>
    <div v-if="Math.random() > 0.5">
      Now you see me
    </div>
    <div v-else>
      Now you don't
    </div>
</template>

v-else-if

表示 v-if 的“else if 块”。可以进行链式调用。

限定：上一个兄弟元素必须有 v-if 或 v-else-if。

<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>
</template>

v-for

基于原始数据多次渲染元素或模板块。

遍历数组

<template>
 <li v-for="(item, index) in arr">
  {{ item }} - {{ index }}
 </li>
</template>

其中，item是遍历的子项，index是当前索引位。

遍历对象

<template>
 <li v-for="(value, key, index) in obj">
  {{ value }} - {{ key }} - {{ index }}
 </li>
</template>

其中，value是遍历的子项属性值，key为子项的属性名，index是当前索引位。

注意同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。

为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key attribute

<template>
 <div v-for="item in items" :key="item.id">
  <!-- 内容 -->
 </div>
</template>

v-on

给元素绑定事件监听器。

<template>
     <!-- 方法处理函数 -->
    <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>

    <!-- 按键用于 keyAlias 修饰符-->
    <input @keyup.enter="onEnter" />

    <!-- 点击事件将最多触发一次 -->
    <button v-on:click.once="doThis"></button>

    <!-- 对象语法 -->
    <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
</template>

v-bind

动态的绑定一个或多个 attribute，也可以是组件的 prop。

    <!-- 绑定 attribute -->
    <img v-bind:src="imageSrc" />

    <!-- 动态 attribute 名 -->
    <button v-bind:[key]="value"></button>

    <!-- 缩写 -->
    <img :src="imageSrc" />

    <!-- 缩写形式的动态 attribute 名 -->
    <button :[key]="value"></button>

    <!-- 内联字符串拼接 -->
    <img :src="'/path/to/images/' + fileName" />

    <!-- class 绑定 -->
    <div :class="{ red: isRed }"></div>
    <div :class="[classA, classB]"></div>
    <div :class="[classA, { classB: isB, classC: isC }]"></div>

    <!-- style 绑定 -->
    <div :style="{ fontSize: size + 'px' }"></div>
    <div :style="[styleObjectA, styleObjectB]"></div>

    <!-- 绑定对象形式的 attribute -->
    <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

    <!-- prop 绑定。“prop” 必须在子组件中已声明。 -->
    <MyComponent :prop="someThing" />

    <!-- 传递子父组件共有的 prop -->
    <MyComponent v-bind="$props" />

    <!-- XLink -->
    <svg><a :xlink:special="foo"></a></svg>

v-model

在表单输入元素或组件上创建双向绑定。

v-slot

用于声明具名插槽或是期望接收 props 的作用域插槽。

<!-- 具名插槽 -->
<BaseLayout>
  <template v-slot:header>
    Header content
  </template>

  <template v-slot:default>
    Default slot content
  </template>

  <template v-slot:footer>
    Footer content
  </template>
</BaseLayout>

<!-- 接收 prop 的具名插槽 -->
<InfiniteScroll>
  <template v-slot:item="slotProps">
    <div class="item">
      {{ slotProps.item.text }}
    </div>
  </template>
</InfiniteScroll>

<!-- 接收 prop 的默认插槽，并解构 -->
<Mouse v-slot="{ x, y }">
  Mouse position: {{ x }}, {{ y }}
</Mouse>

v-pre

跳过该元素及其所有子元素的编译。元素内具有 v-pre，所有 Vue 模板语法都会被保留并按原样渲染。最常见的用例就是显示原始双大括号标签及内容。

<span v-pre>{{ this will not be compiled }}</span>

页面会直接输出：{{ this will not be compiled }}

v-once

仅渲染元素和组件一次，并跳过之后的更新。

在随后的重新渲染，元素/组件及其所有子项将被当作静态内容并跳过渲染。这可以用来优化更新时的性能。

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 带有子元素的元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<MyComponent v-once :comment="msg" />
<!-- `v-for` 指令 -->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

v-memo

缓存一个模板的子树。在元素和组件上都可以使用。为了实现缓存，该指令需要传入一个固定长度的依赖值数组进行比较。如果数组里的每个值都与最后一次的渲染相同，那么整个子树的更新将被跳过

v-cloak

用于隐藏尚未完成编译的 DOM 模板。

该指令只在没有构建步骤的环境下需要使用。

当使用直接在 DOM 中书写的模板时，可能会出现一种叫做“未编译模板闪现”的情况：用户可能先看到的是还没编译完成的双大括号标签，直到挂载的组件将它们替换为实际渲染的内容。

v-cloak 会保留在所绑定的元素上，直到相关组件实例被挂载后才移除。配合像 [v-cloak] { display: none } 这样的 CSS 规则，它可以在组件编译完毕前隐藏原始模板。

vue3内置指令汇总