Vue 事件绑定

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>