一、掌握知识：页面三大基础核心能力

1. @status 状态管理

status 是项目里最常用的状态标识，用来标记页面、组件、接口的不同状态，对应前缀@是框架里响应式变量的常用标记写法。

常见使用场景

• 接口请求状态：status: loading / success / error，控制加载动画、成功提示、失败兜底文案
• 弹窗显隐状态：status: show / hide，控制弹窗打开关闭
• 按钮权限状态：status: disabled / editable，控制按钮是否可点击、输入框是否可编辑

简单示例：

<script setup>
// 定义响应式状态
const status = ref('loading')
</script>

<template>
  <div v-if="status === 'loading'">加载中...</div>
  <div v-if="status === 'success'">数据加载完成</div>
  <div v-if="status === 'error'">加载失败，请重试</div>
</template>

2. 弹窗

弹窗是页面弹出层交互组件，依托status状态控制显示隐藏，分为全局弹窗、组件内弹窗。

弹窗核心逻辑

1. 定义布尔 / 字符串状态控制显隐
2. 触发事件修改状态打开弹窗
3. 弹窗内部关闭按钮修改状态关闭弹窗

代码示例：

<script setup>
const popStatus = ref(false)
// 打开弹窗
const openPop = () => popStatus.value = true
// 关闭弹窗
const closePop = () => popStatus.value = false
</script>

<template>
  <button @click="openPop">打开弹窗</button>
  <!-- 弹窗组件 -->
  <div v-if="popStatus" class="mask">
    <div class="dialog">
      <p>弹窗内容区域</p>
      <button @click="closePop">关闭</button>
    </div>
  </div>
</template>

常见弹窗类型

提示弹窗alert、确认弹窗confirm、表单弹窗、底部抽屉弹窗、图片预览弹窗。

3. 路由

路由负责页面之间的跳转、地址管理、页面传参，是多页面项目必备能力。

两大核心操作

1. 编程式跳转：JS 代码控制页面切换

javascript

运行

// 跳转到指定页面
router.push('/list')
// 携带参数跳转
router.push({ path: '/detail', query: { id: 1001 } })
// 返回上一页
router.back()

1. 声明式跳转：标签直接跳转（<router-link> / <Navigator>）

<router-link to="/home">首页</router-link>

路由配套知识点

• 路由传参：query（地址栏可见参数）、params（隐式参数）
• 路由守卫：页面跳转前做权限校验、登录拦截
• 路由懒加载：优化首屏加载速度

二、事件：页面交互核心触发函数

所有用户操作（点击、输入切换）都靠事件监听实现，下面两个是开发最高频事件。

1. onChange 变更事件

触发时机：组件值发生改变时执行，常用于输入框、下拉选择、单选 / 复选框、开关组件。

基础语法

javascript

运行

onChange(() => {
  // 值变化后执行逻辑
  console.log('组件值已修改')
})

实际场景示例

下拉选择切换选项、输入框失去焦点获取内容、开关切换状态：

<select @onChange="handleChange">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
</select>

javascript

运行

const handleChange = () => {
  // 拿到新值，发起接口请求、更新页面数据
}

2. onClick 点击事件

触发时机：鼠标 / 手指点击元素时执行，按钮、卡片、文字、图标全部通用。

基础语法

javascript

运行

onClick(() => {
  // 点击后执行逻辑
  console.log("元素被点击了")
})

常用业务场景

• 按钮提交、重置、删除操作
• 打开弹窗、跳转路由
• 展开 / 收起面板、切换标签

<button @onClick="submitForm">提交表单</button>

javascript

运行

const submitForm = () => {
  // 表单校验 + 调用提交接口
}

三、知识总结

1. @status 状态：一切动态显示、交互切换的底层基础，弹窗、加载、权限全部依赖状态控制；
2. 弹窗：基于状态的弹出层交互，核心逻辑就是「修改状态控制显隐」；
3. 路由：负责页面跳转与页面间数据传递，实现多页面应用；
4. onChange：监听组件数值变化，适合选择、输入类交互；
5. onClick：监听点击行为，所有按钮、点击操作统一使用。