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码

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页