vue事件相关

事件绑定

-实现方法：

//模板里边
<标签 v-on:事件类型="事件函数"></标签>
<标签 v-on:事件类型="事件函数()"></标签>
//简写：
<标签 @事件类型="事件函数"></标签>
<标签 @事件类型="事件函数()"></标签>

new Vue({
	el:'xx',
	data:{},
	methods:{
		事件函数(){
		}
	}
})

事件传参

-实现方法：

//模板里边
<标签 v-on:事件类型="事件函数(实参)"></标签>
//简写：
<标签 @事件类型="事件函数(实参)"></标签>

new Vue({
	el:'xx',
	data:{},
	methods:{
		事件函数(形参){
		}
	}
})

事件对象

事件对象：描述一个事件相关的所有信息（事件类型，事件源…）通常用它来获取数据，阻止冒泡，阻止默认行为

事件对象.preventDefault();//阻止默认行为
事件对象.target//事件源

-实现方法：

//模板里边
<标签 v-on:事件类型="事件函数"></标签>
//简写：
<标签 @事件类型="事件函数"></标签>

new Vue({
	el:'xx',
	data:{},
	methods:{
		事件函数(形参){//形参就是事件对象
		}
	}
})

即传参又获取事件对象

-实现方法：

//模板里边  $event不可以写错
<标签 v-on:事件类型="事件函数($event,实参)"></标签>
//简写：
<标签 @事件类型="事件函数($event,实参)"></标签>

new Vue({
	el:'xx',
	data:{},
	methods:{
		事件函数(形参1,形参2){//形参1就是事件对象,形参2是传递进入的数据
		}
	}
})

事件简写

事件简写仅限于对变量进行一些简单的赋值修改，比如num++

修饰符

事件修饰符

含义：帮助我们实现一些方便操作（比如：阻止默认事件，阻止冒泡，捕获触发等等）
写法：

<标签 @事件类型.修饰符="事件函数"></标签>
<标签 @事件类型.修饰符1.修饰符2="事件函数"></标签>

.prevent 阻止默认事件
.stop 阻止冒泡
.self 本身触发
.once 只执行一次
.capture 事件捕获
.passive 滚动行为将会立即触发

按键事件修饰符

按键修饰符是给按键相关事件的
只用一个修饰符，不要串联
按键事件：keyup keydown keypress
修饰符：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
自定义按键修饰符：一般放在实例化之前去配置
Vue.config.keyCodes.按键修饰符名 = 按键的keycode码