指令

v-text

• 预期：string
• 详细：更新元素的 textContent。如果要更新部分的 textContent，需要使用 插值。
• 示例：

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

v-html

• 预期：string
• 详细：更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。 如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。
• 示例：

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

v-show

• 预期：any
• 详细：根据表达式之真假值，切换元素的 display CSS property。当条件变化时该指令触发过渡效果。
• 示例：

<h1 v-show="ok">Hello!</h1>

v-if

• 预期：any

• 用法：根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。 如果元素是 <template>，将提出它的内容作为条件块。当条件变化时该指令触发过渡效果。

• 示例：

<h1 v-if="awesome">Vue is awesome!</h1>

提示

当和 v-for 一起使用时，v-for 的优先级比 v-if 更高。

v-else

• 预期：any
• 详细：为 v-if 或者 v-else-if 添加“else 块”。
• 示例：

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

v-else-if

• 预期：any
• 详细：为 v-if 或者 v-else-if 添加“else if 块”。
• 示例：

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

v-for

• 预期：Array | Object | number | string | Iterable<*>
• 详细：基于源数组或对象的键名或索引去循环渲染一个元素或一组元素。
• 示例：

<div v-for="item in items"></div> 
<div v-for="(item, index) in items"></div>
<div v-for="(value, name) in object"></div>
<div v-for="(value, name, index) in object"></div>
<div v-for="n in 10"></div>

v-on

• 预期：Function | Inline Statement | Object
• 详细：监听 DOM 事件，并在触发时运行相应的 JavaScript。
• 示例：

<button v-on:click="doThis"></button>
<button v-on:click="doThat('hello', $event)"></button>

v-bind

• 预期：any (with argument) | Object (without argument)
• 详细：动态地绑定一个或多个特性，或一个组件 prop 到表达式。
• 示例：

<button v-bind:disabled="isButtonDisabled">Button</button>

v-model

• 预期：随表单控件类型不同而不同。
• 详细：在表单控件或者组件上创建双向绑定。
• 示例：

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

v-solt

• 用于声明具名插槽或是期望接收 props 的作用域插槽。
• 缩写：#
• 期望的绑定值类型：能够合法在函数参数位置使用的 JavaScript 表达式。支持解构语法。绑定值是可选的——只有在给作用域插槽传递 props 才需要。
• 参数：插槽名 (可选，默认是 default)
• 仅限：
  • <template>
  • components (用于带有 prop 的单个默认插槽)

<!-- 具名插槽 -->
<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

• 没有预期，也不会显示在 DOM 中。
• 详细：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
• 示例：

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

v-cloak

• 没有预期，也不会显示在 DOM 中。
• 详细：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
• 示例：

<div v-cloak>
  {{ message }}
</div>

v-once

• 没有预期，也不会显示在 DOM 中。
• 详细：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
• 示例：

<span v-once>This will never change: {{msg}}</span>