Vue2——v-on

v-on—事件绑定

1. 用来绑定事件
2. 使用：v-on:click 缩写为：@click

<div class="app">
    <h3 v-text="msg"></h3>
    <input type="button" value="点" v-on:click="updateMsg">
    <input type="button" value="一" @click="updateInfo">
    <!-- 不打括号的话就会直接执行 -->
    <input type="button" value="下" @click="updateSelf">
    <!-- 打了()但是里面不传参的话就会找不到，输出e为undefined就而且会以为找不到参而报错 -->
    <input type="button" value="下" @click="updateSelf()">
    <!-- 传参接收当前的事件源 方便之后使用 -->
    <input type="button" value="我" @click="updateSelf($event)">
    <!-- 累加 v-on事件函数中传入参数 -->
    <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
        },
        // 存放自定义函数/方法
        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事件函数中传入参数
            dataNum(a, b, e) {
                console.log(a, b, e);
                // 在方法中调用另外一个方法
                this.addNum(a)
            },
            addNum(num1) {
                this.num += num1
            }
        }
    })

事件修饰符

在DOM中会有阻止事件发生、阻止事件冒泡的行为
但是Vue不推荐我们操作DOM
所以为了解决这个问题，Vue.js提供了事件修饰符

• 修饰符：由点开头的指令后缀来表示的

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

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

<!-- 修饰符可以串联   即阻止冒泡也阻止默认事件 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

按键修饰符(键盘事件)

当项目中需要键盘事件时，Vue允许v-on在监事键盘事件时添加按键修饰符
keydown按下触发 keyup按下抬起触发.
event.keycode按键编码

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

常用按键修饰符

语法	说明
.enter	enter键
.tab	tab键
.delete	删除键（捕获“删除”和“退格”按键）
.esc	取消键
.space	空格键
.up	上
.down	下
.left	左
.right	右

keyCode按键编码

@keydown.enter="函数名"

直接使用按键码做键盘事件触发

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

自定义按键键码修饰符别名

在Vue中可以通过config.keyCodes自定义按键修饰符别名

<div id="app">
    // 预先定义了keyCode 116（即F5）的别名为f5，因此在蚊子输入框中按下F5，会触发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是大写