1穆刻、 vue事件綁定
在vue中給一個(gè)元素綁定事件可以用
v-on:+事件名稱（click喂饥、mouseover消约、mouseout、keyup员帮、keydown 等）或粮，v-on:這種寫(xiě)法有些繁瑣，v-on:可以用@符代替
<div v-on:click="fn1" ></div>
<div @click="fn1" ></div>
//以上兩種綁定事件的方式是等價(jià)的
2捞高、vue中event事件對(duì)象
現(xiàn)在比如有這樣一個(gè)需求氯材，點(diǎn)擊按鈕要獲取鼠標(biāo)相對(duì)于瀏覽器的
x和y坐標(biāo)，原生js中只需要給點(diǎn)擊方法傳一個(gè)event對(duì)象硝岗，通過(guò)event對(duì)象來(lái)獲取相應(yīng)的值氢哮，vue中也提供了一個(gè)類似的方法$event，vue多一個(gè)$符號(hào)型檀。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<button id="app" @click="fn1($event)">{{message}}</button> //這里的fn1方法傳遞了一個(gè)$event參數(shù),和原生event類似
<script>
var app = new Vue({
el:"#app",
data:{
message: '點(diǎn)我'
},
methods:{
fn1: function(ev){
console.log(ev.clientX +":"+ev.clientY ) //在控制臺(tái)中查看x 和y坐標(biāo)的值
}
}
})
</script>
</body>
</html>
3冗尤、vue 阻止事件冒泡
阻止事件冒泡在開(kāi)發(fā)是很常見(jiàn)的需求，在原生js中可以直接把
event對(duì)象中的cancelBubble屬性設(shè)置成ture就可以阻止事件向上冒泡胀溺，在vue提供了更簡(jiǎn)單的方法裂七，直接在事件名稱后面點(diǎn)上stop即可，@click.stop仓坞，vue稱之為事件修飾符背零。
除了.stop外 vue還提供另外四個(gè)事件修飾符.prevent.capture.self.once，具體使用方法可參考vue官方文檔 http://cn.vuejs.org/v2/guide/events.html#事件修飾符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" @click="fn2">
<button @click="fn1($event)">{{btnText}}</button>
<button @click.stop="fn1">{{btnText}}</button> //vue自帶的方法无埃，fn1中的ev.cancelBubble = true 可以省略了
</div>
<script>
var app = new Vue({
el:"#app",
data:{
btnText :"點(diǎn)我"
},
methods:{
fn1: function(ev){
ev.cancelBubble = true //如果用了vue自帶的stop方法 這行代碼可以省略了
console.log('1')
},
fn2:function(){
console.log('2')
}
}
})
</script>
</body>
</html>
4徙瓶、vue中的keyCode
在日常開(kāi)發(fā)中毛雇，最常見(jiàn)的一個(gè)小需求（回車(chē)提交），當(dāng)用戶按了回車(chē)鍵就提交用戶填寫(xiě)的數(shù)據(jù)侦镇，在原生js中還是要依靠event事件對(duì)象灵疮，通過(guò)
event來(lái)獲取keyCode，記住keyCode不是一件容易的事所以 Vue 為最常用的按鍵提供了別名虽缕，目前vue提供了下面這樣鍵盤(pán)別名：
.enter回車(chē)鍵
.tabtab切換
.delete(捕獲 “刪除” 和 “退格” 鍵)
.escesc鍵
.space空格鍵
.up鍵盤(pán)上鍵
.down鍵盤(pán)下鍵
.left鍵盤(pán)左鍵
.right鍵盤(pán)右鍵
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" @keyup.enter="fn1" value="按回車(chē)試試" />
</div>
<script>
var app = new Vue({
el:"#app",
data:{
},
methods:{
fn1: function(){
alert('您按了回車(chē)')
}
}
})
</script>
</body>
</html>
上面的例子只用了.enter做示范始藕，其他的都類似蒲稳。
