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