Vue中v-on指令有什么用

這篇文章主要為大家展示了“Vue中v-on指令有什么用”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“Vue中v-on指令有什么用”這篇文章吧。

v-on
v-on 主要用來監聽 dom 事件，以便執行一些代碼塊。表達式可以是一個方法名。
簡寫為：【 @ 】

<div id="app">
    <button @click="consoleLog"></button>
</div>
<script>
    var app = new Vue({
        el: '#app',
        methods:{
            consoleLog:function (event) {
                console.log(1)
            }
        }
    })
</script>

事件修飾符

• .stop 阻止事件繼續傳播

• .prevent 事件不再重載頁面

• .capture 使用事件捕獲模式,即元素自身觸發的事件先在此處處理，然后才交由內部元素進行處理

• .self 只當在 event.target 是當前元素自身時觸發處理函數

• .once 事件將只會觸發一次

• .passive 告訴瀏覽器你不想阻止事件的默認行為

<!-- 阻止單擊事件繼續傳播 -->
<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>
 
<!-- 點擊事件將只會觸發一次 -->
<a v-on:click.once="doThis"></a>
 
<!-- 滾動事件的默認行為 (即滾動行為) 將會立即觸發 -->
<!-- 而不會等待 `onScroll` 完成  -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>

使用修飾符時，順序很重要；相應的代碼會以同樣的順序產生。因此，用v-on:click.prevent.self會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。

以上是“Vue中v-on指令有什么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！