• 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>
    

    本文来自博客园,作者:一纸年华,转载请注明原文链接:https://www.cnblogs.com/nullcodeworld/p/15337011.html

  • 相关阅读:
    [King.yue]Ext.net 页面布局Flex
    [King.yue]Ext.net 弹出Windows窗体注意的事项
    [Irving]SqlServer 标量函数 详解【转】
    [Andrew]Ext.net前台弹框
    [King.yue]Ext中Grid得到选择行数据的方法总结
    [zouxianghui] 清空GridPanel的checkbox选中行
    [BILL WEI]SQL 存储过程学习
    [Tommas] 测试场景 VS 测试用例 哪个更好?(转)
    winform 打印小票
    html5 input 标签
  • 原文地址:https://www.cnblogs.com/nullcodeworld/p/15337011.html
Copyright © 2020-2023  润新知