内置内容

v-text

通过设置元素的 textContent 属性来工作，因此它将覆盖元素中所有现有的内容。

<span v-text="msg"></span>
<!-- 等同于 -->
<span>{{msg}}</span>

v-html

内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的（更新元素的 innerHTML）。

v-show

通过设置内联样式的 display CSS 属性来工作。

v-if v-else v-else-if

当 v-if 元素被触发，元素及其所包含的指令/组件都会销毁和重构。如果初始条件是假，那么其内部的内容根本都不会被渲染。

v-if vs v-show

v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。 v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。 v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。 总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

v-for

• v-for 指令基于一个数组来渲染一个列表。
• v-for 块中可以完整地访问父作用域内的属性和变量。
• 可以在定义 v-for 的变量别名时使用解构。
• 可以使用 of 作为分隔符来替代 in。
• 遍历一个对象的所有属性（Object.keys()）。
• 可以在<template>上使用。

v-on(@)

• 给元素绑定事件监听器
• Function | Inline Statement | Object (不带参数)
• 当用于普通元素，只监听原生 DOM 事件。当用于自定义元素组件，则监听子组件触发的自定义事件
• @click="(event) => { doThat(event, item) }"
• 修饰符
• .stop - 调用 event.stopPropagation()。
• .prevent - 调用 event.preventDefault()。
• .capture - 在捕获模式添加事件监听器。
• .self - 只有事件从元素本身发出才触发处理函数。
• .{keyAlias} - 只在某些按键下触发处理函数。enter、tab、delete 、esc、space、up、down、left、right、ctrl、alt、shift、meta
• .once - 最多触发一次处理函数。
• .left - 只在鼠标左键事件触发处理函数。
• .right - 只在鼠标右键事件触发处理函数。
• .middle - 只在鼠标中键事件触发处理函数。
• .passive - 通过 { passive: true } 附加一个 DOM 事件。（告知浏览器你不想阻止事件的默认行为、尤其能够提升移动端的性能）

<!-- 方法处理函数 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 -->
<button v-on:[event]="doThis"></button>

<!-- 内联声明 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 使用缩写的动态事件 -->
<button @[event]="doThis"></button>

<!-- 停止传播 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认事件 -->
<button @click.prevent="doThis"></button>

<!-- 不带表达式地阻止默认事件 -->
<form @submit.prevent></form>

<!-- 链式调用修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 按键用于 keyAlias 修饰符-->
<input @keyup.enter="onEnter" />

<!-- 点击事件将最多触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

v-bind

绑定 HTML class

<div :class="{ active: isActive }"></div>

绑定对象

<div :class="{ active: isActive, 'text-danger': hasError }"></div>
<!-- 等同于 -->
const classObject = reactive({
  active: true,
  'text-danger': false
})
<div :class="classObject"></div>

思考

用计算属性实现绑定的class对象classObject

绑定数组

<div :class="[activeClass, errorClass]"></div>
<!-- 三元表达式 -->
<div :class="[isActive ? activeClass : '', errorClass]"></div>
<!-- 数组中嵌套对象 -->
<div :class="[{ active: isActive }, errorClass]"></div>

绑定内联样式style

• 绑定对象
• 绑定数组
• 绑定字符串
• 自动前缀
• 样式多值

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

主流浏览器引擎前缀

-webkit- （谷歌，Safari，新版 Opera 浏览器，以及几乎所有 iOS 系统中的浏览器（包括 iOS 系统中的火狐浏览器）；基本上所有基于 WebKit 内核的浏览器） -moz- （火狐浏览器） -o- （旧版 Opera 浏览器） -ms- （IE 浏览器 和 Edge 浏览器）