1、v-bind:用于动态地绑定一个或多个属性。 可以简写为 :
<div v-bind:class="{ active: isActive }"></div>2、v-if：根据表达式的值条件性地渲染元素。
<p v-if="seen">Now you see me</p>3、v-else：在 v-if 上使用，表示条件不满足时显示的内容。
<p v-if="seen">你能看见我</p><p v-else>你看不见我</p>4、v-show：根据表达式的值条件性地显示元素，通过 CSS 的 display 属性来控制元素的显示和隐藏。
<div v-show="isShow"></div>5、v-for：基于源数据多次渲染元素或模板块。
<li v-for="item in items" :key="item.id">{{ item.text }}</li>6、v-on：绑定事件监听器，用来监听 DOM 事件。可以简写为 @ 。
<button v-on:click="handleClick"></button>7、v-model：在表单元素上创建双向数据绑定。
<input v-model="message">8、v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。
<span v-pre>{{ this will not be compiled }}</span>9、v-cloak：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
<div v-cloak>{{ message }}</div> 10、v-text：更新元素的 textContent。
<span v-text="message"></span>11、v-html：更新元素的 innerHTML。注意：内容被视作 HTML。
<div v-html="htmlContent"></div>12、v-slot：用于具名插槽和作用域插槽。
<template v-slot:header></template> 或
<template v-slot:default="slotProps"></template>。13、v-once 是 Vue.js 中的一个指令，它用于执行一次性地渲染元素和组件。使用 v-once 指令的元素或组件及其所有子节点只会在首次渲染时被编译和渲染。一旦首次渲染完成，它们的 DOM 结构将被视为静态内容，不会再随数据的变化而重新渲染。
这个指令通常用于那些不会改变的静态内容，以提高性能并避免不必要的 DOM 更新。例如：
<span v-once>{{ staticText }}</span>14、v-suspense是 Vue 3 中引入的一个特殊指令，用于优雅地处理异步组件的加载过程或者在组件更新时的过渡效果。它可以让你在加载数据、异步组件、或者动态组件时展示一个占位符，直到真正内容加载完成。以下是v-suspense的基本用法和示例：
基本用法
你可以在一个包裹组件或元素上使用 v-suspense 指令，并且指定一个或多个 v-slot 来定义加载过程中的占位符和加载完成后的内容。
<template>
<div>
<h1>Vue Suspense</h1>
<template v-suspense>
<template #default>
<!-- 占位符，可以是 loading 动画或者文本 -->
<p>Loading...</p>
</template>
<template #fallback>
<!-- 真正加载完成后的内容 -->
<AsyncComponent />
</template>
</template>
</div>
</template>
<script>
import { defineComponent, defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent(() =>
import('./AsyncComponent.vue')
);
export default defineComponent({
components: {
AsyncComponent
}
});
</script>
<style>
/* 可选的样式 */
</style>解释和注意事项：
-
v-suspense指令: 这个指令用于标记一个容器，在这个容器内部可以包含两个v-slot，分别是default和fallback。 -
#default模板: 这里定义了一个占位符，当异步组件或者动态组件加载过程中，会显示这个占位符内容，例如一个 loading 状态的信息。 -
#fallback模板: 这里定义了真正加载完成后的内容，可以是一个异步组件或者动态组件。Vue 在加载完成后会自动切换显示到这个内容。 -
defineAsyncComponent: 用来定义一个异步组件，可以动态加载。 -
注意:
-
v-suspense目前仍处于实验阶段，需要确保你的 Vue 版本支持并启用了这个功能。 -
如果你使用的是 Vue 2，没有
v-suspense这个指令，需要在 Vue 3 中使用。
-
通过 v-suspense，你能够以一种优雅和清晰的方式管理异步加载组件的状态，提升用户体验和页面流畅度
