你单排吧
工会低代码前端操作手册
  • 🇨🇳【你单排吧】的笔记空间
  • 🌖Vue2全家桶
    • Part1-vue基本语法
    • Part2-常用指令
    • Part3-指令与传值
    • Part4-Webpack与脚手架
    • Part5-《TodoList》项目实战
    • Part6-开发常用知识点
    • Part7-Git与Vuex
    • Part8-路由与请求
    • 《叩丁狼积分商城》PC端项目实战
  • 🌗React17全家桶
    • Part1-React基本语法
    • Part2-传值、路由与请求
    • Part3-Redux与React Redux
    • Part4-React Hooks
    • 《IT猿题库》项目实战
  • 🌘微信小程序入门与项目实战
    • Part1-语法入门
    • Part2-项目实战
    • Part3-UniApp项目实战
  • 🌑前端必学之Linux与Nginx
    • 服务器、Nginx与Linux
  • 🌒Koa2与MySQL
    • Part1 - Koa2
    • Part2 - MySQL
  • 🌓CMS全栈笔记
    • Part1-TypeScript
    • Part2-React+TS
    • Part3-Koa与MySQL
    • Part4-React+Antd+TS开发后台界面
    • Part5-前后端登录注册实现
    • Part6-前后端图片上传
    • Part7-文章模块开发
    • Part8-Nuxt+ElementUI开发官网
    • Part9-服务器选购与基本配置
    • Part10-SSR渲染与线上部署
  • 🌔Gulp前端自动化
    • Gulp入门与项目实战
  • 🌕更多学习资料
由 GitBook 提供支持
在本页
  • 一、修饰符
  • 1、事件修饰符
  • 2、按键修饰符
  • 3、系统修饰键

这有帮助吗?

  1. Vue2全家桶

Part5-《TodoList》项目实战

一、修饰符

修饰符分两种,一种是事件修饰符,一种是按键修饰符。

1、事件修饰符

  • .stop 阻止事件冒泡

  • .prevent 阻止默认事件

  • .prevent.stop 阻止默认事件的同时阻止冒泡

  • .once 阻止事件重复触发(once与stop不能一起使用,否则再次触发事件,依然会冒泡)

2、按键修饰符

在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

<input v-on:keyup.enter="submit">
<input v-on:keyup.13="submit">

为了在必要的情况下支持旧浏览器,Vue 提供了绝大多数常用的按键码的别名:

  • .enter

  • .tab

  • .delete (捕获“删除”和“退格”键)

  • .esc

  • .space

  • .up

  • .down

  • .left

  • .right

3、系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

  • .ctrl

  • .alt

  • .shift

  • .meta

<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>

注意:

上一页Part4-Webpack与脚手架下一页Part6-开发常用知识点

最后更新于3年前

这有帮助吗?

🌖
image-20200716202014266