1.v-text
更新文本内容（textContent）。
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{
{msg}}</span>v-text 可以防止{ {}}出现在页面上。
2.v-html
把 html 当成 html 渲染（innerHTML）。
<div v-html="html"></div>3.v-show
根据表达式之真假值，切换元素的 display CSS property。
4.v-if
根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template>，将提出它的内容作为条件块。
5.v-else
为 v-if 或者 v-else-if 添加“else 块”。
6.v-else-if
表示 v-if 的“else if 块”。可以链式调用。
7.v-for
基于源数据多次渲染元素或模板块。
8.v-on
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button><!-- 缩写 -->
<button @click="doThis"></button><!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button><!-- 停止冒泡 -->
<button @click.stop="doThis"></button><!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button><!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form><!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button><!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter"><!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter"><!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>从 2.4.0 开始，v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。
<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>使用修饰符时，顺序很重要：
v-on:click.prevent.self 会阻止所有的点击，而v-on:click.self.prevent 只会阻止对元素自身的点击。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
passive 一般用在滚动监听，如：@scroll 、 @touchmove，因为滚动监听过程中，移动每个像素都会产生一次事件，每次都使用内核查询 prevent 会使滑动卡顿。我们通过 passive 将内核线程查询跳过，可大大提升滑动的流畅度。
9.v-bind
动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。
在绑定 class 或 style attribute 时，支持其它类型的值，如数组或对象；在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。
没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。
<!-- 绑定一个 attribute -->
<img v-bind:src="imageSrc"><!-- 动态 attribute 名 (2.6.0+) -->
<button v-bind:[key]="value"></button><!-- 缩写 -->
<img :src="imageSrc"><!-- 动态 attribute 名缩写 (2.6.0+) -->
<button :[key]="value"></button><!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName"><!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"><!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div><!-- 绑定一个全是 attribute 的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div><!-- 通过 prop 修饰符绑定 DOM attribute -->
<div v-bind:text-content.prop="text"></div><!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component><!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component><!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>.camel 修饰符允许在使用 DOM 模板时将 v-bind property 名称驼峰化，例如 SVG 的 viewBox property：
<svg :view-box.camel="viewBox"></svg>
10.v-model
在表单控件或者组件上创建双向绑定。
数据变化，视图也会变化，视图变化从而数据也会发生变化。
修饰符：
.lazy - 取代 input 监听 change 事件
.number - 输入字符串转为有效的数字
.trim - 输入首尾空格过滤
11.v-slot
提供具名插槽或需要接收 prop 的插槽。
<!-- 匿名插槽(没有命名，有且只有一个) -->
<todo-list><template v-slot:default>default slot</template>
</todo-list>
<slot>default</slot><!-- 具名插槽：相对匿名插槽组件 slot 标签待 name 命名的 -->
<base-layout><template v-slot:header>Header content</template>Default slot content<template v-slot:footer>Footer content</template>
</base-layout>
<slot name="header">header</slot>作用域插槽：子组件内数据可以被父页面拿到（解决数据只能从父页面传递给子组件）
slotProps: 可以随意命名，接收的是子组件 slot 标签上，属性数据的集合。
<!-- 接收 prop 的具名插槽 -->
<infinite-scroll><template v-slot:item="slotProps"><div class="item">{
{ slotProps.user.firstName }}</div></template>
</infinite-scroll>
<slot name='item' :user='user'>{
{ user.lastName }} // 默认数据
</slot>
data () {return {user: {firstName: 'zhang',lastName: 'san'}}
}
<!-- 接收 prop 的默认插槽，使用了解构 -->
<mouse-position v-slot="{ x, y }">Mouse position: {
{ x }}, {
{ y }}
</mouse-position><!-- 动态插槽名 -->
<base-layout><template v-slot:[dynamicSlotName]>...</template>
</base-layout>12.v-pre
vue 是响应式系统，有些静态的标签不需要多次编译，这样可以节省性能。
<span v-pre>{
{ msg }}</span>即使 data 里面定义了 msg，这里仍然是显示 { { msg }}。
13.v-cloak
在网速慢的情况下，在使用 vue 绑定数据时，渲染页面时会出现变量闪烁。这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
这样可以解决变量闪烁，但会出现白屏，你可以结合使用骨架屏。
[v-cloak] {display: none;
}
<div v-cloak>{
{ message }}
</div>14.v-once
只渲染元素和组件一次。当数据再次发生变化，随后的重新渲染，元素、组件及其所有的子节点将被视为静态内容，导致页面不会更新。这个可以用于优化更新性能。
通过 v-once 只需要渲染一次，可以降低开销的静态组件。
v-pre、v-cloak、v-once 三个指令都是用来优化性能体验的。
v-pre：不进行编译，直接渲染
v-cloak：隐藏未编译的 Mustache 标签直到实例准备完毕
v-once：只渲染一次就不更新了