f IOS-Vue 2.0 详解全教程（含 Axios 封装 + 路由守卫 + 实战进阶） - Powered by qidao123.com技术社区

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

农民  论坛元老 | 2025-5-18 16:33:46 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1816|帖子 1816|积分 5448

一、Vue 2.0 简介

1.1 什么是 Vue？

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



  • 响应式数据绑定
  • 组件化开辟
  • 指令体系
  • 生命周期钩子
  • 计算属性 & 侦听器
  • 内置过渡 & 动画支持
  • 强盛的插件生态
二、快速上手

2.1 引入 Vue

  1. <!-- CDN 引入 -->
  2. <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
复制代码
2.2 创建第一个 Vue 实例

  1. <div id="app">
  2.   <h1>{{ message }}</h1>
  3. </div>
  5. <script>
  6.   new Vue({
  7.     el: '#app',
  8.     data: {
  9.       message: 'Hello Vue 2!'
  10.     }
  11.   });
  12. </script>
复制代码
三、焦点概念详解

3.1 模板语法



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

  1. <div>{{ message }}</div>
  2. <input v-model="message">
复制代码
3.3 变乱绑定

  1. <button v-on:click="greet">点击</button>
  3. <script>
  4. methods: {
  5.   greet() {
  6.     alert('Hello Vue!');
  7.   }
  8. }
  9. </script>
复制代码
3.4 计算属性 & 侦听器

  1. <p>反转消息: {{ reversedMessage }}</p>
  3. <script>
  4. computed: {
  5.   reversedMessage() {
  6.     return this.message.split('').reverse().join('');
  7.   }
  8. }
  9. </script>
复制代码
四、组件体系

4.1 界说全局组件

  1. Vue.component('my-component', {
  2.   template: '<div>这是一个组件</div>'
  3. });
复制代码
4.2 单文件组件（*.vue 文件）

结构：
  1. <template>
  2.   <div>{{ message }}</div>
  3. </template>
  5. <script>
  6. export default {
  7.   data() {
  8.     return {
  9.       message: '单文件组件'
  10.     };
  11.   }
  12. }
  13. </script>
  15. <style scoped>
  16. div { color: blue; }
  17. </style>
复制代码
4.3 父子组件通讯



  • props 传值
  1. <child :message="parentMsg"></child>
  3. <script>
  4. props: ['message']
  5. </script>
复制代码


  • $emit 变乱派发
  1. <child @custom-event="parentMethod"></child>
  3. <script>
  4. // 子组件
  5. this.$emit('custom-event', data);
  6. </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实例销毁后
七、过渡 & 动画

  1. <transition name="fade">
  2.   <p v-if="show">淡入淡出效果</p>
  3. </transition>
  5. <style>
  6. .fade-enter-active, .fade-leave-active {
  7.   transition: opacity .5s;
  8. }
  9. .fade-enter, .fade-leave-to {
  10.   opacity: 0;
  11. }
  12. </style>
复制代码
八、Vue Router 路由体系

8.1 安装

  1. npm install vue-router
复制代码
8.2 配置路由

  1. import Vue from 'vue';
  2. import VueRouter from 'vue-router';
  3. import Home from './Home.vue';
  4. import About from './About.vue';
  6. Vue.use(VueRouter);
  8. const routes = [
  9.   { path: '/', component: Home },
  10.   { path: '/about', component: About }
  11. ];
  13. const router = new VueRouter({
  14.   routes
  15. });
  17. new Vue({
  18.   router
  19. }).$mount('#app');
复制代码
九、Vuex 状态管理

9.1 安装

  1. npm install vuex
复制代码
9.2 基本利用

  1. import Vue from 'vue';
  2. import Vuex from 'vuex';
  4. Vue.use(Vuex);
  6. const store = new Vuex.Store({
  7.   state: {
  8.     count: 0
  9.   },
  10.   mutations: {
  11.     increment(state) {
  12.       state.count++;
  13.     }
  14.   }
  15. });
  17. new Vue({
  18.   store
  19. });
复制代码
十、Axios 网络请求

10.1 安装

  1. npm install axios
复制代码
10.2 基础利用

  1. import axios from 'axios';
  3. axios.get('https://api.example.com/data')
  4.   .then(response => {
  5.     console.log(response.data);
  6.   });
复制代码
十一、进阶实战：Axios 封装

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

  1. // src/utils/http.js
  2. import axios from 'axios';
  4. const service = axios.create({
  5.   baseURL: 'https://api.example.com',
  6.   timeout: 5000
  7. });
  9. // 请求拦截器
  10. service.interceptors.request.use(config => {
  11.   // 可在这里统一携带 token
  12.   // config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
  13.   return config;
  14. }, error => {
  15.   return Promise.reject(error);
  16. });
  18. // 响应拦截器
  19. service.interceptors.response.use(response => {
  20.   return response.data;
  21. }, error => {
  22.   console.error('请求出错：', error);
  23.   alert(error.response?.data?.message || '请求失败');
  24.   return Promise.reject(error);
  25. });
  27. export default service;
复制代码
11.2 利用封装

  1. import http from '@/utils/http';
  3. http.get('/users')
  4.   .then(data => {
  5.     console.log('用户数据：', data);
  6.   });
复制代码
十二、进阶实战：路由守卫

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

  1. // router/index.js
  2. router.beforeEach((to, from, next) => {
  3.   const isLoggedIn = !!localStorage.getItem('token');
  4.   if (to.meta.requiresAuth && !isLoggedIn) {
  5.     next('/login');
  6.   } else {
  7.     next();
  8.   }
  9. });
复制代码
12.2 路由配置示例

  1. {
  2.   path: '/dashboard',
  3.   component: Dashboard,
  4.   meta: { requiresAuth: true }
  5. }
复制代码
十三、进阶实战：同一 API 管理

推荐将接口会合管理，制止硬编码。
13.1 封装 api.js

  1. // src/api/user.js
  2. import http from '@/utils/http';
  4. export function getUserList() {
  5.   return http.get('/users');
  6. }
  8. export function login(data) {
  9.   return http.post('/login', data);
  10. }
复制代码
13.2 利用

  1. import { getUserList } from '@/api/user';
  3. getUserList().then(list => {
  4.   console.log('用户列表：', list);
  5. });
复制代码
十四、实战示例：TodoList

14.1 基本结构

  1. <div id="app">
  2.   <input v-model="newTodo" @keyup.enter="addTodo">
  3.   <ul>
  4.     <li v-for="todo in todos">
  5.       {{ todo.text }}
  6.       <button @click="removeTodo(todo)">删除</button>
  7.     </li>
  8.   </ul>
  9. </div>
复制代码
14.2 Vue 逻辑

  1. new Vue({
  2.   el: '#app',
  3.   data: {
  4.     newTodo: '',
  5.     todos: []
  6.   },
  7.   methods: {
  8.     addTodo() {
  9.       if (this.newTodo.trim()) {
  10.         this.todos.push({ text: this.newTodo });
  11.         this.newTodo = '';
  12.       }
  13.     },
  14.     removeTodo(todo) {
  15.       this.todos = this.todos.filter(t => t !== todo);
  16.     }
  17.   }
  18. });
复制代码
十五、功能拓展（含代码实现）

15.1 自界说指令

  1. Vue.directive('focus', {
  2.   inserted(el) {
  3.     el.focus();
  4.   }
  5. });
复制代码
15.2 自界说过滤器

  1. Vue.filter('capitalize', function (value) {
  2.   if (!value) return '';
  3.   return value.charAt(0).toUpperCase() + value.slice(1);
  4. });
复制代码
15.3 利用 Vue.extend 动态组件

  1. const Profile = Vue.extend({
  2.   template: '<p>这是动态创建的组件</p>'
  3. });
  5. new Profile().$mount('#profile');
复制代码
十六、优化与最佳实践



  • 组件分别要清晰，职责单一
  • 利用 v-show 替代 v-if，淘汰频繁销毁创建
  • 慎用 v-html 防止 XSS
  • 利用 keep-alive 缓存组件
  • 结合 Vue Devtools 调试
十七、总结

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

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

农民

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

渠道 国产数据库 集成商 AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表