专栏首页前端の进行时Vue.js入门教程-指令

Vue.js入门教程-指令

一、指令

1.1 概念理解

指令 (Directives) 是特殊的带有前缀 v- 的特性。指令的值限定为绑定表达式(JavaScript 表达式及过滤器规则)。指令的职责就是当其表达式的值改变时把某些特殊的行为应用到 DOM 上。

1.2 示例

(1)v- 是Vue的前缀,text 是指令ID,msg 是 expression(表达式)。

(2)msg 是MVVM中的VM即ViewModel,当他的值改变时,就会触发指令 test,更改View视图的显示。

二、v-text

更新元素的 textContent(文本内容)

三、v-html

更新元素的 innerHTML

3.1 注意

v-html 可以读取html标签,但 v-text 不可以

四、v-show 和 v-if

4.1 v-show

根据表达式之真假值,切换元素的 display CSS 属性

DIV1 的表达式是假值,元素隐藏;DIV2 的表达式是真值,元素显示。

4.2 v-if

根据表达式的值的真假条件,销毁或重建渲染元素

v-if 和 v-show 的用法基本相同,参考 v-show 的用法。

4.3 v-if 和 v-show 的比较

(1)v-if 是“真实”的条件渲染,因为它会确保条件块(conditional block)在切换的过程中,完整地销毁(destroy)和重新创建(re-create)条件块内的事件监听器和子组件。

(2)v-if 是惰性的(lazy):如果在初始渲染时条件为 false不会执行任何操作 - 在条件第一次变为 true 时,才开始渲染条件块。

(3)相比之下,v-show 要简单得多 - 不管初始条件如何,元素始终渲染,并且只是基于 CSS 的切换

(4)通常来说,v-if 在切换时有更高的性能开销,而 v-show 在初始渲染时有更高的性能开销。因此,如果需要频繁切换,推荐使用 v-show,如果条件在运行时改变的可能性较少,推荐使用 v-if

五、v-else

5.1 限制

前一兄弟元素必须有 v-ifv-else-if

如果 v-if/v-show 指令的表达式为 true,则 else 元素不显示;如果 v-if/v-show 指令的表达式为 false,则else 元素显示。

六、v-else-if

6.1 限制

前一兄弟元素必须有 v-ifv-else-if

表示 v-if 的 “else if 块”。可以链式调用。

七、v-for

基于源数据多次渲染元素或模板块(JavaScript的遍历)

7.1 特点语法

v-for 指令必须使用特定的语法 alias in expression,为当前遍历的元素提供别名

items 是一个数组,item 是当前被遍历的数组元素。

7.2 示例

我们在选项对象的 data 属性中定义了一个 books 数组,然后在 #vue-app 元素内使用 v-for 遍历books 数组,输出每个 book 对象的书籍、作者和译者。

八、v-on

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。

8.1 示例

8.2 事件修饰符

(1).stop - 调用 event.stopPropagation()

(2).prevent - 调用 event.preventDefault()

(3).capture - 添加事件侦听器时使用 capture 模式。

(4).self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

(5).{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

(6).native - 监听组件根元素的原生事件。

(7).once - 只触发一次回调。

(8).left - (2.2.0) 只当点击鼠标左键时触发。

(9).right - (2.2.0) 只当点击鼠标右键时触发。

(10).middle - (2.2.0) 只当点击鼠标中键时触发。

(11).passive - (2.3.0) 以 { passive: true } 模式添加侦听器

九、v-bind

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

十、v-model

在表单控件或者组件上创建双向绑定,监听用户的输入事件以更新数据。

10.1 限制

(1)<input>

(2)<select>

(3)<textarea>

(4)components

10.2 示例

参考文章

(1)Vue.js API

(2)vue 指令基本使用大全

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript 函数的定义

    JavaScript函数是指一个特定代码块,可能包含多条语句,可以通过名字来供其他语句调用以执行函数包含的代码语句。

    WEBING
  • 前端面试题-url、href、src

    比如网址 http://segmentfault.com/html/...,必须遵守以下的语法规则:

    WEBING
  • JavaScript-立即调用函数表达式(IIFE)

    (2)【注意】JavaScript引擎规定,如果function关键字出现在行首,一律解释成函数声明语句

    WEBING
  • vue.js 中 v-if与v-show的区别和选择

         v-show 的用法与v-if基本一致,只不过是改变元素的CSS属性display。当v-show表达式的值为false时候,元素会隐藏,查看DOM结...

    acoolgiser
  • React源码解析之scheduleWork(下)

    八、scheduleCallbackForRoot() 作用: 在render()之后,立即执行调度任务

    进击的小进进
  • WebGL实现HTML5的3D贪吃蛇游戏

    js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了Web...

    HT for Web
  • WebGL实现HTML5贪吃蛇3D游戏

    js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了Web...

    HT for Web
  • 100行JS实现HTML5的3D贪吃蛇游戏

    js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了Web...

    HT for Web
  • Spring Ioc源码分析 之 Bean的加载(五):实例化Bean

    在doCreateBean()代码 <2> 处,有一行代码instanceWrapper = createBeanInstance(beanName, mbd,...

    大王叫下
  • SharedPreferences解析

    说明:SharedPreferences与Editor只是两个接口,SharedPreferencesImpl和EditorImp分别实现了对应的接口。另外,C...

    用户1205080

扫码关注云+社区

领取腾讯云代金券