zoukankan      html  css  js  c++  java
  • vue中的v-on事件监听机制

    监听dom事件使用v-on指令: v-on:事件类型="一个函数" 这个事件类型可以自定义
    简写: @事件类型="一个函数"⭐

    1、作用:绑定事件监听,表达式可以是一个方法的名字或一个内联语句,
    如果没有修饰符也可以省略,用在普通的html元素上时,只能监听 原生
    DOM 事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件。

    2、常用事件:
    v-on:click
    v-on:keydown
    v-on:keyup
    v-on:mousedown
    v-on:mouseover
    v-on:submit
    ....

    3、示例:
    <!-- 方法处理器 -->
    <button v-on:click="doThis"></button>
    <!-- 内联语句 -->
    <button v-on:click="doThat('hello', $event)"></button>

    <!-- 阻止默认行为,没有表达式 -->
    <form v-on:submit.prevent></form>

    5、v-on的缩写形式:可以使用@替代 v-on:
    <button @click="doThis"></button>


    6、按键修饰符
    触发像keydown这样的按键事件时,可以使用按键修饰符指定按下特殊的键后才触发事件

    写法:
    <input type="text" @keydown.enter="kd1"> 当按下回车键时才触发kd1事件

    由于回车键对应的keyCode是13,也可以使用如下替代
    <input type="text" @keydown.13="kd1"> 当按下回车键时才触发kd1事件

    但是如果需要按下字母a(对应的keyCode=65)才触发kd1事件,有两种写法:
    1、由于默认不支持a这个按键修饰符,需要Vue.config.keyCodes.a = 65 添加一个对应,所以这种写法为:

    Vue.config.keyCodes.a = 65
    <input type="text" @keydown.a="kd1"> 这样即可触发

    2、也可以之间加上a对应的数字65作为按键修饰符
    <input type="text" @keydown.65="kd1"> 这样即可触发

    键盘上对应的每个按键可以通过 http://keycode.info/ 获取到当前按下键所对应的数字

  • 相关阅读:
    进军装饰器2/3
    进军装饰器1/3
    购物车
    多级菜单(高效版)
    工资管理系统
    多级菜单(低效版)
    用户登录程序
    Accessibility辅助功能--一念天堂,一念地狱
    使用FragmentTabHost+TabLayout+ViewPager实现双层嵌套Tab
    android性能优化练习:过度绘制
  • 原文地址:https://www.cnblogs.com/mushitianya/p/10505584.html
Copyright © 2011-2022 走看看