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。
v-show 为 true 就显示，若为false，相当于 display：‘none’，就隐藏 ，若项频繁切换是否显示的用 v-show。
<h1 v-show='isshow'>标签一直都在</h1> <button @click="isshow=!isshow">切换</button>4.v-if
根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template>，将提出它的内容作为条件块。
5.v-else
为 v-if 或者 v-else-if 添加“else 块”。
6.v-else-if
表示 v-if 的“else if 块”。可以链式调用。
v-if 为 true 标签存在并显示，若为 false，则删除此标签且显示 v-else 中的内容。只显示一次的时候使用。
<h1 v-if='islogin'>Simba</h1> <h1 v-else>请登录</h1> <button @click='islogin=!islogin'>{{islogin?'退出':'登录'}}</button>补充：v-if VS v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
7.v-for
基于源数据多次渲染元素或模板块。
当v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级
<div v-for='(item ,index) in list'> {{ i+1 }}、{{ item }} <button @click='del(index)'>删除</button> </div>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：只渲染一次就不更新了
