vue.js学习第二天

1、 vue事件绑定

在vue中给一个元素绑定事件可以用 v-on:+事件名称（click、mouseover、mouseout、keyup、keydown 等），v-on:这种写法有些繁琐，v-on:可以用 @符代替

 

//以上两种绑定事件的方式是等价的

2、vue中event事件对象

现在比如有这样一个需求，点击按钮要获取鼠标相对于浏览器的x和y坐标，原生js中只需要给点击方法传一个event对象，通过event对象来获取相应的值，vue中也提供了一个类似的方法 $event，vue多一个$符号。

    
        
        
        
    
    
        {{message}}  //这里的fn1方法传递了一个$event参数,和原生event类似
        
    

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#事件修饰符

    
        
        
        
    
    
        
 
            {{btnText}}
            {{btnText}}  //vue自带的方法，fn1中的ev.cancelBubble = true 可以省略了
        
        
    

4、vue中的keyCode

在日常开发中，最常见的一个小需求（回车提交），当用户按了回车键就提交用户填写的数据，在原生js中还是要依靠event事件对象，通过event来获取keyCode，记住keyCode不是一件容易的事所以 Vue 为最常用的按键提供了别名，目前vue提供了下面这样键盘别名：
.enter 回车键
.tab tab切换
.delete (捕获 “删除” 和 “退格” 键)
.esc esc键
.space 空格键
.up 键盘上键
.down 键盘下键
.left 键盘左键
.right 键盘右键

上面的例子只用了.enter做示范，其他的都类似。