键盘事件
在 js 中我们通常通过绑定一个事件，去获取按键的编码，再通过 event 中的 keyCode 属性去获得编码
如果我们需要实现固定的键才能触发事件时就需要不断的判断，其实很麻烦
let button = document .querySelector ('button' )
button.onkeyup = function (e ) {
console .log (e.key )
if (e.keyCode == 13 ) {
console .log ('我是回车键' )
}
}
vue 中给一些常用的按键提供了别名，我们只要在事件后加上响应的别名即可vue 中常见别名有：up/向上箭头、down/向下箭头、left/左箭头、right/右箭头、space/空格、tab/换行、esc/退出、enter/回车、delete/删除
<input v-on :keyup.enter ="send" type="text" >
对于 Vue 中未提供别名的键，可以使用原始的 key 值去绑定，所谓 key 值就是 event.key 所获得的值
如果 key 值是单个字母的话直接使用即可，如果是由多个单词组成的驼峰命名，就需要将其拆开，用 - 连接
<input v-on :keyup.Q ="send" type="text" >
<input v-on:keyup.caps-lock ="send" type ="text" >
对于系统修饰符 ctrl、alt、shift 这些比较复杂的键使用而言，分两种情况
因为这些键可以在按住的同时，去按其他键，形成组合快捷键
当触发事件为 keydown 时，我们可以直接按下修饰符即可触发
当触发事件为 keyup 时，按下修饰键的同时要按下其他键，再释放其他键，事件才能被触发。
<input v-on :keydown.Alt ="send" type="text" >
<input v-on:keyup.Alt.y ="send" type ="text" >
当然我们也可以自定义按键别名
通过 Vue.config.keyCodes.自定义键名=键码 的方式去进行定义
<input v-on :keydown.autofelix ="send" type="text" >
Vue .config .keyCodes .autofelix =13
🎈 图片预览
在项目中我们经常需要使用到图片预览，viewerjs 是一款非常炫酷的图片预览插件
功能支持包括图片放大、缩小、旋转、拖拽、切换、拉伸等
安装 viewerjs 扩展
npm install viewerjs --save
import Vue from 'vue' ;
import 'viewerjs/dist/viewer.css' ;
import Viewer from 'v-viewer' ;
Vue .use (Viewer );
Viewer .setDefaults ({
'inline' : true ,
'button' : true ,
"navbar" : true ,
"title" : true ,
"toolbar" : true ,
"tooltip" : true ,
"movable" : true ,
"zoomable" : true ,
"rotatable" : true ,
"scalable" : true ,
"transition" : true ,
"fullscreen" : true ,
"keyboard" : true ,
"url" : "data-source" ,
ready : function (e ) {
console .log (e.type , '组件以初始化' );
},
show : function (e ) {
console .log (e.type , '图片显示开始' );
},
shown : function (e ) {
console .log (e.type , '图片显示结束' );
},
hide : function (e ) {
console .log (e.type , '图片隐藏完成' );
},
hidden : function (e ) {
console .log (e.type , '图片隐藏结束' );
},
view : function (e ) {
console .log (e.type , '视图开始' );
},
viewed : function (e ) {
console .log (e.type , '视图结束' );
if (e.detail .index === 1 ) {
this .viewer .rotate (20 );
}
},
zoom : function (e ) {
console .log (e.type , '图片缩放开始' );
},
zoomed : function (e ) {
console .log (e.type , '图片缩放结束' );
}
})
<template>
<div >
<viewer >
<img :src ="cover" style ="cursor: pointer;" height ="80px" >
</viewer >
</div >
</template > <script >
export default { data (return { cover : "//www.autofelix.com/images/cover.png"
} }}
</script > <template>
<div >
<viewer :images ="imgList" >
<img v-for ="(imgSrc, index) in imgList" :key ="index" :src ="imgSrc" />
</viewer >
</div > <script >
export default { data (return { imgList : [ "//www.autofelix.com/images/pic_1.png" , "//www.autofelix.com/images/pic_2.png" , "//www.autofelix.com/images/pic_3.png" , "//www.autofelix.com/images/pic_4.png" , "//www.autofelix.com/images/pic_5.png"
] } }}
</script > 相关vue实战视频讲解：进入学习
🎈 跑马灯
这是一款好玩的特效技巧
比如你在机场接人时，可以使用手机跑马灯特效，成为人群中最靓的仔
跑马灯特效其实就是将最前面的文字删除，添加到最后一个，这样就形成了文字移动的效果
<!DOCTYPE html>
<html lang ="en" >
<head >
<meta charset ="UTF-8" >
<title > 跑马灯</title >
<style type ="text/css" >
#app { padding : 20px ; } </style >
</head >
<body >
<div id ="app" >
<button @click ="run" > 应援</button >
<button @click ="stop" > 暂停</button >
<h3 > {{ msg }}</h3 >
</div >
</body >
<script src ="https://cdn.jsdelivr.net/npm/vue@2.7.0/dist/vue.min.js" > </script >
<script >
new Vue ({ el : "#app" , data : { msg : "飞兔小哥，飞兔小哥，我爱飞兔小哥~~~" , timer : null
}, methods : { run (if (this .timer ) return ; this .timer = setInterval (() => {
var arr = this .msg .split ('' );
arr.push (arr.shift ());
this .msg = arr.join ('' ); }, 100 ) }, stop (clearInterval (this .timer );
this .timer = null ; } } })
</script >
</html >
🎈 倒计时
对于倒计时技巧，应用的地方很多
比如很多抢购商品的时候，我们需要有一个倒计时提醒用户开抢时间
其实就是每隔一秒钟，去重新计算一下时间，并赋值到 DOM 中
<!DOCTYPE html>
<html lang ="en" >
<head >
<meta charset ="UTF-8" >
<title > 倒计时</title >
</head >
<body >
<div id ="app" >
<div > 抢购开始时间：{{count}}</div >
</div >
</body >
<script src ="https://cdn.jsdelivr.net/npm/vue@2.7.0/dist/vue.min.js" > </script >
<script >
new Vue ({ el : "#app" , data (return { count : '' ,
seconds : 864000
} }, mounted (this .Time ()
}, methods : {
countDown (let d = parseInt (this .seconds / (24 * 60 * 60 )) d = d < 10 ? "0" + d : d let h = parseInt (this .seconds / (60 * 60 ) % 24 ); h = h < 10 ? "0" + h : h let m = parseInt (this .seconds / 60 % 60 ); m = m < 10 ? "0" + m : m let s = parseInt (this .seconds % 60 ); s = s < 10 ? "0" + s : s this .count = d + '天' + h + '时' + m + '分' + s + '秒'
},
Time () { setInterval (() => { this .seconds -= 1
this .countDown () }, 1000 ) }, } })
</script >
</html >
🎈 自定义右键菜单
在项目中，我们有时候需要自定义鼠标右键出现的选项，而不是浏览器默认的右键选项
对于如何实现右键菜单，在 Vue 中其实很简单，只要使用 vue-contextmenujs 插件即可
安装 vue-contextmenujs 插件
npm install vue-contextmenujs
import Vue from 'vue' ;
import Contextmenu from "vue-contextmenujs"
Vue .use (Contextmenu );
使用方法
可以使用 <i class="icon"></i> 可以给选项添加图标
可以使用 style 标签自定义选项的样式
可以使用 disabled 属性禁止选项可以点击
可以使用 divided:true 设置选项的下划线
可以使用 children 设置子选项
<style>
.custom -class .menu_item__available :hover,
.custom -class .menu_item_expand {
background : lightblue !important;
color : #e65a65 !important;
}
</style>
<template >
<div style ="width:100vw;height:100vh" @contextmenu.prevent ="onContextmenu" > </div >
</template > <script >
import Vue from 'vue'
import Contextmenu from "vue-contextmenujs"
Vue .use (Contextmenu ); export default { methods : { onContextmenu (event ) { this .$contextmenu({ items : [ { label : "返回" , onClick : () => {
} }, { label : "前进" , disabled : true }, { label : "重载" , divided : true , icon : "el-icon-refresh" }, { label : "打印" , icon : "el-icon-printer" }, { label : "翻译" , divided : true , minWidth : 0 , children : [{ label : "翻译成中文" }, { label : "翻译成英文" }] }, { label : "截图" , minWidth : 0 , children : [ { label : "截取部分" , onClick : () => {
} }, { label : "截取全屏" } ] } ], event,
customClass : "custom-class" ,
zIndex : 3 ,
minWidth : 230
}); return false ; } } };
</script > 🎈 打印功能
对于网页支持打印功能，在很多项目中也比较常见
而 Vue 中使用打印功能，可以使用 vue-print-nb 插件
安装 vue-print-nb 插件
npm install vue-print-nb --save
import Vue from 'vue'
import Print from 'vue-print-nb'
Vue .use (Print );
<div id="printStart" >
<p > 红酥手，黄縢酒，满城春色宫墙柳。</p > <p > 东风恶，欢情薄。</p > <p > 一怀愁绪，几年离索。</p > <p > 错、错、错。</p > <p > 春如旧，人空瘦，泪痕红浥鲛绡透。</p > <p > 桃花落，闲池阁。</p > <p > 山盟虽在，锦书难托。</p > <p > 莫、莫、莫！</p > <button v-print ="'#printStart'" > 打印</button > 🎈 JSONP请求
jsonp 是 解决跨域 的主要方式之一所以学会在 vue 中使用 jsonp 其实还是很重要的
安装 jsonp 扩展
npm install vue-jsonp --save-dev
import Vue from 'vue'
import VueJsonp from 'vue-jsonp'
Vue .use (VueJsonp )
import { createApp } from 'vue'
import App from './App.vue'
import VueJsonp from 'vue-jsonp'
createApp (App ).use (VueJsonp ).mount ('#app' )
使用方法
需要注意的是，在使用 jsonp 请求数据后，回调并不是在 then 中执行
而是在自定义的 callbackName 中执行,并且需要挂载到 window 对象上
<script>
export default {
data (created (this .getUserInfo ()
},
mounted (window .jsonpCallback = (data ) => {
console .log (data)
}
},
methods : {
getUserInfo (this .$jsonp(this .url , {
callbackQuery : "callbackParam" ,
callbackName : "jsonpCallback"
})
.then ((json ) => {
console .log (json)
})
}
}
}
</script>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南