v-on—事件綁定

1. 用來綁定事件
2. 使用：v-on:click 縮寫為：@click

<div class="app">
    <h3 v-text="msg"></h3>
    <input type="button" value="點(diǎn)" v-on:click="updateMsg">
    <input type="button" value="一" @click="updateInfo">
    <!-- 不打括號(hào)的話就會(huì)直接執(zhí)行 -->
    <input type="button" value="下" @click="updateSelf">
    <!-- 打了()但是里面不傳參的話就會(huì)找不到，輸出e為undefined就而且會(huì)以為找不到參而報(bào)錯(cuò) -->
    <input type="button" value="下" @click="updateSelf()">
    <!-- 傳參接收當(dāng)前的事件源 方便之后使用 -->
    <input type="button" value="我" @click="updateSelf($event)">
    <!-- 累加 v-on事件函數(shù)中傳入?yún)?shù) -->
    <input type="button" value="num+5按鈕" @click="dataNum(5,1,$event)">
    <input type="button" value="num+10按鈕" @click="dataNum(10,2,$event)">
    <p v-cloak>num的值是:{{num}}</p>
</div>

const app = new Vue({
        el: '.app',
        data: {
            msg: '噗呲噗呲',
            num: 0
        },
        // 存放自定義函數(shù)/方法
        methods: {
            updateMsg() {
                console.log(this.msg);
                this.msg = '切克切克'
            },
            updateInfo() {
                this.msg = '嘿咻嘿咻'
            },
            updateSelf(e) {
                console.log(e);
                console.log(e.target);
                this.msg = '愛泥愛泥'
                e.target.style.backgroundColor = 'pink'
            },
            // v-on事件函數(shù)中傳入?yún)?shù)
            dataNum(a, b, e) {
                console.log(a, b, e);
                // 在方法中調(diào)用另外一個(gè)方法
                this.addNum(a)
            },
            addNum(num1) {
                this.num += num1
            }
        }
    })

事件修飾符

在DOM中會(huì)有阻止事件發(fā)生、阻止事件冒泡的行為
但是Vue不推薦我們操作DOM
所以為了解決這個(gè)問題，Vue.js提供了事件修飾符

• 修飾符：由點(diǎn)開頭的指令后綴來表示的

<!-- 阻止單擊事件繼續(xù)傳播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符可以串聯(lián)   即阻止冒泡也阻止默認(rèn)事件 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<div v-on:click.self="doThat">...</div>

按鍵修飾符(鍵盤事件)

當(dāng)項(xiàng)目中需要鍵盤事件時(shí)，Vue允許v-on在監(jiān)事鍵盤事件時(shí)添加按鍵修飾符
keydown按下觸發(fā) keyup按下抬起觸發(fā).
event.keycode按鍵編碼

<div>
    <input type="text" @keyup="fn($event)">
</div>

常用按鍵修飾符

keyCode按鍵編碼

@keydown.enter="函數(shù)名"

直接使用按鍵碼做鍵盤事件觸發(fā)

<input type="text" @keyup.97.98.99.100.101.102="fn">

自定義按鍵鍵碼修飾符別名

在Vue中可以通過config.keyCodes自定義按鍵修飾符別名

<div id="app">
    // 預(yù)先定義了keyCode 116（即F5）的別名為f5，因此在蚊子輸入框中按下F5，會(huì)觸發(fā)prompt方法
    <input type="text" v-on:keydown.f5="prompt()">
</div>

<srcipt>
    Vue.config.keyCodes['f5'] = 116;
    let app = new Vue({
        el: '#app',
        methods:{
            prompt: function(){
                alert('我是F5')
            }
        }
    })
</srcipt>

注：keyCode的C是大寫