事件处理

1.methods

methods是vue实例中的一个配置项，用于定义方法，methods是一个对象

<script>
export default {
    data(){},
    methods:{
		fn1(){},
        fn2(){},
    }
}
</script>

TIP

methods中的方法不可用箭头函数，否则会导致this的指向出问题

1.1 访问数据

在方法中访问数组，需要使用this关键字

<script>
export default {
    data(){
        num: 666
    },
    methods:{
		fn1(){
            console.log(this.num)
        },
    }
}
</script>

因为配置项data、props、computed的数据都绑定在组件实例上，this指向组件实例

用面向对象的思想来看，底层每一个组件被调用时都会通过new创建一个实例

2.事件绑定

vue的事件绑定通过v-on:事件类型="方法"指令，v-on也可以简写为@事件类型="方法"

<template>
	<button  @click="fn1">按钮</button>
</template>

<script>
export default {
    data(){},
    methods:{
		fn1(){
            console.log(111)
        },
    }
}
</script>

当函数不需要参数时，事件绑定可以不写小括号，若需要参数，加上()传入参数即可

<template>
	<button  @click="fn1">按钮</button>
	<button  @click="fn2(123)">按钮</button>
</template>

<script>
export default {
    data(){},
    methods:{
		fn1(){
            console.log(111)
        },
        fn2(num){
            console.log(num)
        },
    }
}
</script>

若需要传入事件对象，需要使用$event

<template>
	<button  @click="fn1($event)">按钮</button>
</template>

<script>
export default {
    data(){},
    methods:{
		fn1(e){
            console.log(e.target.value)
        },
    }
}
</script>

@click=" "中""里相当于js环境，除了可以写方法名，也可以写js表达式

<template>
	<button  @click="val=!val">按钮</button>
</template>

<script>
export default {
    data(){
        val: true
    },
}
</script>

3.事件修饰符

3.1 种类

• .stop - 调用 event.stopPropagation()。
• .prevent - 调用 event.preventDefault()。
• .capture - 在捕获模式添加事件监听器。
• .self - 只有事件从元素本身发出才触发处理函数。
• .{keyAlias} - 只在某些按键下触发处理函数。
• .once - 最多触发一次处理函数。
• .left - 只在鼠标左键事件触发处理函数。
• .right - 只在鼠标右键事件触发处理函数。
• .middle - 只在鼠标中键事件触发处理函数。
• .passive - 通过 { passive: true } 附加一个 DOM 事件。

<!-- 方法处理函数 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 -->
<button v-on:[event]="doThis"></button>

<!-- 内联声明 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 使用缩写的动态事件 -->
<button @[event]="doThis"></button>

<!-- 停止传播 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认事件 -->
<button @click.prevent="doThis"></button>

<!-- 不带表达式地阻止默认事件 -->
<form @submit.prevent></form>

<!-- 链式调用修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 按键用于 keyAlias 修饰符-->
<input @keyup.enter="onEnter" />

<!-- 点击事件将最多触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

3.2 语法

直接在事件类型后加上.继而加上修饰符：@事件类型.修饰符=事件函数

<button @click.stop="showInfo">点我提示信息</button>

4.键盘修饰符

通过键盘修饰符，除了对应事件类型的操作可以触发方法，按键盘相应的键也可触发

键盘上的每个按键都有自己的名称和编码，例如：Enter（13）。而Vue还对一些常用按键起了别名方便使用

Vue中常用的按键别名：

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

如下所示，除了点击按钮可以触发方法，按键盘回车也可直接触发方法

<template>
	<button  @click.enter="enterFn">按钮</button>
</template>

<script>
export default {
    methods:{
		enterFn(){
            console.log(111)
        }
    }
}
</script>

5.系统修饰符

系统修饰符就是组合按键：ctrl，alt，shift，meta（meta就是win键）

系统修饰符需要配合keyup、keydown、keypress事件使用

例如ctrl+y写法如下

<input @keyup.ctrl.y="back()"/>

多个组合按键可以链式调用

<input @keyup.ctrl.shift.y="back()"/>