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#

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