一台谍、綁定事件
@是v-on:的簡寫，通過v-on:指令綁定事件吁断，指定一個methods選項(xiàng)里面定義的方法
1.函數(shù)可以傳參趁蕊，不傳參也有默認(rèn)參數(shù)
①傳參后，打印的結(jié)果是傳遞的參數(shù)
<button @click="sayHi(123)">sayHi</button>
sayHi(e) {
console.log(e); //123
},
②不傳參仔役，打印結(jié)果是PointerEvent事件對象
<button @click="sayHi">sayHi</button> <button @click="sayHi">sayHi</button>
③如果即想傳參數(shù)掷伙，又想把事件對象傳遞過去，就要加上$event
<button @click="sayHello('Nice',$event)">sayHello</button>
sayHello(msg,e){
console.log(msg,e); //Nice和pointerEvent事件對象
}
2.當(dāng)事件處理的代碼比較簡單時(shí)又兵，可以將代碼直接寫在行內(nèi)任柜。
注意：只能操作Vue管理的數(shù)據(jù)
<button @click="age++">年齡++</button>
二、Vue事件修飾符
1.事件修飾符.prevent,用于阻止默認(rèn)行為
<div @contextmenu.prevent="right" class="box"></div>
right(){
console.log('hello!');
}
2.事件修飾符.stop,用于阻止事件冒泡
<div class="box2" @click.stop="two">
3.事件修飾符.once,用于只綁定一次事件
<div class="box1" @click.once="one">
4.事件修飾符.self,只能在自身元素上觸發(fā)沛厨，不能再子元素上觸發(fā)和.stop有點(diǎn)相似
<div class="big" @click.self="hello">
三宙地、按鍵修飾符
1.按鍵修飾符.enter,按下回車觸發(fā)事件
<p>請輸入搜索內(nèi)容：<input type="text" @keyup.enter="two"></p>
2.按鍵修飾符.esc,按下Esc鍵，觸發(fā)事件
<p>請按上鍵：<input type="text" @keyup.esc="esc"></p>
3.按鍵修飾符.up逆皮、.down绸栅、.left、.right
<p>請按上鍵：<input type="text" @keyup.up="up"></p>
<p>請按下鍵：<input type="text" @keyup.down="down"></p>
<p>請按左鍵：<input type="text" @keyup.left="left"></p>
<p>請按右鍵：<input type="text" @keyup.right="right"></p>
