查看原文
其他

vue 指令基本使用大全

2017-10-17 OSC - 不负好时光 开源中国

点击上图或长按二维码立即报名参加沈阳源创会


指令



  • 解释:指令 (Directives) 是带有 v- 前缀的特殊属性

  • 作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM


常用指令


  • v-text

  • v-html

  • v-bind


v-text


  • 解释:更新元素的 textContent



v-html


  • 解释:更新元素的 innerHTML



v-bind


  • 作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM

  • 语法:v-bind:title="msg"

  • 简写::title="msg"



v-on


  • 作用:绑定事件

  • 语法:v-on:click="say" or v-on:click="say('参数', $event)"

  • 简写:@click="say"

  • 说明:绑定的事件从methods中获取



事件修饰符


  • .stop 阻止冒泡,调用 event.stopPropagation()

  • .prevent 阻止默认事件,调用 event.preventDefault()

  • .capture 添加事件侦听器时使用事件捕获模式

  • .self 只当事件在该元素本身(比如不是子元素)触发时触发回调

  • .once 事件只触发一次


v-model


  • 作用:在表单元素上创建双向数据绑定

  • 说明:监听用户的输入事件以更新数据



v-for


  • 作用:基于源数据多次渲染元素或模板块



key属性


  • 推荐:使用 v-for 的时候提供 key 属性,以获得性能提升。

  • 说明:使用 key,VUE会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。



样式处理 -class 和 style


  • 说明:这两个都是HTML元素的属性,使用v-bind,只需要通过表达式计算出字符串结果即可

  • 表达式的类型:字符串、数组、对象

  • 语法:



v-if 和 v-show


  • 条件渲染

  • v-if:根据表达式的值的真假条件,销毁或重建元素

  • v-show:根据表达式之真假值,切换元素的 display CSS 属性


提升用户体验:v-cloak


  • 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

  • 防止刷新页面,网速慢的情况下出现{{ message }}等数据格式



提升性能:v-pre


  • 说明:跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。



提升性能:v-once


  • 说明:只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。




推荐阅读

Python 赶超 Java,JavaScript 稳坐第一 | GitHub 年度开发者报告

Kotlin 将超越 Java 成为 Android 开发的第一语言?

八款值得尝试的精美的 Linux 发行版(2017 版)

安卓 10 岁了:这些消失的经典 APP 你还记得吗?

点击“阅读原文”查看更多精彩内容

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存