Web前端

Vue+Ajax

Vue+Ajax

理论篇

  • Vue 概述与特性

    • Vue：用于构建用户界面的渐进式 JavaScript 框架（可局部改造或工程化开发）。
    • 渐进式：学一点用一点，核心包 + 生态（声明式渲染、组件系统、路由、状态管理、构建工具）。
    • 构建界面思路：基于数据渲染用户可见的界面（数据驱动视图）。

  • Vue 使用固定步骤（入门三步）

    1. 引入 Vue 模块（ES 模块构建版本，type="module"）
    2. 创建应用实例（createApp）
    3. 准备元素（div），交给 Vue 控制（mount）

  • 常见指令（用于数据绑定与渲染）

    • v-for：列表渲染
    • v-bind（:）：动态绑定属性
    • v-if / v-else-if / v-else：条件渲染（创建/移除节点）
    • v-show：条件显示（CSS display 切换）
    • v-model：表单双向绑定
    • v-on（@）：事件绑定

  • Axios 与 Ajax 概述

    • Ajax：异步请求技术；与服务器交换数据，局部刷新页面。
    • Axios：对原生 Ajax 封装，简化请求编写；支持配置对象与方法别名（get/post）。

  • 同步与异步

    • 同步：请求未返回前页面被阻塞。
    • 异步：请求进行中页面可继续其他操作。

  • Vue 生命周期（重点）

    • mounted：挂载完成，页面渲染成功，常用于页面初始化时发送异步请求加载数据。

  • 书写规范与注意

    • JS 结尾分号可选，项目内建议统一。
    • Vue data 必须通过 data() return { ... } 返回对象。
    • 插值表达式中的变量必须在 data 中定义。
    • Vue 接管范围仅限 mount 指定的容器内。

代码篇

Vue 快速入门

作用/概念简述

  • 完成 Vue 的最小可运行结构：引入模块、创建实例、挂载容器、用数据驱动视图。

通用模版

<div id="app">
  {{message}}
</div>
<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  createApp({
    data(){
      return { message: 'Hello Vue' }
    }
  }).mount('#app')
</script>

属性/知识点表格

点说明
type="module"引入 ES 模块版本 Vue
createApp创建应用实例
data()返回 Vue 数据模型对象
mount('#app')接管指定容器

片段代码案例

<div id="app">
  <h1>{{message}}</h1>
  <h1>{{count}}</h1>
</div>
<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  createApp({
    data() {
      return { message: 'hello vue', count: 0 }
    }
  }).mount('#app')
</script>

v-for 列表渲染

作用/概念简述

  • 遍历数组渲染列表项；需提供唯一 key，提升渲染性能与复用正确性。

通用模版

<tr v-for="(item, index) in items" :key="item.id">
  {{ index }} - {{ item.name }}
</tr>

属性/知识点表格

属性/语法说明
v-for="(item, index) in items"遍历数组 items
:key唯一标识，推荐用 item.id
index从 0 开始的下标，可省略

片段代码案例

<tbody>
  <tr v-for="(emp, index) in empList" :key="emp.id">
    <td>{{ index + 1 }}</td>
    <td>{{ emp.name }}</td>
    <td>{{ emp.gender == 1 ? '男' : '女' }}</td>
  </tr>
</tbody>

v-bind（:）动态属性

作用/概念简述

  • 动态为标签属性绑定值（如 src、href、style 等）。

通用模版

<img :src="item.image" :alt="item.name">

属性/知识点表格

语法说明
v-bind:attr="expr"完整写法
:attr="expr"简写

片段代码案例

<td><img :src="emp.image" :alt="emp.name" class="avatar"></td>

v-if / v-show 条件渲染

作用/概念简述

  • v-if：条件为真时创建节点，为假时移除节点（适用于不频繁切换）
  • v-show：始终渲染，通过 CSS display 切换显示（适用于频繁切换）

通用模版

<span v-if="cond">显示</span>
<span v-else>隐藏</span>

<span v-show="cond">显示/隐藏</span>

属性/知识点表格

指令原理适用场景
v-ifDOM 创建/移除不频繁切换
v-showCSS display 切换频繁切换

片段代码案例

<td>
  <span v-if="emp.job == 1">班主任</span>
  <span v-else-if="emp.job == 2">讲师</span>
  <span v-else-if="emp.job == 3">学工主管</span>
  <span v-else-if="emp.job == 4">教研主管</span>
  <span v-else-if="emp.job == 5">咨询师</span>
</td>

v-model 双向绑定

作用/概念简述

  • 在表单控件与数据之间建立双向绑定，便捷获取/设置表单值。

通用模版

<input type="text" v-model="form.name">
<select v-model="form.gender">
  <option value="">性别</option>
  <option value="1">男</option>
  <option value="2">女</option>
</select>

属性/知识点表格

点说明
v-model数据与视图双向同步
绑定变量位置必须在 data() 中定义

片段代码案例

<input type="text" v-model="searchEmp.name" placeholder="姓名" />
<select v-model="searchEmp.gender">
  <option value="">性别</option>
  <option value="1">男</option>
  <option value="2">女</option>
</select>
<select v-model="searchEmp.job">
  <option value="">职位</option>
  <option value="1">班主任</option>
  <option value="2">讲师</option>
  <option value="3">学工主管</option>
  <option value="4">教研主管</option>
  <option value="5">咨询师</option>
</select>

v-on（@）事件绑定

作用/概念简述

  • 为元素添加事件监听；写法简洁，方法放在 methods 中。

通用模版

<button type="button" @click="handle">提交</button>
<script type="module">
  // ...
  methods: {
    handle(){ /* ... */ }
  }
</script>

属性/知识点表格

写法说明
v-on:click="fn"完整写法
@click="fn"简写
thismethods 内的 this 指向 Vue 实例

片段代码案例

<button type="button" @click="search">查询</button>
<button type="button" @click="clear">清空</button>
<script type="module">
  // ...
  methods: {
    search(){ console.log(this.searchEmp) },
    clear(){ this.searchEmp = { name:'', gender:'', job:'' } }
  }
</script>

生命周期：mounted 初始化加载

作用/概念简述

  • 组件挂载完成后触发，常用于页面初始化自动发送 Ajax 请求加载数据。

通用模版

mounted() {
  // 页面渲染完成，可安全操作DOM或发请求
  this.search();
}

属性/知识点表格

钩子时机
mounted挂载完成，页面已渲染

片段代码案例

methods: {
  async search() {
    const result = await axios.get(`https://web-server.itheima.net/emps/list`, {
      params: { name: this.searchEmp.name, gender: this.searchEmp.gender, job: this.searchEmp.job }
    });
    this.empList = result.data.data;
  },
  clear() {
    this.searchEmp = { name: '', gender: '', job: '' };
    this.search();
  }
},
mounted() {
  this.search();
}

Axios 引入与基础请求

作用/概念简述

  • 通过 Axios 发送异步请求，获取或提交数据；支持配置对象写法与方法别名。

通用模版

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  // 配置对象写法
  axios({
    url: '请求地址',
    method: 'get' // 或 'post'
  }).then(res => { console.log(res.data) })
    .catch(err => { console.log(err) })
</script>

属性/知识点表格

配置项说明
url请求地址
method请求方法（get/post）
params拼接到 URL 的参数（GET）
data请求体（POST）

片段代码案例

<button id="getData">GET</button>
<button id="postData">POST</button>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  document.querySelector('#getData').onclick = function() {
    axios({ url:'https://mock.apifox.cn/m1/3083103-0-default/emps/list', method:'get' })
      .then(res => console.log(res.data))
  }
  document.querySelector('#postData').onclick = function() {
    axios({ url:'https://mock.apifox.cn/m1/3083103-0-default/emps/update', method:'post', data:'id=1' })
      .then(res => console.log(res.data))
  }
</script>

Axios 方法别名

作用/概念简述

  • 简化请求书写：axios.get(url[, config])、axios.post(url, data[, config])。

通用模版

axios.get('url').then(res => { ... })
axios.post('url', 'key=val').then(res => { ... })

属性/知识点表格

别名说明
axios.get(url[, config])GET 请求
axios.post(url, data[, config])POST 请求

片段代码案例

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  axios.get('https://mock.apifox.cn/m1/3083103-0-default/emps/list')
       .then(result => console.log(result.data));

  axios.post('https://mock.apifox.cn/m1/3083103-0-default/emps/update','id=1')
       .then(result => console.log(result.data));
</script>

在 Vue 中用 Axios 异步获取员工列表

作用/概念简述

  • 在 Vue 中结合 v-model/v-for 指令与 Axios 请求，实现动态查询与数据渲染。

通用模版

<div id="container">
  <!-- 表单与表格略 -->
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  createApp({
    data(){ return { searchEmp:{ name:'', gender:'', job:'' }, empList:[] } },
    methods:{
      async search(){
        const result = await axios.get('接口地址', { params: this.searchEmp })
        this.empList = result.data.data
      },
      clear(){ this.searchEmp = { name:'', gender:'', job:'' }; this.search(); }
    },
    mounted(){ this.search(); }
  }).mount('#container')
</script>

属性/知识点表格

点说明
paramsGET 查询参数，自动拼接到 URL
dataPOST 请求体
async/await让异步代码更易读（顺序执行风格）
mounted 初始化页面加载完成自动查询

片段代码案例

<div id="container">
  <form class="search-form">
    <input type="text" v-model="searchEmp.name" placeholder="姓名" />
    <select v-model="searchEmp.gender">
      <option value="">性别</option>
      <option value="1">男</option>
      <option value="2">女</option>
    </select>
    <select v-model="searchEmp.job">
      <option value="">职位</option>
      <option value="1">班主任</option>
      <option value="2">讲师</option>
      <option value="3">学工主管</option>
      <option value="4">教研主管</option>
      <option value="5">咨询师</option>
    </select>
    <button type="button" @click="search">查询</button>
    <button type="button" @click="clear">清空</button>
  </form>

  <table class="table">
    <tbody>
      <tr v-for="(emp, index) in empList" :key="emp.id">
        <td>{{ index + 1 }}</td>
        <td>{{ emp.name }}</td>
        <td>{{ emp.gender == 1 ? '男' : '女' }}</td>
        <td><img :src="emp.image" :alt="emp.name" class="avatar"></td>
        <td>
          <span v-if="emp.job == 1">班主任</span>
          <span v-else-if="emp.job == 2">讲师</span>
          <span v-else-if="emp.job == 3">学工主管</span>
          <span v-else-if="emp.job == 4">教研主管</span>
          <span v-else-if="emp.job == 5">咨询师</span>
        </td>
        <td>{{ emp.entrydate }}</td>
        <td>{{ emp.updatetime }}</td>
      </tr>
    </tbody>
  </table>
</div>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  createApp({
    data() {
      return { searchEmp: { name:'', gender:'', job:'' }, empList: [] }
    },
    methods: {
      async search() {
        let result = await axios.get('https://web-server.itheima.net/emps/list', {
          params: { name: this.searchEmp.name, gender: this.searchEmp.gender, job: this.searchEmp.job }
        });
        this.empList = result.data.data;
      },
      clear() {
        this.searchEmp = { name:'', gender:'', job:'' };
        this.search();
      }
    },
    async mounted() { await this.search(); }
  }).mount('#container')
</script>
评论