vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例

本文实例讲述了vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件。分享给大家供大家参考，具体如下：

v-on:click/mouseover……

简写的:

@click=””        推荐

事件对象:

@click="show($event)"

事件冒泡:

阻止冒泡: 

    a).

ev.cancelBubble=true;

@click.stop

默认行为(默认事件):

阻止默认行为:

    a).

ev.preventDefault();

@contextmenu.prevent

键盘:

@keydown    $event    ev.keyCode
@keyup

常用键:

    回车

        a).

@keyup.13

@keyup.enter

    上、下、左、右

        @keyup/keydown.left
        @keyup/keydown.right
        @keyup/keydown.up
        @keyup/keydown.down
    …..

简写的: 

@click=""

<input type="button" value="按钮" v-on:click="show()">
<input type="button" value="按钮" @click="show()">

事件对象:

@click="show($event)"

window.onload=function(){
      new Vue({
        el:'#box',
        data:{
        },
        methods:{
          show:function(ev,b){
            alert(ev.clientX);
            alert(b);
          }
        }
      });
    };

<div id="box">
    <input type="button" value="按钮" @click="show($event,112)">
  </div>

事件冒泡

阻止冒泡:

a).

ev.cancelBubble=true;

window.onload=function(){
      new Vue({
        el:'#box',
        data:{
        },
        methods:{
          show:function(ev){
            alert(1);
            ev.cancelBubble=true;
          },								 
 1/3    1 2 3 下一页 尾页