//这里有一点问题,这个回车事件的监听是全局的
//所以不论你的鼠标在什么位置,都可以进行回车登录
//所以如果你想要值在空内进行回车响应,可以拿到鼠标位置进行判断
这里就要知道一对生命周期函数。稍微讲解一下下:
Vue 生命周期函数是指在 Vue 实例从创建到销毁的整个生命周期中,Vue 提供的一系列回调函数。这些回调函数可以在特定的时刻执行相关的操作,例如数据初始化、组件更新、DOM 渲染等。
Vue 生命周期函数包括以下四个阶段:
- 创建阶段:beforeCreate、created
- 挂载阶段:beforeMount、mounted
- 更新阶段:beforeUpdate、updated
- 销毁阶段:beforeDestroy、destroyed
这些生命周期函数的使用方法如下:
- beforeCreate:在实例创建之前执行,此时还没有调用 data 选项中定义的数据和 methods 方法。
- created:实例创建完成后执行,此时已经完成了数据的观测,但是尚未挂载DOM,$el 属性尚不可用。
- beforeMount:在挂载之前执行,相关的 render 函数首次被调用。可以在此时对实例进行渲染。
- mounted:实例已经挂载到 DOM 上后执行,$el 属性可用。
- beforeUpdate:数据更新时执行,此时组件已经更新,但是尚未渲染新的 DOM。
- updated:数据更新后执行,此时组件已经更新了 DOM。
- beforeDestroy:实例销毁之前执行,可以在此时进行清理操作。
- destroyed:实例已经销毁之后执行,可以在此时进行资源清理。
通过这些生命周期函数,我们可以在 Vue 实例的不同阶段执行相关的操作,从而实现更灵活的控制和管理。
在本示例中,我们已知有登录函数:onSubmit()
先导入一下其中两个函数:
import { onMounted, onBeforeMount } from 'vue'
设置一个回车函数:
//当键盘输入值为enter时是回车事件,这时才使用onSubmit
function onKeyup(e) {
console.log(e);
if(e.key=="Enter"){
onSubmit()
}
}
获取到键盘keyup事件:
//在这里,"keyup"是一个事件名,表示键盘按键被释放的事件。当用户释放一个键盘按键时,浏览器会触发该事件。
//document.addEventListener("keyup", onKeyup) 这行代码的意思是,在文档(即整个网页)上添加一个
//监听器,当发生"keyup"事件时,执行名为"onKeyup"的函数。所以,当用户在网页上释放键盘按键
//时,"onKeyup"函数就会被调用。
//这种事件处理程序通常用于响应用户的输入,例如,你可能想要在用户按下并释放一个键时执行某些操作,或
//你可能想要捕捉特定的按键组合以实现快捷键功能等。
document.addEventListener("keyup", onKeyup)
在生命周期函数内分别调用和注销他:
onMounted(() => {
//监听键盘事件
document.addEventListener("keyup", onKeyup)
})
onBeforeMount(()=>{
document.removeEventListener("keyup",onKeyup)
})