Vue.js 提供了多种指令（Directives），它们是带有 `v-` 前缀的特殊属性，用于在 Vue 模板中提供额外的响应式行为。下面是一些核心的 Vue.js 指令及其作用： 1. **`v-bind`**： - 作用：动态地绑定一个或多个属性，或一个组件 prop 到表达式。 - 缩写：`:`（例如，`:href="url"` 相当于 `v-bind:href="url"`） - 示例：`链接` 或简写为 `链接` 2. **`v-model`**： - 作用：在表单输入和应用状态之间创建双向数据绑定。 - 示例：`` 3. **`v-if`**： - 作用：根据表达式的真假值来条件性地渲染元素。 - 示例：`

现在你看到我了

` 4. **`v-else`**： - 作用：必须跟在 `v-if` 或 `v-else-if` 后面，表示条件不满足时的备选渲染内容。 - 示例：`

现在你没看到我了

` 5. **`v-else-if`**： - 作用：表示 `v-if` 的“else if”块，可以链式调用。 - 示例：`

B

` 6. **`v-for`**： - 作用：基于一个数组来渲染一个列表。 - 示例：`

{{ index }}. {{ item.text }}

` 7. **`v-on`**： - 作用：监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 - 缩写：`@`（例如，`@click="doSomething"` 相当于 `v-on:click="doSomething"`） - 示例：`点击我` 或简写为 `点击我` 8. **`v-show`**： - 作用：根据表达式的真假值来切换元素的 CSS 属性 `display`。 - 示例：`

现在你看到我了

` 9. **`v-pre`**： - 作用：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。 - 示例：`{{ this will not be compiled }}` 10. **`v-cloak`**： - 作用：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 `[v-cloak] { display: none }` 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。 - 示例：结合 CSS 使用，`` 11. **`v-once`**： - 作用：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。 - 示例：`这个将不会改变：{{ msg }}` 这些是指令中较为常用的部分，Vue.js 还提供了其他更专业的指令和用法，但上述列出的足以覆盖大部分日常开发中的场景。