1.Vue如何处理事件？

  • v-on 指令用法
<input type = 'button' v-on:click = 'num++'/>


  • v-on 简写形式
<input type = 'button' @click = 'num++'/>


2.事件函数的调用方式

  • 直接绑定函数名称
<button v-on:click='say'>Hello</button>


  • 调用函数
<button v-on:click='say()'>Say hi</button>


3.事件函数参数传递

  • 普通参数和事件对象
<button v-on:click='say("hi",$event)'>Say hi</button>


  如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数。

  如果事件绑定函数调用，那么事件对象必须作为最后一个参数传递，并且事件对象的名称必须是$event。

4.事件修饰符

  • .stop 阻止冒泡
<a v-on:click.stop="handle">跳转</a>


  • .prevent 阻止默认行为
<a v-on:click.prevent="handle">跳转</a>


5.按键修饰符

  • .enter 回车键
<input v-on:keyup.enter='submit'>


  • .delete 删除键
<input v-on:keyup.delete ='handle'>


6.自定义按键修饰符

  • 全局config.keyCodes对象，如：Vue.config.keyCodes.f1 = 113
  <div id="app">
<input type="text" v-on:keyup.aaa='handle' v-model='info'>
</div>
<script type="text/javascript">
/*
      事件绑定-自定义按键修饰符
      规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值
    */
Vue.config.keyCodes.aaa = 113 // 113是F2的键码
var vm = new Vue({
el: '#app',
data: {
info: ''
      },
methods: {
handle: function(event){
console.log(event.keyCode)
        }
      }
    });
</script>


案例：简单计算器

①通过v-model指令实现数值a和数据b的绑定

②给计算按钮绑定事件，实现计算逻辑

③将计算结果绑定到对应位置

 <div id="app">
        <h1>简单计算器</h1>
        <div>
            <span>数值A：</span>
            <span><input type="text" v-model="a"></span>
        </div>
        <div>
            <span>数值B：</span>
            <span><input type="text" v-model="b"></span>
        </div>
        <div>
            <button v-on:click='handle'>计算</button>
        </div>
        <div>
            <span>计算结果：</span>
            <span v-text='result'></span>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                a: '',
                b: '',
                result: ''
            },
            methods: {
                handle: function () {
                    this.result = parseInt(this.a) + parseInt(this.b);
                }
            }
        });
    </script>


作者：一纸年华​​​​