事件处理

事件的基本使用

使用v-on:xxx或@xxx绑定事件，其中xxx为事件名
事件的回调需要配置在methods对象中，最终会绑定在Vue实例上
methods中配置的函数，不用箭头函数，否则this将不能指向Vue实例
methods中配置的函数，都是被Vue管理的函数，this的指向为Vue实例或组件实例对象
@click="dome"与@click="demo($event)"效果相同，但后者可进行传参

这是一个{{name}}

<button @click="showInfo1">点我提示信息1

<button @click="showInfo2(88,$event)">点我提示信息2

Vue.config.productionTip = false;

var vm = new Vue({

el: "#box",

data: {

name: "测试",

},

methods: {

showInfo1(){

// 此处的this为Vue实例对象

alert('Hello Word!');

},

showInfo2(num,a){

console.log(num,a);

alert('Hello Word!!');

},

//结果：88

// PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}

},

});

事件修饰符

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

<a href="www.baidu.com" @click.prevent="showInfo">去百度

.stop： 阻止事件冒泡（常用）

   <div class="demo1" @click="showInfo">

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

.once：事件只能出发一次（常用）

   <div class="demo1" @click="showInfo">

   <button @click.once="showInfo">点击提示信息

.capture： 使用事件的捕获模式

   <div class="demo2" @click.capture="showMgs(1)">

   div1

   <div class="demo3" @click="showMgs(2)">div2

.self： 只有事件event.target是大改签操作元素时才可触发

   <div class="demo1" @click.self="showInfo">

   <button @click="showInfo">点击提示信息

.passive：事件的默认行为立即执行，无需等待事件回调执行完毕

   <ul class="list" @wheel="demo">


1


2


3


4

scroll 页面滚动条发生滚动，wheel 鼠标滚动轮发生滚动

键盘事件

1、Vue中常用按键的别名

enter：回车

delete：删除/退格

esc：退出

space：空格

tab：换行（一般配合keydown使用）

up：上

down：下

left：左

right：右

2、Vue未提供别名的按键，可使用其原始key值进行绑定，需转换为kebab-case（短横线命名）/3、系统修饰键（用法特殊）：ctrl，alt，shift，meta

1、配合keyup使用：按下修饰键的同时，在按下其他键，随后释放其他键事件才被触发

2、配合keydown使用：正常触发事件

3、可使用keyCode指定具体按键（不推荐）

4、使用Vue.config.keyCodes.自定义键名=键码，可制定按键别名

<input type="text" placeholder="按下回车提示输入" @keyup.inter="shouInfo">

<input type="text" placeholder="按下回车提示输入" @keyup.tab="shouInfo">

事件总结

1、事件修饰符可以连续写

2、系统修饰键也可以连续写

Vue事件处理（Day7）