1.如何进行事件绑定及传参
标准写法&＃xff1a;
简写&＃xff1a;
new Vue({
el:"#app",
data:{ ... },
methods:{
处理函数(形参){
//this—>当前new Vue()对象
//可用this.变量名方式访问data中的变量&＃xff0c;因为methods中的方法&＃xff0c;也是被打散后直接隶属于new Vue()的。
//其实和data中的变量打散后是平级的。都直接隶属于new Vue()对象
}
}
})
例如&＃xff1a;
var vm&＃61;new Vue({
el:"#app",
data:{n:0},
methods:{
change(i){
if(i&＃61;&＃61;&＃43;1){
this.n&＃43;&＃43;;
}else{
if(this.n>0){
this.n--;
}
}
}
}
})
2.只获得事件对象&＃xff0c;不需要传自定义参数
处理函数后一定不要加(),加()是调用函数且不传参数的意思&＃xff1b;
不加()是绑定事件处理函数的意思&＃xff1b;
只有不加()时&＃xff0c;vue才会像DOM一样自动将事件对象以处理函数第一个参数方式&＃xff0c;传入处理函数。
methods:{ event
↓
处理函数(e){
//e自动获得事件对象。获得的事件对象和DOM中的事件对象完全一样。
}
}
例如&＃xff1a;
var vm&＃61;new Vue({
el:"#app",
data:{},
methods:{
doit(e){
console.log(&＃96;点在d1的&＃xff1a;x&＃xff1a;${e.offsetX},y&＃xff1a;${e.offsetY}&＃96;);
}
}
})
3.既需要获得事件对象&＃xff0c;又需要传自定义参数
因为加了()就无法自动传入事件对象了。所以&＃xff0c;必须手动传入事件对象和其他实参值。
$event是vue将DOM中事件对象重新封装过得一个代表事件对象的关键词。
vue中所有$开头的关键词&＃xff0c;都不能改名。
methods:{
$event 其他实参
↓ ↓
处理函数(e,其他形参,...){
//e自动获得事件对象&＃xff0c;获得的事件对象&＃xff0c;和DOM中事件对象完全一样
}
}
例如&＃xff1a;
var vm&＃61;new Vue({
el:"#app",
data:{},
methods:{
doit(e){
console.log(&＃96;点在${name}的&＃xff1a;x&＃xff1a;${e.offsetX},y&＃xff1a;${e.offsetY}&＃96;);
}
}
})
京公网安备 11010802041100号