v-on基本用法

綁定事件監聽器。事件類型由參數指定。表達式可以是一個方法的名字或一個內聯語句，如果沒有修飾符也可以省略。

用在普通元素上時，只能監聽原生 DOM 事件。用在自定義元素組件上時，也可以監聽子組件觸發的自定義事件。

示例：

<!-- 方法處理器 -->
<button v-on:click="doThis"></button>

<!-- 動態事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- 縮寫 -->
<button @click="doThis"></button>

<!-- 動態事件縮寫 (2.6.0+) -->
<button @[event]="doThis"></button>

 

v-on傳值

情況一：methods的方法有參數，傳值

<button @click="msg('lhs')">傳值</button>

methods:{
    msg(event){
        console.log(event);//輸出的lhs
    }
}

注意：@click="msg('lhs')"傳值時必須加上單引號，不加就傳data里的參數

情況二：methods的方法有參數，但沒有傳值

<button @click="msg">傳值</button>

methods:{
    msg(event){
        console.log(event);//輸出的event
    }
}

返回的是event（Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態）

情況三：methods的方法有參數，傳值同時也要event

<button @click="msg('lhs',$event)">傳值</button>

methods:{
    msg(name,event){
        console.log(naem);//lhs
        console.log(event);//event
    }
}

 

v-on的事件修飾符

（1）stop：停止冒泡

<div @click="upthis">
    aaa
    <!-- 阻止事件冒泡 -->
    <a v-on:click.stop="doThis"></a>
</div>

（2）prevent：阻止默認行為

<form action='baidu'>
    <!-- 提交事件不再重載頁面（不會跳轉頁面） -->
    <input @click.prevent="doThat">
</form>

（3）capture

<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即內部元素觸發的事件先在此處理，然后才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>

（4）once：只會觸發一次

<!-- 點擊事件將只會觸發一次，防止重復提交 -->
<a v-on:click.once="doThis"></a>

（5）監聽某個鍵盤的鍵帽

<!-- 鍵修飾符，鍵別名 -->
<input @keyup.enter="onEnter">

<!-- 鍵修飾符，鍵代碼 -->
<input @keyup.13="onEnter">

（6）修飾符可以串聯

<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>