新玩家Vue笔记12

提示：该文章为笔者的个人笔记并不是权威，如有错误，谢谢指出。

---

内置指令

v-text

更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。

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

v- html

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

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

v-show

根据表达式之真假值，切换元素的 display CSS property。当条件变化时该指令触发过渡效果。

<h2 v-show="false">欢迎来到{{name}}</h2>

v-if   v-else   v-else-if

根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else-if="ugly">Oh no 😢</h1>
<h1 v-else>😢</h1>

 v-for 

基于源数据多次渲染元素或模板块。

<div v-for="item in items">
  {{ item.text }}
</div>

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>

v-on 

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

<button v-on:click="doThis"></button>

 v-bind

动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。

<img v-bind:src="imageSrc">

<!-- 缩写 -->
<img :src="imageSrc">

 v-model

在表单控件或者组件上创建双向绑定。

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

 v-solt

提供具名插槽或需要接收 prop 的插槽。

<base-layout>
  <template v-slot:header>
    Header content
  </template>

  Default slot content

  <template v-slot:footer>
    Footer content
  </template>
</base-layout>

 v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

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

 v-cloak

这个指令保持在元素上直到关联实例结束编译。

[v-cloak] {
  display: none;
}
<div v-cloak>
  {{ message }}
</div>

 v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。 

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>