vue 事件修饰符(阻止默认行为和事件冒泡)

news/2024/7/10 1:20:27 标签: vue
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为,没有表达式 -->
<form @submit.prevent></form>
<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>
<!-- 键修饰符,键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符,键代码 -->
<input @keyup.13="onEnter">

. capture:捕获冒泡,即有冒泡发生时,有该修饰符的dom元素会先执行,如果有多个,从外到内依次执行,然后再按自然顺序执行触发的事件。

. self:将事件绑定到自身,只有自身才能触发,通常用于避免冒泡事件的影响

. once:设置事件只能触发一次,比如按钮的点击等。

. passive:该修饰符大概意思用于对DOM的默认事件进行性能优化,根据官网的例子比如超出最大范围的滚动条滚动的。

. native:在父组件中给子组件绑定一个原生的事件,就将子组件变成了普通的HTML标签,不加'. native'事件是无法触 发的。

               此时点击页面中的按钮无任何反应。

     添加修饰符:

                此时点击就会弹窗:

              可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签,并且该修饰符对普通HTML标签是没有任何作用的。


http://www.niftyadmin.cn/n/776161.html

相关文章

Uncaught SyntaxError: Unexpected token u in JSON at position 0

这是因为某个地方用了JSON.parse&#xff0c;但是传入的参数不是一个合格的json字符串&#xff0c;也就是说后台可能返回了空或者undefined。 解决&#xff1a;搜索一下parse&#xff0c;解析前先判断一下parse里即将传入的内容

封装JS判断各种浏览器内核

function(){var u navigator.userAgent, app navigator.appVersion;return {trident: u.indexOf(Trident) > -1, //IE内核presto: u.indexOf(Presto) > -1, //opera内核webKit: u.indexOf(AppleWebKit) > -1, //苹果、谷歌内核gecko: u.indexOf(Gecko) > -1 &…

Cannot read property ‘resetFields‘ of undefined

可以发现&#xff0c;只要显示过一次dialog&#xff0c;后面就不会报错了。所以我可以确定是因为代码量过大&#xff0c;对应的对象来不及生成&#xff0c;从而导致了读取了空对象。 解决办法&#xff1a; resetForm(formName) {if (this.$refs[formName]!undefined) {this.$…

vue 日期格式化-将时间2020-11-10T12:01:50.942转换成2020-11-10 12:01

返回数据&#xff1a; 页面效果&#xff1a; 代码如下&#xff1a; dateFormat (Tue Mar 06 2012 00:00:00 GMT0800, yyyy-MM-dd);//示例 function dateFormat (time, format) {var t new Date(time)var tf function (i) {return (i < 10 ? 0 : ) i}return format.repl…

idea官网打不开的原因

1.之前安装过idea并且在使用过程中修改了hots文件 解决: a.进入Win或mac系统的hosts文件所在位置,一般都是这个地址:C:\Windows\System32\Drivers\etc (ps:如果你打开了后缀名显示,就去打开没有后缀名的文件 b.注释0.0.0.0 account.jebrains.com和0.0.0.0 www.jetbrains.com (p…

403?也许不只是前端问题

403&#xff1f;也许不只是前端问题 跟运维联调过程中&#xff0c;运维同学告诉我&#xff0c;请求服务时&#xff0c;接口判断源地址&#xff0c;本来是服务器&#xff0c;没有问题&#xff1b;但是你本地起了一个 proxy&#xff0c;所以就判断你本地 proxy 地址了 原理上根据…

vue devServer之proxy跨域

概念 什么是同源策略 同源策略是一种约定&#xff0c;它是浏览器最核心也最基本的安全功能&#xff0c;如果缺少了同源策略&#xff0c;则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的&#xff0c;浏览器只是针对同源策略的一种实现。 所谓同源是指…

H5页面跳转至应用市场(Android/ios)(判断是Android还是ios)

var u navigator.userAgent;var isAndroid u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //android终端var isIOS !!u.match(/\(i[^;];( U;)? CPU.Mac OS X/); //ios终端//android端if (isAndroid) {let hidden window.document.hidd…