vue和axios笔记

Vue 基础

1. Vue 简介

渐进式框架：可逐步集成到项目，适用于不同规模应用

核心特性：响应式数据绑定、组件系统、虚拟DOM

版本：Vue 2（Options API） / Vue 3（Composition API + 性能优化）

2. 核心概念

响应式数据

data() {
  return { count: 0 }  // 自动响应式
}
// Vue 3 使用 ref/reactive
const count = ref(0)
模板语法
插值：{{ message }}

指令：

v-bind → :id=“dynamicId”

v-on → @click=“handleClick”

v-model 双向绑定

v-for 列表渲染

v-if / v-show 条件渲染

组件系统

// 组件定义
Vue.component('my-component', {
  template: '<div>自定义组件</div>'
})
// Vue 3 使用 defineComponent

生命周期

重要钩子：created, mounted, updated, destroyed

Vue 3 新增：setup()（Composition API 入口）

Axios 笔记

一、基础概念

1. 核心特性

基于 Promise 的 HTTP 客户端

浏览器/Node.js 双平台支持

拦截器机制（请求/响应拦截）

自动转换 JSON 数据

取消请求支持

2. 安装与引入

npm install axios

// 全局引入
import axios from 'axios'
// 或按需创建实例
const instance = axios.create({ baseURL: 'https://api.example.com' })

二、基础使用

1. 请求方法

// GET 请求
axios.get('/user?ID=123')
  .then(response => console.log(response.data))
  .catch(error => console.error(error))

// POST 请求
axios.post('/user', { name: 'John', age: 30 })

2. 配置对象

axios({
  method: 'post',
  url: '/user',
  data: { ... },
  headers: { 'X-Custom-Header': 'value' },
  timeout: 5000,
  params: { ID: 123 }  // GET 参数
})

3. 默认配置

// 全局默认配置
axios.defaults.baseURL = 'https://api.example.com'
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN

// 实例级别配置
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000
})

跨域问题

Vue CLI项目 (vue.config.js)

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

Vite项目 (vite.config.js)

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
})