Vue技术7.3键盘事件
2023-09-27 14:26:24 时间
<!DOCTYPE html>>
<html>
<head>
<mata charset="UTF-8"/>
<title>键盘事件</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
1.Vue中常用的按键别名:
回车 => enter
删除 => delete(捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab(特殊,必须配合keydown使用)
上 => up
下 => down
左 => left
右 => right
2.Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)
3.系统修饰符(用法特殊):ctrl、alt、shift、meta
(1)配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。
(2)配合keydown使用:正常触发事件。
4.也可以使用keyCode去指定具体的按键(不推荐)
5.Vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名
-->
<!-- 准备好一个容器 -->
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
name:'尚硅谷'
},
methods:{
showInfo(e){
console.log(e.target.value)
}
}
})
</script>
</html>
相关文章
- 结合Vue.js的前端压缩图片方案
- Vue中全局事件总线
- Vue 中自定义事件
- Ant Design Vue 中Drawer自定头部的样式、内容部分的样式、弹出层的样式
- 微信小程序四六级小助手平台+后台管理系统|前后分离VUE
- vue.js v-bind动态绑定class对象语法
- 32.Vue:自定义事件组件交互
- vue axios请求频繁时取消上一次请求
- Vue-基础(二)
- Vue技术7.1事件的基本使用
- Vue笔记——计算属性、内容分发、自定义事件(狂神)
- VUE模块划分
- 基于Vue的事件响应式进度条组件
- Vue—事件修饰符
- Vue中的$emit组件事件运用
- vue学习(基础上)
- vue中的 v-if与jquery中的hide()有什么区别 vue如何在控制台修改数据
- 【Vue 开发实战】生态篇 # 25:单元测试的重要性及其使用
- Vue.js面试题整理
- Vue 2.0 构建单页应用最佳实战
- Vue-Router + Webpack 路由懒加载实现
- 用Vue.js 和 vue-router 创建单页导航和分页
- vue——使用$router.push跳转无效
- vue——利用intersectionOberver实现全局appear/disappear事件
- vue 自定义事件