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