vue 事件调用 传参_三、Vue.js绑定事件指令—传参及获取事件对象event的用法

1.如何进行事件绑定及传参

标准写法：

简写：

new Vue({

el:"#app",

data:{ ... },

methods:{

处理函数(形参){

//this—>当前new Vue()对象

//可用this.变量名方式访问data中的变量，因为methods中的方法，也是被打散后直接隶属于new Vue()的。

//其实和data中的变量打散后是平级的。都直接隶属于new Vue()对象

}

}

})

例如：

-

{{n}}

+

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中的事件对象完全一样。

}

}

例如：

d1

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中事件对象完全一样

}

}

例如：

d1

d2

var vm=new Vue({

el:"#app",

data:{},

methods:{

doit(e){

console.log(`点在${name}的：x：${e.offsetX},y：${e.offsetY}`);

}

}

})