Vue 2.0 详解全教程（含 Axios 封装 + 路由守卫 + 实战进阶）

---

一、Vue 2.0 简介

1.1 什么是 Vue？

Vue 是一款轻量、渐进式的 JavaScript 框架，用于构建用户界面。它专注于视图层，易于上手，也支持复杂的单页应用开发。

1.2 Vue 2.x 的主要特性

• 响应式数据绑定
• 组件化开发
• 指令系统
• 生命周期钩子
• 计算属性 & 侦听器
• 内置过渡 & 动画支持
• 强大的插件生态

---

二、快速上手

2.1 引入 Vue

<!-- CDN 引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

2.2 创建第一个 Vue 实例

<div id="app">
  <h1>{{ message }}</h1>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue 2!'
    }
  });
</script>

---

三、核心概念详解

3.1 模板语法

• 插值：{{ message }}
• 属性绑定：:href=“url”
• 条件渲染：v-if / v-else / v-show
• 列表渲染：v-for

3.2 数据绑定

<div>{{ message }}</div>
<input v-model="message">

3.3 事件绑定

<button v-on:click="greet">点击</button>

<script>
methods: {
  greet() {
    alert('Hello Vue!');
  }
}
</script>

3.4 计算属性 & 侦听器

<p>反转消息: {{ reversedMessage }}</p>

<script>
computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  }
}
</script>

---

四、组件系统

4.1 定义全局组件

Vue.component('my-component', {
  template: '<div>这是一个组件</div>'
});

4.2 单文件组件（*.vue 文件）

结构：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: '单文件组件'
    };
  }
}
</script>

<style scoped>
div { color: blue; }
</style>

4.3 父子组件通信

• props 传值

<child :message="parentMsg"></child>

<script>
props: ['message']
</script>

• $emit 事件派发

<child @custom-event="parentMethod"></child>

<script>
// 子组件
this.$emit('custom-event', data);
</script>

---

五、指令系统

指令	作用
v-bind	动态绑定属性
v-model	双向数据绑定
v-if	条件渲染
v-show	条件显示（不销毁 DOM）
v-for	列表循环
v-on	绑定事件监听器
v-html	输出 HTML 内容
v-cloak	防止闪烁

---

六、生命周期钩子

钩子名	触发时机
beforeCreate	实例初始化后，数据观测和事件配置之前
created	实例创建完成，数据观测和事件配置之后
beforeMount	挂载开始之前
mounted	挂载完成之后
beforeUpdate	数据更新前
updated	数据更新后
beforeDestroy	实例销毁前
destroyed	实例销毁后

---

七、过渡 & 动画

<transition name="fade">
  <p v-if="show">淡入淡出效果</p>
</transition>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

---

八、Vue Router 路由系统

8.1 安装

npm install vue-router

8.2 配置路由

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './Home.vue';
import About from './About.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = new VueRouter({
  routes
});

new Vue({
  router
}).$mount('#app');

---

九、Vuex 状态管理

9.1 安装

npm install vuex

9.2 基本使用

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

new Vue({
  store
});

---

十、Axios 网络请求

10.1 安装

npm install axios

10.2 基础使用

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  });

---

十一、进阶实战：Axios 封装

在项目中，推荐将 Axios 封装为独立模块，方便管理接口、处理全局错误等。

11.1 封装 http.js

// src/utils/http.js
import axios from 'axios';

const service = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000
});

// 请求拦截器
service.interceptors.request.use(config => {
  // 可在这里统一携带 token
  // config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
  return config;
}, error => {
  return Promise.reject(error);
});

// 响应拦截器
service.interceptors.response.use(response => {
  return response.data;
}, error => {
  console.error('请求出错：', error);
  alert(error.response?.data?.message || '请求失败');
  return Promise.reject(error);
});

export default service;

11.2 使用封装

import http from '@/utils/http';

http.get('/users')
  .then(data => {
    console.log('用户数据：', data);
  });

---

十二、进阶实战：路由守卫

Vue Router 支持全局、单个路由、组件内守卫，可用于权限控制。

12.1 添加守卫

// router/index.js
router.beforeEach((to, from, next) => {
  const isLoggedIn = !!localStorage.getItem('token');
  if (to.meta.requiresAuth && !isLoggedIn) {
    next('/login');
  } else {
    next();
  }
});

12.2 路由配置示例

{
  path: '/dashboard',
  component: Dashboard,
  meta: { requiresAuth: true }
}

---

十三、进阶实战：统一 API 管理

推荐将接口集中管理，避免硬编码。

13.1 封装 api.js

// src/api/user.js
import http from '@/utils/http';

export function getUserList() {
  return http.get('/users');
}

export function login(data) {
  return http.post('/login', data);
}

13.2 使用

import { getUserList } from '@/api/user';

getUserList().then(list => {
  console.log('用户列表：', list);
});

---

十四、实战示例：TodoList

14.1 基本结构

<div id="app">
  <input v-model="newTodo" @keyup.enter="addTodo">
  <ul>
    <li v-for="todo in todos">
      {{ todo.text }}
      <button @click="removeTodo(todo)">删除</button>
    </li>
  </ul>
</div>

14.2 Vue 逻辑

new Vue({
  el: '#app',
  data: {
    newTodo: '',
    todos: []
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push({ text: this.newTodo });
        this.newTodo = '';
      }
    },
    removeTodo(todo) {
      this.todos = this.todos.filter(t => t !== todo);
    }
  }
});

---

十五、功能拓展（含代码实现）

15.1 自定义指令

Vue.directive('focus', {
  inserted(el) {
    el.focus();
  }
});

15.2 自定义过滤器

Vue.filter('capitalize', function (value) {
  if (!value) return '';
  return value.charAt(0).toUpperCase() + value.slice(1);
});

15.3 使用 Vue.extend 动态组件

const Profile = Vue.extend({
  template: '<p>这是动态创建的组件</p>'
});

new Profile().$mount('#profile');

---

十六、优化与最佳实践

• 组件划分要清晰，职责单一
• 使用 v-show 替代 v-if，减少频繁销毁创建
• 慎用 v-html 防止 XSS
• 利用 keep-alive 缓存组件
• 结合 Vue Devtools 调试

---

十七、总结

Vue 2.0 是构建现代 Web 应用的强大工具。通过本篇文章，你掌握了从基础到进阶的 Vue 2 知识体系，并通过实际案例加深了理解。继续深入组件化开发、状态管理、性能优化，你就能在实际项目中游刃有余地使用 Vue 2！🚀

---

到这里，这篇文章就和大家说再见啦！我的主页里还藏着很多 篇 前端 实战干货，感兴趣的话可以点击头像看看，说不定能找到你需要的解决方案～
创作这篇内容花了很多的功夫。如果它帮你解决了问题，或者带来了启发，欢迎：
点个赞❤️ 让更多人看到优质内容
关注「前端极客探险家」🚀 每周解锁新技巧
收藏文章⭐️ 方便随时查阅
📢 特别提醒：
转载请注明原文链接，商业合作请私信联系
感谢你的阅读！我们下篇文章再见～ 💕