? 很多剛接觸vue的碼友們肯定在VUE組件中添加了一個v-on:click事件發(fā)現(xiàn)并沒有觸發(fā)，然后就著急了，這到底是怎么一回事，為什么觸發(fā)不了了呢？下面就是淺入介紹下在VUE中click到底怎么用：

? ?第一種方式： ?在組件中綁定v-on:click事件的時候，需要添加一個.native,加上.native是將點擊事件渲染為原生點擊事件，類似于

?

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

.native 為click事件的修飾符，類似于這類修飾符還有

!-- 阻止單擊事件繼續(xù)傳播 --> <a v-on:click.stop="doThis"></a><!-- 提交事件不再重載頁面 --> <form v-on:submit.prevent="onSubmit"></form><!-- 修飾符可以串聯(lián) --> <a v-on:click.stop.prevent="doThat"></a><!-- 只有修飾符 --> <form v-on:submit.prevent></form><!-- 添加事件監(jiān)聽器時使用事件捕獲模式 --> <!-- 即元素自身觸發(fā)的事件先在此處理，然后才交由內(nèi)部元素進行處理 --> <div v-on:click.capture="doThis">...</div><!-- 只當在 event.target 是當前元素自身時觸發(fā)處理函數(shù) --> <!-- 即事件不是從內(nèi)部元素觸發(fā)的 --> <div v-on:click.self="doThat">...</div>

修飾符可以串聯(lián)使用，當然使用的時候，順序不同，起到的效果也是不同的，比如：

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

總結(jié)

以上是生活随笔為你收集整理的VUE 对@click的认识的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。