Vue.js 提供了多种指令（Directives），它们是带有 v- 前缀的特殊属性，用于在 Vue 模板中提供额外的响应式行为。下面是一些核心的 Vue.js 指令及其作用：

1. v-bind：

   • 作用：动态地绑定一个或多个属性，或一个组件 prop 到表达式。
   • 缩写：:（例如，:href="url" 相当于 v-bind:href="url"）
   • 示例：<a v-bind:href="url">链接</a> 或简写为 <a :href="url">链接</a>

2. v-model：

   • 作用：在表单输入和应用状态之间创建双向数据绑定。
   • 示例：<input v-model="message">

3. v-if：

   • 作用：根据表达式的真假值来条件性地渲染元素。
   • 示例：<p v-if="seen">现在你看到我了</p>

4. v-else：

   • 作用：必须跟在 v-if 或 v-else-if 后面，表示条件不满足时的备选渲染内容。
   • 示例：<p v-else>现在你没看到我了</p>

5. v-else-if：

   • 作用：表示 v-if 的“else if”块，可以链式调用。
   • 示例：<p v-else-if="type === 'B'">B</p>

6. v-for：

   • 作用：基于一个数组来渲染一个列表。
   • 示例：<li v-for="(item, index) in items">{{ index }}. {{ item.text }}</li>

7. v-on：

   • 作用：监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
   • 缩写：@（例如，@click="doSomething" 相当于 v-on:click="doSomething"）
   • 示例：<button v-on:click="counter += 1">点击我</button> 或简写为 <button @click="counter += 1">点击我</button>

8. v-show：

   • 作用：根据表达式的真假值来切换元素的 CSS 属性 display。
   • 示例：<p v-show="ok">现在你看到我了</p>

9. v-pre：

   • 作用：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。
   • 示例：<span v-pre>{{ this will not be compiled }}</span>

10. v-cloak：

    • 作用：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
    • 示例：结合 CSS 使用，<style>[v-cloak] { display: none }</style><div v-cloak>{{ message }}</div>

11. v-once：

    • 作用：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
    • 示例：<span v-once>这个将不会改变：{{ msg }}</span>

这些是指令中较为常用的部分，Vue.js 还提供了其他更专业的指令和用法，但上述列出的足以覆盖大部分日常开发中的场景。