VUE 对@click的认识

很多刚接触vue的码友们肯定在VUE组件中添加了一个v-on:click事件发现并没有触发，然后就着急了，这到底是怎么一回事，为什么触发不了了呢？下面就是浅入介绍下在VUE中click到底怎么用：

第一种方式：在组件中绑定v-on:click事件的时候，需要添加一个.native,加上.native是将点击事件渲染为原生点击事件，类似于

element.addEventListener(click, function(){});

.native 为click事件的修饰符，类似于这类修饰符还有

!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 -->
<form v-on:submit.prevent></form><!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div><!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

修饰符可以串联使用，当然使用的时候，顺序不同，起到的效果也是不同的，比如：

v-on:click.prevent

效果为event.preventDefault()，阻止事件的默认动作，使用.self修饰符配合.prevent

v-on:click.prevent.self

会阻止元素以及下面所有元素的默认动作，而使用

v-on:click.self.pervent

则只会阻止自身元素的默认动作。

当然，像这种修饰符还有很多种，具体的话还是看看文档，毕竟文档最权威：

https://cn.vuejs.org/v2/guide/events.html

VUE 对@click的认识相关推荐

html click事件参数,vue 实现click同时传入事件对象和自定义参数
这篇文章主要介绍了vue 实现click同时传入事件对象和自定义参数,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧仅仅传入自定义参数 HTML ddddd JS代码 new Vue ...
Vue之@click、事件修饰符@click.stop与@click.prevent、按键修饰符@keyup.enter
1.绑定监听@click: (以监听click为例,其他如keyup,用法类似) v-on:click="fun" @click="fun" @cli ...
MUI中vue的@click事件没反应
这是因为mui中上拉加载更多或下拉刷新中的滑动事件和vue事件冲突导致的只需要将 @click 改为@tap 就是这么简单另外mui中双 webview 模式不会出现这个问题,只有单w ...
【踩坑日记】Vue组件@click事件点击没有反应
项目场景: 在自定义组件上绑定@click事件无法触发问题描述: 在自定义组件上绑定@click事件无法触发 <template><div>自定义组件<div> ...
vue中 @click 绑定点击事件方法传递参数 typescript(通用)
话不多说还是直接上图简单明了 <template><div id="header"><img src="../../assets/logo ...
VUE div click无效
每逢半年总要遇到一个前端诡异问题,花了个把小时才解决,记录一下 <div v-else-if="item.type ===7" class="left-titl ...
vue中click无效问题
当父元素为relative,子元素为absolute时可能会出现click点击无效,无法触发onClick事件的情况目前已知两种解决方法 1.最外层div的z-index层级设置比里面绝对定位的大 ...
Vue的@click、@click.prevent、@click.stop
1.@click,绑定监听(单击事件) v-on:click="function" @click="function" ...
怎么在vue的@click里面直接写js_【转】为 Node.js 贡献你的力量 ———— 调试代码
原文作者:百万扩散性甜面包 himself65 原文链接: 为 Node.js 贡献你的力量 ---- 调试代码www.himself65.com Node.js 作为一个世界级的项目,能为它贡献源 ...
vue中@click不触发时，用onclick怎么代替
转载地址:https://www.cnblogs.com/xr210/p/13531778.html

VUE 对@click的认识

VUE 对@click的认识相关推荐

最新文章

热门文章