Vue3 + Axios 实战：从入门到动态数据交互

一、Vue3 快速入门

1.1 基础环境搭建

通过 CDN 引入 Vue3，快速创建响应式应用：

html

<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: 100
      }
    }
  }).mount('#app'); // 挂载到指定DOM元素
</script>

• 数据绑定：使用 {{ }} 插值表达式动态渲染数据

• 挂载机制：mount() 方法将 Vue 实例与页面元素绑定

二、Vue 核心指令实战

2.1 双向绑定与事件处理

html

<input v-model="searchForm.name"> <!-- 双向数据绑定 -->
<button @click="search">查询</button> <!-- 事件绑定简写 -->

• v-model：实现表单输入与数据的双向绑定

• @click：绑定点击事件，触发 methods 中定义的方法

2.2 条件渲染与列表渲染

html

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

• v-for：遍历数组生成动态内容，:key 提升渲染性能

• v-if vs v-show：

  • v-if：条件为假时元素从 DOM 移除

  • v-show：通过 display: none 控制显示

三、Axios 异步请求详解

3.1 基础请求配置

javascript

// GET 请求
axios({
  url: 'https://api.example.com/data',
  method: 'GET'
}).then(response => {
  console.log(response.data);
});

// POST 请求
axios.post('https://api.example.com/update', { id: 1 })
  .then(response => {
    console.log('更新成功');
  });

• 全局配置：可设置 baseURL 和 timeout

3.2 请求方式别名

javascript

axios.get(url)    // GET
axios.post(url, data) // POST
axios.put(url, data)  // PUT
axios.delete(url) // DELETE

四、企业级案例：员工管理系统

4.1 数据动态加载

结合 Vue 生命周期钩子实现初始化数据加载：

javascript

mounted() {
  this.loadData(); // 页面加载完成后自动调用
},
methods: {
  async loadData() {
    const res = await axios.get('https://api.example.com/emps');
    this.empList = res.data.data;
  }
}

4.2 搜索与重置功能

javascript

methods: {
  search() {
    axios.get(`/emps?name=${this.searchForm.name}`)
      .then(res => {
        this.empList = res.data.data;
      });
  },
  clear() {
    this.searchForm = { name: '', gender: '' };
    this.search(); // 清空后重新查询
  }
}

五、核心知识点对比

六、开发技巧

1. 性能优化：

   • 列表渲染始终使用 :key

   • 频繁切换显示用 v-show，条件稳定用 v-if

2. 异步处理：

   • 使用 async/await 简化 Promise 链

   • 在 Vue 的 mounted 钩子中初始化数据

3. 调试技巧：

   • 使用 Vue Devtools 检查数据流

   • 利用浏览器 Network 面板监控请求

七、总结

通过本文，您已掌握：

• Vue3 核心指令与数据绑定

• Axios 实现 RESTful API 交互

欢迎评论区交流！！