条件#
v-if#
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
v-show#
v-show 指令也是用于根据条件展示一块内容。v-show 只是简单地切换元素的 CSS 属性 display。
v-if 与 v-show#
v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
v-else#
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
v-else-if#
v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
循环#
v-for#
可以用 v-for 遍历数组中的元素
两个参数：item - 数组元素 ， index - 索引
<ul>
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
遍历对象中的属性
两个参数：value - 值 ，name - 键名
<div v-for="(value, name) in object">
{{ name }}: {{ value }}
</div>
三个参数：value - 值 ，name - 键名 ，index - 索引
<div v-for="(value, name, index) in object">
{{ index }}. {{ name }}: {{ value }}
</div>
也可以用 of 代替 in作为分隔符
<div v-for="item of items"></div>
在进行遍历数据的同时需要为每项提供一个唯一key属性，否则Vue会有一个warn提示。
因为标记唯一的key属性能跟踪每个节点的身份，从而重用和重新排序现有元素，防止渲染错误。
事件#
v-on#
事件绑定监听器，简写符号为@。
用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
修饰符#
- .stop - 调用 event.stopPropagation()。 阻止捕获和冒泡阶段中当前事件的进一步传播。
- .prevent - 调用 event.preventDefault()。 阻止事件默认行为，并不阻止事件传播
- .capture - 添加事件侦听器时使用 capture 模式。
- .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
- .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
- .native - 监听组件根元素的原生事件。
- .once - 只触发一次回调。
- .left - 只当点击鼠标左键时触发。
- .right - 只当点击鼠标右键时触发。
- .middle - 只当点击鼠标中键时触发。
- .passive - 以 { passive: true } 模式添加侦听器
v-once#
只渲染元素和组件一次。如果一个组件中包含了大量静态内容，就可以添加v-once指令来计算一次并进行缓存。
不要过度使用
属性#
v-bind#
动态地绑定一个或多个特性，或一个组件 prop 到表达式。简写为 ：
修饰符：#
- .prop - 被用于绑定 DOM 属性 (property)。
- .camel - 将 kebab-case 特性名转换为 camelCase. 驼峰化
- .sync 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。
双向数据绑定#
v-model#
在表单控件或者组件上创建双向绑定。
修饰符：
- .lazy - 取代 input 监听 change 事件
- .number - 输入字符串转为有效的数字
- .trim - 输入首尾空格过滤
其他#
v-text #
更新元素的 textContent。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。
v-html #
更新元素的 innerHTML
注意：在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永 不用在用户提交的内容上。
v-pre #
跳过这个元素和它的子元素的编译过程。内部内容不会被编译，会原样输出。
v-cloak#
这个指令保持在元素上直到关联实例结束编译。