很多刚接触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