资讯专栏INFORMATION COLUMN

Vue基础之内部指令(下)

maybe_009 / 1790人阅读

摘要:绑定事件监听器直接撸代码计数器是实例的挂在对象等同于,是的语法糖,在内定义好方法,指令监听事件来触发一些代码。

v-on绑定事件监听器

直接撸代码:

计数器

number:{{number}}

@click等同于v-on:click,是Vue的语法糖,在methods内定义好方法,v-on指令监听DOM事件来触发一些javascript代码。

除了绑定click之外,我们还可以绑定其它事件,比如键盘回车事件v-on:keyup.enter,更多事件请点击查看

面试考点:Vue事件修饰符的作用
me

事件流图(来自百度):

上面一段代码,什么修饰符都不添加时,点击“me”,依次打印son、father、grandfather

.stop

阻止冒泡,操作子元素不会触发父元素同类事件

me

此时,只会触发子元素事件

.capture

添加事件侦查时使用事件捕获模式,从外到内依次捕获

me

依次打印grandfather、father、son

.prevent

取消默认事件

百度

链接不跳转

.self

只在添加事件的元素自身触发

.once

事件只触发一次

其他指令 v-pre(不需要表达式)

在模板中跳过vue的编译,直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了

{{message}}

v-cloak(不需要表达式)

为了解决当网速较慢时,Vue.js文件没有被加载完时页面上数据绑定的闪现问题。
例如:

{{message}}

会闪现{{message}}

利用v-cloak指令使页面在Vue渲染完指定的整个DOM后才进行显示,并且v-cloak会在Vue实例结束编译后从绑定的DOM上移除,结合CSS可以解决这个问题。

[v-cloak] {
  display: none;
}
v-once(不需要表达式)

这个指令在实际开发中用的不是很多,作用是使定义它的元素或组件只渲染一次,包括元素或组件的所有子节点。渲染一次后不会随数据变化,可以视为静态。

{{message}}

以上是本期全部内容,欲知后事如何,请听下回分解<( ̄︶ ̄)↗[GO!]

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/117324.html

相关文章

  • Vue基础内部指令

    摘要:绑定事件监听器直接撸代码计数器是实例的挂在对象等同于,是的语法糖,在内定义好方法,指令监听事件来触发一些代码。 v-on绑定事件监听器 直接撸代码: 计数器 number:{{number}} + - var app = new Vue({ el: #app, // app是Vue实例的挂在对象 data: { ...

    2bdenny 评论0 收藏0
  • Vue基础内部指令

    摘要:绑定事件监听器直接撸代码计数器是实例的挂在对象等同于,是的语法糖,在内定义好方法,指令监听事件来触发一些代码。 v-on绑定事件监听器 直接撸代码: 计数器 number:{{number}} + - var app = new Vue({ el: #app, // app是Vue实例的挂在对象 data: { ...

    LMou 评论0 收藏0
  • Vue基础内部指令(上)

    摘要:以及条件指令类似于里的,这三个指令根据表达式的值对组件进行渲染销毁。如果想一次性判断多个元素,可以将他们包裹在之内,使用条件指令操作外层的,并不会包含在最终的渲染结果中。要是不希望被复用,需要在指定的元素上添加值,值存在且唯一。 v-if、v-else-if、v-else以及v-show 条件指令v-if、v-else-if、v-else 类似于JavaScript里的if、else-...

    BoYang 评论0 收藏0
  • Vue基础内部指令(上)

    摘要:以及条件指令类似于里的,这三个指令根据表达式的值对组件进行渲染销毁。如果想一次性判断多个元素,可以将他们包裹在之内,使用条件指令操作外层的,并不会包含在最终的渲染结果中。要是不希望被复用,需要在指定的元素上添加值,值存在且唯一。 v-if、v-else-if、v-else以及v-show 条件指令v-if、v-else-if、v-else 类似于JavaScript里的if、else-...

    Keagan 评论0 收藏0

发表评论

0条评论

maybe_009

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<