摘要:绑定事件监听器直接撸代码计数器是实例的挂在对象等同于,是的语法糖,在内定义好方法,指令监听事件来触发一些代码。
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值了
v-cloak(不需要表达式){{message}}
为了解决当网速较慢时,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
摘要:绑定事件监听器直接撸代码计数器是实例的挂在对象等同于,是的语法糖,在内定义好方法,指令监听事件来触发一些代码。 v-on绑定事件监听器 直接撸代码: 计数器 number:{{number}} + - var app = new Vue({ el: #app, // app是Vue实例的挂在对象 data: { ...
摘要:绑定事件监听器直接撸代码计数器是实例的挂在对象等同于,是的语法糖,在内定义好方法,指令监听事件来触发一些代码。 v-on绑定事件监听器 直接撸代码: 计数器 number:{{number}} + - var app = new Vue({ el: #app, // app是Vue实例的挂在对象 data: { ...
摘要:以及条件指令类似于里的,这三个指令根据表达式的值对组件进行渲染销毁。如果想一次性判断多个元素,可以将他们包裹在之内,使用条件指令操作外层的,并不会包含在最终的渲染结果中。要是不希望被复用,需要在指定的元素上添加值,值存在且唯一。 v-if、v-else-if、v-else以及v-show 条件指令v-if、v-else-if、v-else 类似于JavaScript里的if、else-...
摘要:以及条件指令类似于里的,这三个指令根据表达式的值对组件进行渲染销毁。如果想一次性判断多个元素,可以将他们包裹在之内,使用条件指令操作外层的,并不会包含在最终的渲染结果中。要是不希望被复用,需要在指定的元素上添加值,值存在且唯一。 v-if、v-else-if、v-else以及v-show 条件指令v-if、v-else-if、v-else 类似于JavaScript里的if、else-...
阅读 1791·2019-08-30 15:55
阅读 976·2019-08-26 11:57
阅读 434·2019-08-26 11:29
阅读 3313·2019-08-26 10:49
阅读 1867·2019-08-23 18:40
阅读 1713·2019-08-23 16:04
阅读 3060·2019-08-23 11:01
阅读 2240·2019-08-23 10:56