Vue 学习笔记-2022/12/06

一、事件传参和多事件处理函数

$D$HF359Y_Y@JR@QR`WPK{RH$

二、事件修饰符

例如:

  点击跳转
  
  点击跳转

三、键盘鼠标修饰符

CPG%<code>JJ</code>0V0IDCBKTI9`~VW

原生键盘事件监听

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 生命周期执行完成之后，我们的应用还没有挂载到
app.mount()指定的
HTML 元素上，在挂载之前会调用
beforeMount() 生命周期钩子，这个时候应用还没在页面上渲染出来。

4. mounted

mounted() 会在应用挂载到
app.mount() 指定的
HTML 元素之后执行，这个时候应用已经在页面上渲染出来了。

5. beforeUpdate

当应用中的
HTML 模板需要重新渲染时，例如
data 中的属性发生了变化，那么在刷新之前会执行
beforeUpdate() 生命周期钩子.

6. updated

updated() 是在数据更新后、
HTML 重新渲染完成之后调用。

7. beforeUnmount

beforeUnmount() 会在应用卸载前执行，调用
app.unmount()会卸载组件，那么在正式卸载前，先执行
beforeUnmount() 生命周期钩子，这个时候
Vue 应用还是正常的，可以在里边做一些清理收尾操作。

8. unmounted

unmounted() 生命周期会在应用正式卸载之后调用，这个时候跟应用有关的事件监听，或者指令绑定都已经卸载了。

Vue 学习笔记-2022/12/06