Vue —— 事件 methods

作者：Sam

---

1. 简介

本篇介绍如何在vue中为元素绑定事件

2. 基本用法

1. 在元素上绑定事件名
   在元素上，使用例如v-on:click的形式，绑定事件

<input type="button" class="btn btn-danger" value="Get Value" v-on:click="getText">

v-on:click可以简写为@click，例如

<input type="button" class="btn btn-danger" value="Get Value" @click="getText">

其中getText就是事件名

2. 在vue对象中，设置事件处理函数

const vm = new Vue({
    el: '#div1',
    methods: {
        getText(){
            alert('hello world')
        }
    }
})

3. 方法传参

3.1 不传参

调用事件函数，如果没有参数，可以不加()，也可以加上，效果是一样的

<input type="button" class="btn btn-danger" value="Get Value" v-on:click="getText()">

<!-- or -->

<input type="button" class="btn btn-danger" value="Get Value" v-on:click="getText">

3.2 传参

• 将需要传递的参数，传递到括号内

<input type="button" class="btn btn-danger" value="@Set Value" @click="setText(new Date())">

在示例中，new Date()就是一个参数

在示例中可以看到，参数可以使用js表达式的方式来传入

• vue对象中的方法，也需要相应来接收这个参数

const vm = new Vue({
    el: '#div1',
    methods: {
        getText(){
            alert('hello world')
        },
        setText(date){
            alert(date)
        }
    }
})

参数名是任意的，只要顺序对于即可

3.3 获取event

1. 当不传参的时候
   不传参的话，则第一个参数就是event

<input type="button" class="btn btn-info" @click="test01" value="get event">

const vm2 = new Vue({
    el: '#text2',
    methods: {
        // 即使不传参，在没有参数的情况下，第一个参数就是event对象
        test01(event){
            console.log(event)
        }
    }
})

2. 使用$event来获取
   在传递参数的情况下，需要传入$event关键字，来获取event对象

<input type="button" class="btn btn-info" @click="test02('Sam','123',$event)" value="get event2">

const vm2 = new Vue({
    el: '#text2',
    methods: {
        // 在获取参数的时候，需要按照顺序获取
        // 参数的名称任意
        test02(username,password,event){
            console.log(username,password)
            console.log(event)
        }
    }
})

4. methods

4.1 methods不会被代理

methods中所定义的方法，不会和data中的数据一样被代理到vm的_data中

但是vue会把函数复制一份放在vue实例上，以便于调用

4.2 methods中的this

• methods中的方法，一般使用function的形式写，不推荐使用箭头函数

• 使用function形式写的时候，this指向的当前的vue实例对象

5. 事件修饰符

语法
使用@click.prevent.stop="fn1"的形式，来使用事件修饰符

前三个为常用的选项

事件修饰符可以用链式调用的方式一起调用，例如@click.prevent.stop="fn1，表示先取消了事件的默认行为，再取消事件的冒泡

修饰符名	说明
prevent	阻止默认事件
stop	阻止事件冒泡
once	事件只能被触发一次
capture	使用事件的捕获阶段
self	只有元素自己触发了事件，才会执行事件函数
passive	事件的默认行为会在事件处理函数之前优先执行

6. 键盘按键

6.1 获取键盘按键

通过@keydown事件对象event中的key，就能获取事件的按键名

<input type="text" class="form-control" @keydown="test01">

const vm4 = new Vue({
    el: '#text4',
    methods:{
        test01(event){
            console.log(event.key)
        }
    }
})

6.2 指定按键绑定

通过@keydown.enter的形式，就能对按键进行绑定

<input type="text" class="form-control" @keydown.a="test02">

const vm4 = new Vue({
    el: '#text4',
    methods:{
        test02(event){
            console.log('a 被按下了')
        }
    }
})

按键的名称，大部分和键盘上的名称相同

按键	vue中名称
Enter	enter
backspace delete	delete
esc	esc
space	space
tab	tab
上	up
下	down
左	left
右	right
Ctrl	ctrl
Shift	shift
Alt	alt
meta	meta

注意点

1. tab要使用，需要绑定keydown事件，否则会另元素失去焦点
2. ctrl alt shift meta 一般要配合keydown来使用

6.3 自定义按键别名

Vue.config.keyCodes.am = 87

将编码为87的键与“sam”字符串进行绑定

【注意】别名不能使用大写字母

<input type="text" class="form-control" @keydown.sam="test02">

const vm4 = new Vue({
    el: '#text4',
    methods:{
        test02(event){
            console.log('sam 被按下了')
        }
    }
})

6.4 组合键

通过@keydown.ctrl.y的形式，就能设置ctrl+y的组合键

<input type="text" class="form-control" @keydown.ctrl.y="test03">

const vm4 = new Vue({
    el: '#text4',
    methods:{
        test03(event){
            alert('Ctrl + y 被按下了')
        }
    }
})