条件
v-if
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