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

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

Vue API 3 (模板语法 ,指令)

上一篇:C#中的变量祥解


下一篇:$(document).ready和window.onload的区别