1.如何進(jìn)行事件綁定及傳參
- 標(biāo)準(zhǔn)寫法：<元素 v-on:事件名="處理函數(shù)(實(shí)參值,...)">
- 簡寫：<元素 @事件名="處理函數(shù)(實(shí)參值,...)">
<元素 @事件名="處理函數(shù)(實(shí)參值,...)">
new Vue({
el:"#app",
data:{ ... },
methods:{
處理函數(shù)(形參){
//this—>當(dāng)前new Vue()對象
//可用this.變量名方式訪問data中的變量珠月，因?yàn)閙ethods中的方法扩淀，也是被打散后直接隸屬于new Vue()的。
//其實(shí)和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.只獲得事件對象驻谆，不需要傳自定義參數(shù)
<元素 @事件名="處理函數(shù)">
- 處理函數(shù)后一定不要加(),加()是調(diào)用函數(shù)且不傳參數(shù)的意思；
- 不加()是綁定事件處理函數(shù)的意思庆聘；
只有不加()時胜臊，vue才會像DOM一樣自動將事件對象以處理函數(shù)第一個參數(shù)方式，傳入處理函數(shù)伙判。
methods:{ event
↓
處理函數(shù)(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(`點(diǎn)在d1的：x：${e.offsetX},y：${e.offsetY}`);
}
}
})
</script>
3.既需要獲得事件對象澳腹，又需要傳自定義參數(shù)
<元素 @事件名="處理函數(shù)($event,其他實(shí)參值,...)">
- 因?yàn)榧恿?)就無法自動傳入事件對象了织盼。所以，必須手動傳入事件對象和其他實(shí)參值酱塔。
- $event是vue將DOM中事件對象重新封裝過得一個代表事件對象的關(guān)鍵詞沥邻。
- vue中所有$開頭的關(guān)鍵詞，都不能改名羊娃。
methods:{
$event 其他實(shí)參
↓ ↓
處理函數(shù)(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(`點(diǎn)在${name}的：x：${e.offsetX},y：${e.offsetY}`);
}
}
})
</script>
