1.如何進(jìn)行事件綁定及傳參
- 標(biāo)準(zhǔn)寫(xiě)法：<元素 v-on:事件名="處理函數(shù)(實(shí)參值,...)">
- 簡(jiǎn)寫(xiě)：<元素 @事件名="處理函數(shù)(實(shí)參值,...)">
<元素 @事件名="處理函數(shù)(實(shí)參值,...)">
new Vue({
el:"#app",
data:{ ... },
methods:{
處理函數(shù)(形參){
//this—>當(dāng)前new Vue()對(duì)象
//可用this.變量名方式訪問(wèn)data中的變量，因?yàn)閙ethods中的方法，也是被打散后直接隸屬于new Vue()的。
//其實(shí)和data中的變量打散后是平級(jí)的。都直接隸屬于new Vue()對(duì)象
}
}
})
- 例如：
<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.只獲得事件對(duì)象，不需要傳自定義參數(shù)
<元素 @事件名="處理函數(shù)">
- 處理函數(shù)后一定不要加(),加()是調(diào)用函數(shù)且不傳參數(shù)的意思；
- 不加()是綁定事件處理函數(shù)的意思；
只有不加()時(shí)，vue才會(huì)像DOM一樣自動(dòng)將事件對(duì)象以處理函數(shù)第一個(gè)參數(shù)方式，傳入處理函數(shù)。
methods:{ event
↓
處理函數(shù)(e){
//e自動(dòng)獲得事件對(duì)象。獲得的事件對(duì)象和DOM中的事件對(duì)象完全一樣。
}
}
- 例如：
<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.既需要獲得事件對(duì)象，又需要傳自定義參數(shù)
<元素 @事件名="處理函數(shù)($event,其他實(shí)參值,...)">
- 因?yàn)榧恿?)就無(wú)法自動(dòng)傳入事件對(duì)象了。所以，必須手動(dòng)傳入事件對(duì)象和其他實(shí)參值。
- $event是vue將DOM中事件對(duì)象重新封裝過(guò)得一個(gè)代表事件對(duì)象的關(guān)鍵詞。
- vue中所有$開(kāi)頭的關(guān)鍵詞，都不能改名。
methods:{
$event 其他實(shí)參
↓ ↓
處理函數(shù)(e,其他形參,...){
//e自動(dòng)獲得事件對(duì)象，獲得的事件對(duì)象，和DOM中事件對(duì)象完全一樣
}
}
例如：
<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>
