一、掌握知识页面三大基础核心能力1. status 状态管理status是项目里最常用的状态标识用来标记页面、组件、接口的不同状态对应前缀是框架里响应式变量的常用标记写法。常见使用场景接口请求状态status: loading / success / error控制加载动画、成功提示、失败兜底文案弹窗显隐状态status: show / hide控制弹窗打开关闭按钮权限状态status: disabled / editable控制按钮是否可点击、输入框是否可编辑简单示例script setup // 定义响应式状态 const status ref(loading) /script template div v-ifstatus loading加载中.../div div v-ifstatus success数据加载完成/div div v-ifstatus error加载失败请重试/div /template2. 弹窗弹窗是页面弹出层交互组件依托status状态控制显示隐藏分为全局弹窗、组件内弹窗。弹窗核心逻辑定义布尔 / 字符串状态控制显隐触发事件修改状态打开弹窗弹窗内部关闭按钮修改状态关闭弹窗代码示例script setup const popStatus ref(false) // 打开弹窗 const openPop () popStatus.value true // 关闭弹窗 const closePop () popStatus.value false /script template button clickopenPop打开弹窗/button !-- 弹窗组件 -- div v-ifpopStatus classmask div classdialog p弹窗内容区域/p button clickclosePop关闭/button /div /div /template常见弹窗类型提示弹窗alert、确认弹窗confirm、表单弹窗、底部抽屉弹窗、图片预览弹窗。3. 路由路由负责页面之间的跳转、地址管理、页面传参是多页面项目必备能力。两大核心操作编程式跳转JS 代码控制页面切换javascript运行// 跳转到指定页面 router.push(/list) // 携带参数跳转 router.push({ path: /detail, query: { id: 1001 } }) // 返回上一页 router.back()声明式跳转标签直接跳转router-link/Navigatorrouter-link to/home首页/router-link路由配套知识点路由传参query地址栏可见参数、params隐式参数路由守卫页面跳转前做权限校验、登录拦截路由懒加载优化首屏加载速度二、事件页面交互核心触发函数所有用户操作点击、输入切换都靠事件监听实现下面两个是开发最高频事件。1. onChange 变更事件触发时机组件值发生改变时执行常用于输入框、下拉选择、单选 / 复选框、开关组件。基础语法javascript运行onChange(() { // 值变化后执行逻辑 console.log(组件值已修改) })实际场景示例下拉选择切换选项、输入框失去焦点获取内容、开关切换状态select onChangehandleChange option value1选项1/option option value2选项2/option /selectjavascript运行const handleChange () { // 拿到新值发起接口请求、更新页面数据 }2. onClick 点击事件触发时机鼠标 / 手指点击元素时执行按钮、卡片、文字、图标全部通用。基础语法javascript运行onClick(() { // 点击后执行逻辑 console.log(元素被点击了) })常用业务场景按钮提交、重置、删除操作打开弹窗、跳转路由展开 / 收起面板、切换标签button onClicksubmitForm提交表单/buttonjavascript运行const submitForm () { // 表单校验 调用提交接口 }三、知识总结status 状态一切动态显示、交互切换的底层基础弹窗、加载、权限全部依赖状态控制弹窗基于状态的弹出层交互核心逻辑就是「修改状态控制显隐」路由负责页面跳转与页面间数据传递实现多页面应用onChange监听组件数值变化适合选择、输入类交互onClick监听点击行为所有按钮、点击操作统一使用。
