1、 vue事件绑定
在vue中给一个元素绑定事件可以用
v-on:+事件名称（click、mouseover、mouseout、keyup、keydown 等），v-on:这种写法有些繁琐，v-on:可以用@符代替
<div v-on:click="fn1" ></div>
<div @click="fn1" ></div>
//以上两种绑定事件的方式是等价的
2、vue中event事件对象
现在比如有这样一个需求，点击按钮要获取鼠标相对于浏览器的
x和y坐标，原生js中只需要给点击方法传一个event对象，通过event对象来获取相应的值，vue中也提供了一个类似的方法$event，vue多一个$符号。
<!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方法传递了一个$event参数,和原生event类似
<script>
var app = new Vue({
el:"#app",
data:{
message: '点我'
},
methods:{
fn1: function(ev){
console.log(ev.clientX +":"+ev.clientY ) //在控制台中查看x 和y坐标的值
}
}
})
</script>
</body>
</html>
3、vue 阻止事件冒泡
阻止事件冒泡在开发是很常见的需求，在原生js中可以直接把
event对象中的cancelBubble属性设置成ture就可以阻止事件向上冒泡，在vue提供了更简单的方法，直接在事件名称后面点上stop即可，@click.stop，vue称之为事件修饰符。
除了.stop外 vue还提供另外四个事件修饰符.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 :"点我"
},
methods:{
fn1: function(ev){
ev.cancelBubble = true //如果用了vue自带的stop方法 这行代码可以省略了
console.log('1')
},
fn2:function(){
console.log('2')
}
}
})
</script>
</body>
</html>
4、vue中的keyCode
在日常开发中，最常见的一个小需求（回车提交），当用户按了回车键就提交用户填写的数据，在原生js中还是要依靠event事件对象，通过
event来获取keyCode，记住keyCode不是一件容易的事所以 Vue 为最常用的按键提供了别名，目前vue提供了下面这样键盘别名：
.enter回车键
.tabtab切换
.delete(捕获 “删除” 和 “退格” 键)
.escesc键
.space空格键
.up键盘上键
.down键盘下键
.left键盘左键
.right键盘右键
<!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="按回车试试" />
</div>
<script>
var app = new Vue({
el:"#app",
data:{
},
methods:{
fn1: function(){
alert('您按了回车')
}
}
})
</script>
</body>
</html>
上面的例子只用了.enter做示范，其他的都类似。
网友评论