Vue 学习笔记-2022/12/06
一、事件传参和多事件处理函数
二、事件修饰符
例如:
点击跳转
点击跳转
三、键盘鼠标修饰符
原生键盘事件监听
document.addEventListener('keyup',(e) => {
console.log(e.keyCode);
})
Vue 键盘修饰符
@keyup.enter
+
Vue 鼠标修饰符
- {{ content }}
四、表单相关修饰符
1、 .lazy修饰符
2、修饰符
3、.trim修饰符
去除输入首尾空格
五、通过 Vue 实例访问和修改应用配置
六、生命周期钩子
为什么会被正成为钩子呢,是因为它们会在Vue的生命周期的不同阶段自动调用
在
在
app.mount()
开始周期 在app.unmount()
结束周期1. beforeCreate
beforeCreate()
钩子是在调用app.mount()
创建Vue 实例之后,
createApp()
中的配置项生效之前调用2. created
created()
钩子是在beforeCreate()
之后,reateApp()
中的配置项生效之后调用,这个时候计算属性、方法watcher 监听器已经配置好了。
3. beforeMount
在
created 生命周期执行完成之后,我们的应用还没有挂载到
HTML 元素上,在挂载之前会调用
created 生命周期执行完成之后,我们的应用还没有挂载到
app.mount()
指定的HTML 元素上,在挂载之前会调用
beforeMount()
生命周期钩子,这个时候应用还没在页面上渲染出来。4. mounted
mounted()
会在应用挂载到app.mount()
指定的HTML 元素之后执行,这个时候应用已经在页面上渲染出来了。
5. beforeUpdate
当应用中的
HTML 模板需要重新渲染时,例如
data 中的属性发生了变化,那么在刷新之前会执行
HTML 模板需要重新渲染时,例如
data 中的属性发生了变化,那么在刷新之前会执行
beforeUpdate()
生命周期钩子.6. updated
updated()
是在数据更新后、HTML 重新渲染完成之后调用。
7. beforeUnmount
beforeUnmount()
会在应用卸载前执行,调用app.unmount()
会卸载组件,那么在正式卸载前,先执行beforeUnmount()
生命周期钩子,这个时候Vue 应用还是正常的,可以在里边做一些清理收尾操作。
8. unmounted
unmounted()
生命周期会在应用正式卸载之后调用,这个时候跟应用有关的事件监听,或者指令绑定都已经卸载了。
此处评论已关闭