【Vue】基础系列（三）事件处理

一、事件的基本使用

使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；

?
1
2
<button @click="showInfo">点我提示信息</button>
<button @click="showInfo">点我提示信息</button>
事件的回调需要配置在methods对象中，最终会在vm上；
methods中配置的函数，不要用箭头函数！否则this就不是vm了；
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象；

@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；

1 2	`<button` `@click="showInfo1">点我提示信息1（不传参）</button>` `<button` `@click="showInfo2($event,66)">点我提示信息2（传参）</button>`

const vm = new Vue({
    el:'#root',
    data:{
        name:'饭啊饭',
    },
    methods:{
        showInfo1(event){
            alert('同学你好！')
        },
        showInfo2(event,number){
            console.log(event,number)
            alert('同学你好！！')
        }
    }
})

二、事件修饰符

prevent：阻止默认事件（常用）；

?
1
<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>
stop：阻止事件冒泡（常用）；

?
1
2
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">点我提示信息</button>
once：事件只触发一次（常用）；

?
1
<button @click.once="showInfo">点我提示信息</button>
capture：使用事件的捕获模式；

?
1
2
3
4
5
6
<div class="box1" @click.capture="showMsg(1)">
    div1
    <div class="box2" @click="showMsg(2)">
        div2
    </div>
</div>
self：只有event.target是当前操作的元素时才触发事件；

?
1
2
3
<div class="demo1" @click.self="showInfo">
<button @click="showInfo">点我提示信息</button>
</div>
passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

?
1
2
3
4
5
6
<ul @wheel.passive="demo" class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

文件的Vue对象代码。

new Vue({
    el:'#root',
    data:{
    name:'饭啊饭'
    },
    methods:{
        showInfo(e){
            alert('同学你好！')
        },
        showMsg(msg){
            console.log(msg)
        },
        demo(){
            for (let i = 0; i < 100000; i++) {
                console.log('#')
            }
            console.log('累坏了')
        }
    }
}) 

三、键盘事件

Vue中常用的按键别名：

回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right

1	`<input` `type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">`

Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

?
1
<input type="text" placeholder="按下回车提示输入" @keydown.caps-lock="showInfo"> //点击Caps按钮
系统修饰键（用法特殊）：ctrl、alt、shift、meta（以上几种基本够用了）
也可以使用keyCode去指定具体的按键（不推荐）
Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名（不推荐）