v-on

基本用法

v-on指令用于給頁面元素綁定事件。

語法：

v-on:事件名="js片段或函數名"

示例：

<div id="app"><!--事件中直接寫js片段--><button v-on:click="num++">增加一個</button><br/><!--事件指定一個回調函數，必須是Vue實例中定義的函數--><button v-on:click="decrement">減少一個</button><br/><h1>有{{num}}個女神迷戀峰哥</h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">var app = new Vue({el:"#app",data:{num:100},methods:{decrement(){this.num--;}}}) </script>

效果：

另外，事件綁定可以簡寫，例如v-on:click='add'可以簡寫為@click='add'

事件修飾符

在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。盡管我們可以在方法中輕松實現這點，但更好的方式是：方法只有純粹的數據邏輯，而不是去處理 DOM 事件細節。

為了解決這個問題，Vue.js 為 v-on 提供了事件修飾符。修飾符是由點開頭的指令后綴來表示的。

• .stop ：阻止事件冒泡到父元素

• .prevent：阻止默認事件發生*

• .capture：使用事件捕獲模式

• .self：只有元素自身觸發事件才執行。（冒泡或捕獲的都不執行）

• .once：只執行一次

阻止默認事件

<div id="app"><!--右擊事件，并阻止默認事件發生--><button v-on:contextmenu.prevent="num++">增加一個</button><br/><!--右擊事件，不阻止默認事件發生--><button v-on:contextmenu="decrement($event)">減少一個</button><br/><h1>有{{num}}個女神迷戀峰哥</h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">var app = new Vue({el: "#app",data: {num: 100},methods: {decrement(ev) {// ev.preventDefault();this.num--;}}}) </script>

效果：（右鍵“增加一個”，不會觸發默認的瀏覽器右擊事件；右鍵“減少一個”，會觸發默認的瀏覽器右擊事件）

按鍵修飾符

在監聽鍵盤事件時，我們經常需要檢查常見的鍵值。Vue 允許為?v-on?在監聽鍵盤事件時添加按鍵修飾符：

<!-- 只有在 `keyCode` 是 13 時調用 `vm.submit()` --> <input v-on:keyup.13="submit">

?

記住所有的 keyCode 比較困難，所以 Vue 為最常用的按鍵提供了別名：

<!-- 同上 --> <input v-on:keyup.enter="submit"><!-- 縮寫語法 --> <input @keyup.enter="submit">

全部的按鍵別名：

• .enter*

• .tab

• .delete (捕獲“刪除”和“退格”鍵)

• .esc

• .space

• .up

• .down

• .left

• .right

組合按鈕

可以用如下修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器。

• .ctrl

• .alt

• .shift

例如：

<!-- Alt + C --> <input @keyup.alt.67="clear"><!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div>

?

總結

以上是生活随笔為你收集整理的v-on的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。