Vue3 快速上手教程：核心指令详解 + Axios 网络请求｜前端入门必备

一、认识 Vue

1. 什么是 Vue

Vue 是一套渐进式 JavaScript 框架，用于构建用户界面。

渐进式：按需使用，可以只用来替换页面局部，也可以搭建完整大型项目。

  • 优点：上手简单、双向绑定、虚拟 DOM、生态完善
  • 核心思想：数据驱动视图，修改数据自动更新页面，无需手动操作 DOM

2. Vue3 快速入门 HelloVue

使用步骤

  1. 通过 script 引入 Vue3 官方模块
  2. 使用createApp()创建 Vue 应用实例
  3. 使用mount()绑定页面容器（div）
  4. 在 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 基础使用

  1. 引入 Axios
  2. axios.get()/axios.post()发送请求
  3. .then()接收成功响应；.catch()捕获异常

基础示例

axios.get('/api/emp/list').then(res=>{ console.log(res.data) }).catch(err=>{ console.log("请求失败",err) })

四、综合实战：员工列表案例

整合指令实现功能：

  1. v-for 渲染员工表格列表
  2. v-bind 绑定头像、属性
  3. v-if 做职位条件展示
  4. v-model 绑定搜索框
  5. v-on 绑定搜索按钮点击事件
  6. Axios 加载后端员工数据

五、开发避坑总结

  1. {{ }}插值表达式只能写标签内部，属性上必须用 v-bind
  2. v-for 务必添加 key，优先使用唯一 id，不要滥用 index
  3. 频繁切换显示隐藏优先 v-show；极少切换使用 v-if
  4. v-model只能用于表单标签，普通 div、span 无法使用
  5. Vue 实例挂载容器，只会渲染容器内部元素，不要挂载 body/html
  6. Axios 属于异步代码，不要直接同步获取请求结果

六、文末总结

Vue3 核心基础就是数据驱动视图，不用频繁操作 DOM。 掌握六大基础指令后，结合 Axios 发起后端请求，就能完成绝大多数前端页面开发，是学习 Vue 项目开发的必备基础。