Vue3

Vue3项目—页面布局与侧栏Menu 菜单 该Vue3项目采用Element-plus的Container 布局容器完成。 用于布局的容器组件，页面的基本结构如下： <el-container>：外层

Vue3项目—顶栏Dropdown 下拉菜单 默认情况下，只需要悬停在触发菜单的元素上即可，无需点击也会显示下拉菜单。 示例 效果： 项目实例 顶栏子组件： 效果：

1.配置路由文件 在src文件夹下建立自己的vue-router文件 2.修改入口文件App.vue 3.在main.ts中配置路由 4.在views下新建economy文件夹，并在该文件夹下新建ca

拓展 router-link router-link：实现路由跳转，相当于对a标签<a href=""/>的封装，是写在<template></template>标签里。 to：表示目标路由，通过传递

Vue3——404页面示例代码 实例 效果；Vue3——404页面示例代码 实例 效果；Vue3——404页面示例代码 实例 效果；

nextTick 使用nextTick获取最新的 DOM 元素内容，nextTick 使用nextTick获取最新的 DOM 元素内容，nextTick 使用nextTick获取最新的 DOM 元素内

选项/数据 一、computed 1.什么是computed computed 表示计算属性，通常用于处理数据，简化书写在模板中的复杂逻辑。使用 computed 可以将数据处理成我们想要的格式，无需

Vue3的生命周期 生命周期的概念理解：vue实例从创建、挂载、更新到销毁这一整个过程叫做生命周期。 Vue3生命周期的类型 选项式API 组合式API生命周期钩子(setup) beforeCrea

vue3的插槽 slot 作用：向一个组件传递内容，可使用插槽。通过插槽来分发内容，即插槽作为分发内容的出口。使用<slot>作为想要插入内容的占位符。 插槽的基本使用： 在向具名插槽提供内容的时候，

vue的插槽<slot> 作用：向一个组件传递内容，可使用插槽。通过插槽来分发内容，即插槽作为分发内容的出口。使用<slot>作为想要插入内容的占位符。 插槽的基本使用： 在向具名插槽提供内容的时候，

1.什么是computed computed 表示计算属性，通常用于处理数据，简化书写在模板中的复杂逻辑。使用 computed 可以将数据处理成我们想要的格式，无需在模板中使用复杂冗长的计算表达式。

Watch 作用：watch侦听器，可侦听响应式变量ref、reactive的数据变化。一旦数据发生变化，就自动执行监听回调。 语法 watch(source, (cur, pre) => {}) 参

watchEffect 作用：深度监听响应式变量ref、reactive的数据变化。 语法 watchEffect(( ) => { }) 参数 watchEffect有两个参数： 第一个参数是在发生

组件间传值defineProps、defineEmits defineProps:父组件向子组件通过defineProps传值 defineEmits：子组件向父组件通过自定义事件传值