冇事来学系--Vue2.0事件修饰符和键盘修饰符

简介: 常用的事件修饰符(对事件的触发进行控制)

常用的事件修饰符(对事件的触发进行控制)


  • .prevent 阻止默认行为(如:阻止a链接的跳转、阻止表单的提交等)
  • .stop 阻止事件冒泡( 相当于event.stopPropagation )
  • .capture 以捕获模式触发当前的事件处理函数
  • .once 绑定的事件只触发一次(等同于$once方法)
  • .self 只有在event.target是当前元素自身时触发事件处理函数
  • .passive 事件的默认行为立即执行,不用等待事件的回调函数执行完毕
  • 阻止事件触发时的默认行为,原生js用的是事件对象e的e.preventDefault( )
<div id="app">
  <a href="https://www.baidu.com/" @click="show">跳转到百度首页</a>
</div>
const vm = new vue({
  el: '#app',
  methods: {
    show(e){
      // 在点击a链接后会跳转到百度首页,我们要阻止这个默认行为,可以用e.preventDefault()
      e.preventDefault()      // 原生js的方式
      console.log('点击了a链接')
    }
  }     
})
<div id="app">
  <!-- vue的事件修饰符,在给a链接绑定click事件的同时又阻止了a链接默认的跳转行为 -->
  <a href="https://www.baidu.com/" @click.prevent="show">跳转到百度首页</a>
</div>

补充:

  1. 事件修饰符是可以叠加连写的。如:既要阻止冒泡,又要阻止默认行为,则可以写成<a href="www.baidu.com" @click.stop.prevent="show">点我展示信息

键盘事件

键盘事件有两个,按下按键弹起时触发的keyup( )和按键按下时触发的keydown( )

若要求按下某一个按键才触发事件,则有以下两种方法:

  1. 在事件处理函数中,通过事件对象获取到触发事件的按键编码(e.keyCode),然后执行判断,当按键编码e.keyCode不是我想设置的按键编码时,直接return结束这个函数;当e.keyCode等于设置的按键编码,才执行事件处理函数

注意:e.key是获取到按键的名字,e.keyCode是获取到按键的编码

  1. 通过键盘按键修饰符来实现

在监听键盘事件时,我们经常要判断详细的按键。此时,可以为键盘相关事件添加按键修饰符

<!-- 例子 -->
<!-- @keyup绑定键盘事件 -->
<!-- 只有在key是Enter时才调用vm.submit() -->
<input type="text" @keyup.enter="submit">
<!-- 在输入框中,按下esc键清空输入框内容 -->
<!-- 只有在key是esc时才调用vm.clearInput() -->
<input type="text" @keyup.esc="clearInput">
const vm = new Vue({
  el: '#app',
  methods: {
    clearInput(e){
      e.target.value = ''         // 清空输入框内容
    },
    submit(){
    }
  }         
})

补充:

按键修饰符是可以组合着写的,如:<input type="text" @keyup.ctrl.y="show"> 只有当ctrl和y一起按的时候才会触发事件

目录
相关文章
|
1月前
|
JavaScript
Vue实现【fiveClick】2秒内5连击(五连击)vue事件自定义、双击自定义、任意次连击
Vue实现【fiveClick】2秒内5连击(五连击)vue事件自定义、双击自定义、任意次连击
|
前端开发
前端学习笔记202303学习笔记第四天-Vue3.0-按键修饰符
前端学习笔记202303学习笔记第四天-Vue3.0-按键修饰符
41 0
前端学习笔记202303学习笔记第四天-Vue3.0-按键修饰符
|
JavaScript
冇事来学系--Vue2.0中自定义事件
定义 一种组件之间通信的方式,适用于子传父
81 0
|
存储 JavaScript 前端开发
冇事来学系--Vue2.0中ref引用
jQuery相比于原生JS,牛逼在简化了操作DOM的过程 vue的优势:MVVM框架,在vue中,不需要操作DOM,程序员只需要把数据维护好即可(数据驱动视图) 假设:在vue中需要操作DOM,需要获取到页面上某个DOM元素的引用,该如何?---> 使用ref引用
155 0
|
JavaScript
冇事来学系--Vue2.0中mixin混入(混合)和props
概念 可以将各个组件中可 共有的数据和方法 抽离出来写成一个混合对象
572 0
|
开发者
冇事来学系--Vue2.0侦听器
watch侦听器允许开发者监视数据的变化,从而针对数据的变化做出特定的操作
89 0
|
JavaScript
冇事来学系--Vue2.0事件绑定
事件绑定指令 v-on事件绑定指令,用于为DOM元素绑定事件监听 语法格式 --> v-on: 事件名称="事件处理函数名称" 若需要传递参数,则在事件处理函数名称后面加个括号( ),在括号内写入参数
100 0
|
缓存 JavaScript
冇事来学系--Vue2.0 计算属性
计算属性 计算属性指的是通过一系列运算之后,最终得到一个属性值。这个动态计算出来的属性值可以被模板结构或methods方法使用
141 0
|
前端开发
冇事来学系--Vue2.0中Promise详讲(下)
then-fs的基本使用 可以通过node下载then-fs。 npm install then-fs
134 0
|
前端开发 JavaScript 数据库
冇事来学系--Vue2.0中Promise详讲(上)
回调地狱 多层回调函数的相互嵌套,就形成了回调地狱
269 0

热门文章

最新文章