1、v-text 指令
用于渲染元素的文本内容，它类似于双花括号插值语法
{
{ }}
，但有一些区别。
使用 v-text 指令时，Vue 会将指定的表达式的值作为纯文本内容插入到元素中，而不会进行数据绑定。这样可以确保文本内容按照原样输出，避免被解析为 HTML 标签或其他特殊字符。
下面是一个使用 v-text 的代码示例：
<div v-text="message"></div>在这个示例中，message 是 Vue 实例的一个数据属性。通过 v-text 指令，我们将 message 的值作为纯文本插入到 <div> 元素中。无论 message 中包含什么内容，都会被原样渲染为纯文本，而不会进行数据绑定或解析。
请注意，使用 v-text 指令时，不要在元素内部使用双花括号插值语法，否则会产生冲突或重复渲染的问题。v-text 只会替换元素的文本内容，不会创建新的 DOM 元素，因此更适用于显示简单的、不需要数据绑定的文本内容。
2、v-html 指令
用于渲染元素的 HTML 内容，它允许将数据作为 HTML 解析后插入到元素中。
使用 v-html 指令时，Vue 会将指定的表达式的值作为 HTML 字符串进行解析，并将结果插入到元素中。这样可以在页面中动态生成包含 HTML 标签和样式的内容。
<div v-html="htmlContent"></div>在这个示例中，htmlContent 是 Vue 实例的一个数据属性，其值是一段包含 HTML 标签的字符串。通过 v-html 指令，我们将 htmlContent 的值作为 HTML 解析后插入到 <div> 元素中。这样，htmlContent 中的 HTML 标签和样式将被正确解析，并显示在页面上。
请注意，使用 v-html 指令时要小心，确保插入的 HTML 内容是可信任且安全的。如果插入了不受信任的内容，可能会导致跨站脚本攻击（XSS），因此请仔细验证和过滤用户输入的内容。
3、v-on 指令
用于绑定事件监听器，当指定的事件触发时，会执行相应的方法或表达式。
使用 v-on 指令时，需要指定要监听的事件类型以及对应的处理函数。常见的事件类型包括点击事件（click）、鼠标移入事件（mouseenter）、键盘按下事件（keydown）等。
<button v-on:click="handleClick">点击我</button>在这个示例中，我们使用 v-on 指令将 handleClick 方法绑定到按钮的点击事件上。当按钮被点击时，Vue 会自动调用 handleClick 方法。
除了直接绑定方法，你还可以使用内联表达式作为事件处理函数：
<button v-on:click="count++">点击增加</button>在这个示例中，我们使用 v-on 指令将 count++ 作为点击事件的处理函数。每次按钮被点击时，count 的值会自增。
还可以在方法中访问事件对象和传递参数：
<button v-on:click="handleClick($event, 'Hello')">点击我</button>在这个示例中，我们将 handleClick 方法绑定到按钮的点击事件上，并将事件对象 $event 和字符串 ‘Hello’ 作为参数传递给方法。在方法中，你可以通过 $event 访问事件对象，以及接收传递的参数。
4、v-show 指令
用于根据指定的条件来控制元素的显示或隐藏。
使用 v-show 指令时，需要在元素上添加 v-show 属性，并将其值设置为一个布尔表达式。当该表达式的值为 true 时，元素将显示；当值为 false 时，元素将隐藏。
下面是一个使用 v-show 的代码示例：
<div v-show="isVisible">根据 isVisible 的值显示或隐藏</div>在这个示例中，我们使用 v-show 指令将<div>元素与isVisible布尔属性关联起来。如果isVisible的值为 true，则 <div> 元素将显示；如果值为 false，则元素将被隐藏。
与 v-if 不同的是，使用 v-show 控制的元素始终会被渲染到 DOM 中，只是通过 CSS 控制其显示与隐藏。因此，在频繁切换显示状态的情况下，v-show 的性能可能优于 v-if。
需要注意的是，通过 v-show 控制的元素在隐藏状态下仍然存在于 DOM 中，并占据相应的空间。如果需要在性能要求较高的场景下完全移除元素，可以考虑使用 v-if 来动态创建或销毁元素。
5、v-if 指令
是 Vue.js 中一个条件渲染的指令，它根据给定的条件决定是否渲染元素到 DOM 中。
使用 v-if 指令时，需要在元素上添加 v-if 属性，并将其值设置为一个表达式，该表达式的值决定了元素是否需要渲染。
下面是一个使用 v-if 的代码示例：
<div v-if="isVisible">根据 isVisible 的值进行条件渲染</div>
在这个示例中，我们使用 v-if 指令将 <div> 元素与 isVisible 布尔属性关联起来。如果 isVisible 的值为 true，则 <div> 元素会被渲染到 DOM 中；如果值为 false，则元素不会被渲染。
与 v-show 不同的是，通过 v-if 控制的元素在条件不满足时不会存在于 DOM 中。当条件满足时，元素会被动态创建并插入到 DOM 中；当条件不满足时，元素会被销毁并从 DOM 中移除。
因此，v-if 适用于在条件不经常改变的情况下使用，或者在性能要求较高的场景下使用，因为元素的创建和销毁可能会带来一些开销。
6、v-bind 指令
用于将 Vue 实例的数据绑定到 HTML 元素的属性或其他表达式上。
使用 v-bind 指令时，需要在元素上添加 v-bind 属性，并将其值设置为一个表达式。该表达式可以是一个动态的数据属性，也可以是一个计算属性或方法的返回值。
下面是一些常见的使用 v-bind 的示例：
- 绑定 HTML 元素的属性：
<img v-bind:src="imageSrc" alt="图片">在这个示例中，我们使用 v-bind 指令将 imageSrc 数据属性绑定到 <img> 元素的 src 属性上。这会根据 imageSrc 的值动态地更新图片的来源。
- 动态绑定 CSS 类名：
<div v-bind:class="{ 'active': isActive, 'error': hasError }">我有不同的样式</div>
在这个示例中，我们使用 v-bind 指令将一个对象作为参数传递给 class 属性。对象的键是类名，键对应的值是条件表达式。如果条件表达式为真，则该类名将被添加到元素上。
- 绑定内联样式：
<div v-bind:style="{ color: textColor, fontSize: fontSize + 'px' }">我有不同的样式</div>
在这个示例中，我们使用 v-bind 指令将一个对象作为参数传递给 style 属性。对象的键是 CSS 属性名，键对应的值是相应的表达式。这样可以根据数据属性动态地设置元素的样式。
除了上述示例，v-bind 还可以用于绑定表单元素的值、绑定事件处理程序等。它提供了一种方便的方式来将 Vue 实例中的数据与 HTML 元素进行绑定，实现数据驱动的动态更新。
7、v-for
Vue.js 中用于循环渲染列表的指令。它可以根据源数据的项数，将一个元素或组件重复渲染多次。
使用 v-for 指令时，需要在要进行循环渲染的元素上添加 v-for 属性，并将其值设置为一个表达式，该表达式指定了源数据以及每个项的别名。
下面是一个使用 v-for 的代码示例：
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
在这个示例中，我们使用 v-for 指令将 <li> 元素与 items 数组关联起来，并使用 item 作为遍历每个项的别名。通过在 {
{ item.name }} 中输出每个项的名称，实现了列表的渲染。
在 v-for 中，我们还可以额外指定索引和父级索引的别名，以及对应的键属性（使用 :key）。键属性的目的是为了提高列表渲染的性能和追踪机制。
除了数组，v-for 还可以循环渲染对象的属性。在这种情况下，我们可以使用 (value, key, index) 的写法来指定对象的值、键和索引的别名。
8、v-model
Vue.js 中用于实现双向数据绑定的指令。它可以将表单元素的值与 Vue 实例中的数据属性进行绑定，使得在用户输入或选择时，数据可以实时更新，并且数据的变化也可以驱动表单元素的状态。
使用 v-model 指令时，需要在表单元素上添加 v-model 属性，并将其值设置为一个 Vue 实例中的数据属性。v-model 可以适用于多种不同的表单元素，如 input、textarea、select 等。
<input v-model="message" type="text">在这个示例中，我们将 <input> 元素的值与 Vue 实例中的 message 数据属性进行双向绑定。当用户输入文本时，message 的值会自动更新，反之亦然。
除了文本输入框，v-model 还可以应用于复选框、单选按钮和下拉列表等不同类型的表单元素。
<input v-model="checked" type="checkbox">在这个示例中，checked 是一个布尔类型的数据属性，它表示复选框是否被选中。通过 v-model 的双向绑定，复选框的状态和 checked 数据属性保持同步。
<input v-model="picked" type="radio" value="A">
<input v-model="picked" type="radio" value="B">在这个示例中，picked 是一个字符串类型的数据属性，它表示用户选择的单选按钮的值。通过 v-model 的双向绑定，单选按钮的选中状态和 picked 数据属性保持一致。
<select v-model="selected">
<option value="A">选项 A</option>
<option value="B">选项 B</option>
<option value="C">选项 C</option>
</select>在这个示例中，selected 是一个字符串类型的数据属性，它表示用户选择的下拉列表选项的值。通过 v-model 的双向绑定，下拉列表的选中状态和 selected 数据属性保持同步。