vue之事件处理

事件冒泡：

stop修饰符：阻止事件冒泡，用于子元素上。

事件冒泡：当父元素和子元素同时绑定了事件时，子元素先触发事件，父元素再触发事件，这是大多数浏览器的默认行为。

<div id="app-3">
    <div @click="count">
        父元素<br>
        <p @click.stop="count">子元素</p>
    </div>
    <p>这个按钮被点击了{{ counter }}次</p>
</div>
<script type="text/javascript">
    var vm3 = new Vue({
        el: '#app-3',
        data: {
            counter: 0
        },
        methods: {
            count: function() {
                this.counter += 1
            }
        }
    })
</script>

父元素(div)和子元素(p)同时绑定了事件，当点击父元素时counter加1，当点击子元素时，由于stop修饰符阻止了事件冒泡，所以counter也只加1。

如果去掉stop修饰符，当点击子元素时，counter会加2(子元素和父元素先后触发事件)。

<div id="example" @click="setVal1" style="border:1px solid black;width:300px;">
  <button @click="setVal">普通按钮</button>
  <button @click.stop="setVal">阻止冒泡</button>
  <button @click="reset">还原</button>
  <div>{{result}}</div>
</div>

<script>
var example = new Vue({
  el: '#example',
  data:{
    result:''
  },
  methods:{
    setVal(event){
      this.result+=' 子级 ';
    },
    setVal1(){
      this.result+=' 父级 ';
    },
    reset(){
      history.go()
    }
  }
})
</script>

事件捕获：

浏览器默认的一般是冒泡事件，和冒泡事件相对应的叫捕获事件。

capture修饰符：在父元素事件上设置capture属性，当点击子元素时，父元素先触发事件，子元素再触发事件。

<div id="example" @click.capture="setVal1" style="border:1px solid black;width:300px;">
  <button @click="setVal">事件捕获</button>
  <button @click="reset">还原</button>
  <div>{{result}}</div>
</div>

<script>
var example = new Vue({
  el: '#example',
  data:{
    result:''
  },
  methods:{
    setVal(event){
      this.result+=' 子级 ';
    },
    setVal1(){
      this.result+=' 父级 ';
    },
    reset(){
      history.go()
    }
  }
})
</script>

self修饰符：

用于实现只有点击当前元素的时候，才会触发事件处理函数，用于父元素上。

鼠标修饰符：

这些修饰符会限制处理程序监听特定的滑鼠按键

.left 左键
.right 右键
.middle 滚轮

<div id="example">
  <button @mouseup.right="right" @mouseup.middle="middle" @mouseup.left="left">{{message}}</button>
</div>

<script>
var example = new Vue({
  el: '#example',
  data:{
    message:'分别用左、中、右键进行点击，会出现不同的效果'
  },
  methods:{
    left(){
      this.message = 'left'
    },
    right(){
      this.message = 'right'
    },
    middle(){
      this.message = 'middle'
    },        
  }
})
</script>

键值修饰符：

在监听键盘事件时，经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加关键修饰符

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

.enter 回车
.tab 制表键
.delete (捕获 “删除” 和 “退格” 键)
.esc 返回
.space 空格
.up 上
.down 下
.left 左
.right 右

<div id="example">
  <button @keyup.enter="enter" @keyup.tab="tab" @keyup.delete="delete1" @keyup.esc="esc" @keyup.space="space" @keyup.up="up" @keyup.down="down" @keyup.left="left" @keyup.right="right">{{message}}</button>
</div>

<script>
var example = new Vue({
  el: '#example',
  data:{
    message:'将光标置于按钮上后，按下键盘上不同的按键，会有不同的效果'
  },
  methods:{
    enter(){
      this.message = 'enter'
    },
    tab(){
      this.message = 'tab'
    },
    delete1(){
      this.message = 'delete'
    }, 
    esc(){
      this.message = 'esc'
    },
    space(){
      this.message = 'space'
    },
    up(){
      this.message = 'up'
    },
    down(){
      this.message = 'down'
    },
    left(){
      this.message = 'left'
    },
    right(){
      this.message = 'right'
    },                 
  }
})
</script>

可以通过全局 config.keyCodes 对象自定义键值修饰符别名

// 可以使用 v-on:keyup.a
Vue.config.keyCodes.a = 65

<div id="example">
  <button @keyup.a="a"  @keyup.b="b">{{message}}</button>
</div>

<script>
Vue.config.keyCodes.a = 65;
Vue.config.keyCodes.b = 66;
var example = new Vue({
  el: '#example',
  data:{
    message:'按下键盘上的a键或b键'
  },
  methods:{
    a(){
      this.message = 'a'
    },
    b(){
      this.message = 'b'
    },    
  }
})
</script>

系统修饰键：

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

ctrl
.alt
.shift
.meta

<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

<div id="example">
  <button @click.ctrl="ctrl"  @click.alt="alt"  @click.shift="shift"  @click.meta="meta">{{message}}</button>
</div>

<script>
var example = new Vue({
  el: '#example',
  data:{
    message:'分别用按住辅助键ctrl、alt、shift、meta进行点击，会出现不同的效果'
  },
  methods:{
    ctrl(){
      this.message = 'ctrl'
    },
    alt(){
      this.message = 'alt'
    },
    shift(){
      this.message = 'shift'
    },  
    meta(){
      this.message = 'meta'
    },           
  }
})
</script>

组合按键不能单独触发事件，要与非组合按键一起才能触发事件