Vue API 3 （模板语法，指令）

条件

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

　　这个指令保持在元素上直到关联实例结束编译。