Vue3 快速上手教程：核心指令详解 + Axios 网络请求｜前端入门必备
一、认识 Vue
1. 什么是 Vue
Vue 是一套渐进式 JavaScript 框架，用于构建用户界面。
渐进式：按需使用，可以只用来替换页面局部，也可以搭建完整大型项目。
- 优点：上手简单、双向绑定、虚拟 DOM、生态完善
- 核心思想：数据驱动视图，修改数据自动更新页面，无需手动操作 DOM
2. Vue3 快速入门 HelloVue
使用步骤
- 通过 script 引入 Vue3 官方模块
- 使用
createApp()创建 Vue 应用实例 - 使用
mount()绑定页面容器（div） - 在 data 中定义数据，通过插值表达式
{{ }}渲染页面
基础示例代码
<div id="app"> <h1>{{ message }}</h1> <p>{{ count }}</p> </div> <script type="module"> import { createApp } from 'https://unpkg.com/vue3/dist/vue.esm-browser.js' createApp({ data(){ return { message: "Hello Vue", count: 100 } } }).mount('#app') </script>插值表达式
{{ }}：只能写在标签内容中，不能直接写在标签属性上！
二、Vue 核心常用指令
指令：HTML 标签上以v-开头的特殊属性，拓展标签功能。
| 指令 | 作用 |
|---|---|
v-for | 列表循环，渲染数组 / 对象 |
v-bind | 动态绑定标签属性（简写:） |
v-if / v-else-if / v-else | 条件渲染，控制元素创建销毁 |
v-show | 控制元素显示隐藏（css 切换） |
v-model | 表单双向数据绑定 |
v-on | 绑定页面事件（简写@） |
1. v-for 列表渲染
作用：遍历数组，批量生成页面元素 语法：
<tr v-for="(item, index) in empList" :key="item.id">item：遍历得到的数组元素index：下标索引（可选）:key：必填，推荐使用唯一 id，提升渲染性能，不要直接使用 index
⚠️ 注意：遍历的数据必须在 data 中定义
2. v-bind 属性绑定
作用：动态给 HTML 标签绑定属性（src、href、class、style 等） 简写：:
<!-- 完整写法 --> <img v-bind:src="item.image"> <!-- 简写 --> <img :src="item.image">重点坑点：标签属性上不能直接写插值表达式，必须使用 v-bind！
3. v-if vs v-show（显示隐藏）
v-if
条件成立：创建 DOM 元素；条件不成立：直接移除 DOM 适合：元素很少切换、一次性显示 / 隐藏场景 支持配套：v-else-if、v-else
v-show
无论条件真假，DOM 始终存在；通过display:none控制显示隐藏 适合：频繁切换显示隐藏的场景
核心区别总结
- v-if：操作 DOM 树，切换开销大
- v-show：仅操作 CSS 样式，切换开销小
4. v-model 双向绑定
作用：表单元素双向数据绑定，快速获取 / 修改表单输入内容 仅适用于：input、select、textarea 等表单标签
<input v-model="searchName" placeholder="请输入名称">单向绑定：数据→页面；双向绑定：数据↔页面，页面修改自动同步变量
5. v-on 事件绑定
作用：给 HTML 标签绑定点击、输入等事件 简写：@
<!--完整写法 --> <button v-on:click="searchFunc">搜索</button> <!--简写 --> <button @click="searchFunc">搜索</button>三、Axios 网络请求
1. 什么是 Ajax & Axios
- Ajax：异步 JavaScript 和 XML，实现页面不刷新，与服务器交换数据、局部更新页面
- Axios：基于 Ajax 封装的网络请求库，Vue 项目首选，用来调用后端接口
2. Axios 基础使用
- 引入 Axios
axios.get()/axios.post()发送请求.then()接收成功响应；.catch()捕获异常
基础示例
axios.get('/api/emp/list').then(res=>{ console.log(res.data) }).catch(err=>{ console.log("请求失败",err) })四、综合实战：员工列表案例
整合指令实现功能：
- v-for 渲染员工表格列表
- v-bind 绑定头像、属性
- v-if 做职位条件展示
- v-model 绑定搜索框
- v-on 绑定搜索按钮点击事件
- Axios 加载后端员工数据
五、开发避坑总结
{{ }}插值表达式只能写标签内部，属性上必须用 v-bind- v-for 务必添加 key，优先使用唯一 id，不要滥用 index
- 频繁切换显示隐藏优先 v-show；极少切换使用 v-if
- v-model只能用于表单标签，普通 div、span 无法使用
- Vue 实例挂载容器，只会渲染容器内部元素，不要挂载 body/html
- Axios 属于异步代码，不要直接同步获取请求结果
六、文末总结
Vue3 核心基础就是数据驱动视图，不用频繁操作 DOM。 掌握六大基础指令后，结合 Axios 发起后端请求，就能完成绝大多数前端页面开发，是学习 Vue 项目开发的必备基础。