当前位置： 首页 > news >正文

《从零到全栈：Vue2入门宝典》

news 来源：原创 2025/5/14 17:46:02

1. Vue 简介

1.1 什么是 Vue？

        Vue 是一套用于构建用户界面的渐进式框架。Vue 的核心库专注于视图层，易于与其他库或现有项目集成。Vue 的目标是通过尽可能简单的 API 实现数据双向绑定和组件化开发。

1.2 什么是“渐进式”？

        “渐进式”意味着 Vue 可以逐步应用到项目中。你可以从简单的页面交互开始，逐步引入 Vue 的更多功能，如组件化、路由、状态管理等，而不需要一开始就全面重构项目。

1.3 Vue 的核心特性

  • 数据双向绑定：Vue 通过 MVVM 模式实现数据与视图的双向绑定，数据的变化会自动反映在视图上，视图的变化也会同步到数据。

  • 组件化开发：Vue 允许将页面拆分为多个可复用的组件，每个组件都有自己的逻辑和样式，便于维护和复用。

  • 响应式系统：Vue 的响应式系统能够自动追踪数据的变化，并更新视图。

2. Vue 的响应式原理

2.1 Vue2 的响应式实现

        Vue2 使用 Object.defineProperty 来实现数据的响应式。通过为对象的每个属性设置 getter 和 setter，Vue 能够监听数据的变化并触发视图更新。

Object.defineProperty(obj, key, {
  get() {
    // 读取属性时的回调
  },
  set(newValue) {
    // 设置属性时的回调
  }
});

2.2 Vue3 的响应式实现

        Vue3 使用 Proxy 替代了 Object.defineProperty，Proxy 可以监听整个对象的变化，而不需要为每个属性单独设置 getter 和 setter，性能更好且支持更多的操作。

3. 为什么要使用 Vue？

  1. 减少繁琐的 DOM 操作：Vue 通过数据驱动视图，开发者无需手动操作 DOM。

  2. 数据响应式：Vue 自动追踪数据变化并更新视图，开发者可以更专注于业务逻辑。

  3. 提高开发效率：Vue 提供了丰富的工具和生态，如 Vue CLI、Vue Router、Vuex 等，能够快速构建复杂的单页应用。

  4. 完整的生态圈：Vue 拥有完善的生态系统，支持声明式编程、组件化开发、路由管理、状态管理等。

4. Vue 的基本使用

4.1 引入 Vue

可以通过以下两种方式引入 Vue：

        1. 原生引入：通过 <script> 标签直接引入 Vue 文件。

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

        2. 工程化引入：使用构建工具如 Webpack、Vue CLI 或 Vite 来构建 Vue 项目。

4.2 初始化 Vue 程序

new Vue({
  el: '#app', // 挂载点
  data() {
    return {
      msg: 'Hello Vue!'
    };
  }
});

5. Vue 的基础语法

5.1 模板语法

        Vue 使用双大括号 {{ }} 进行插值，支持 JS 表达式。

<div id="app">
  {{ msg }}
</div>

5.2 指令

Vue 提供了多种指令来操作 DOM：

  • v-model：实现表单元素与数据的双向绑定。

  • v-html：渲染 HTML 内容。

  • v-text：渲染纯文本。

  • v-bind：动态绑定属性，简写为 :。

  • v-on：绑定事件，简写为 @。

  • v-if / v-show：条件渲染。

  • v-for：列表渲染。

5.3 计算属性与侦听器

  • 计算属性：computed 用于定义依赖其他属性的计算属性。

    computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

  • 侦听器：watch 用于监听数据的变化并执行相应的操作。

    watch: {
  msg(newVal, oldVal) {
    console.log('msg changed:', newVal);
  }
}

5.4 过滤器

        过滤器用于对数据进行格式化处理。

<p>{{ msg | capitalize }}</p>

filters: {
  capitalize(value) {
    return value.toUpperCase();
  }
}

6. Vue 组件

6.1 组件的定义与使用

        组件是 Vue 的核心概念之一，允许将页面拆分为多个可复用的模块。

const MyComponent = {
  template: '<div>{{ msg }}</div>',
  data() {
    return {
      msg: 'Hello Component!'
    };
  }
};

new Vue({
  el: '#app',
  components: {
    'my-component': MyComponent
  }
});

6.2 组件通信

  • 父传子：通过 props 传递数据。

    // 父组件
<child :msg="parentMsg"></child>

// 子组件
props: ['msg']

  • 子传父：通过 $emit 触发事件并传递数据。

    // 子组件
this.$emit('update', newValue);

// 父组件
<child @update="handleUpdate"></child>

  • 兄弟组件通信：通过事件总线或 Vuex 进行通信。

7. Vue 的生命周期

Vue 组件的生命周期分为 4 个阶段，每个阶段都有对应的钩子函数：

  1. 创建阶段：beforeCreate、created

  2. 挂载阶段：beforeMount、mounted

  3. 更新阶段：beforeUpdate、updated

  4. 销毁阶段：beforeDestroy、destroyed

    new Vue({
  el: '#app',
  data() {
    return {
      msg: 'Hello Vue!'
    };
  },
  created() {
    console.log('组件创建完成');
  },
  mounted() {
    console.log('组件挂载完成');
  }
});

8. Vue 路由 (Vue Router)

8.1 路由的基本使用

        Vue Router 是 Vue 的官方路由管理器，用于实现单页应用中的页面导航。

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

new Vue({
  router,
  el: '#app'
});

8.2 路由传参

  • 查询参数：通过 query 传递参数。

    this.$router.push({ path: '/detail', query: { id: 1 } });

  • 动态路由：通过 params 传递参数。

    this.$router.push({ name: 'detail', params: { id: 1 } });

8.3 路由守卫

        路由守卫用于在导航过程中进行拦截或权限控制。

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

9. Vue 过渡与动画

        Vue 提供了 <transition> 组件来实现元素的过渡和动画效果。

<transition name="fade">
  <div v-if="show">Hello Vue!</div>
</transition>

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

10. Vue 混入 (Mixin)

        混入是一种代码复用的方式，允许将组件的选项（如 data、methods 等）提取到一个单独的对象中，并在多个组件中复用。

const myMixin = {
  data() {
    return {
      msg: 'Hello Mixin!'
    };
  }
};

new Vue({
  mixins: [myMixin],
  el: '#app'
});

11. 自定义指令

        Vue 允许开发者自定义指令来扩展 DOM 操作。

<input v-focus>

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

12. Vue 项目构建

12.1 Vue CLI 脚手架

1. 脚手架简介

        Vue CLI 是 Vue 官方提供的工程化项目构建工具，能够快速生成标准化的 Vue 项目结构，集成 Webpack、Babel、ESLint 等工具链。

2. 安装与使用
# 全局安装
npm install -g @vue/cli

# 验证安装
vue --version

# 创建项目 (命令行)
vue create project-name

# 可视化创建 (浏览器打开)
vue ui
3. 项目结构

生成的项目包含以下核心文件：

  • src/main.js: 入口文件

  • src/App.vue: 根组件

  • src/router/: 路由配置目录

  • src/views/: 页面级组件目录

13. Vue Router 路由系统

13.1 路由核心概念

  • SPA (单页应用)：通过 URL 映射不同组件，实现无刷新页面切换

  • 动态路由：通过参数匹配不同内容（如 /user/:id）

  • 嵌套路由：父子层级的页面结构

  • 编程式导航：通过 JS 控制页面跳转

13.2 路由配置流程
        (1) 安装路由
npm install vue-router@3.0.0  # Vue2 使用 3.x 版本
        (2) 路由配置文件

      src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/list'  // 重定向
  },
  {
    path: '/list',
    name: 'list',
    component: () => import('@/views/ListView.vue')  // 懒加载
  },
  {
    path: '/detail/:id',  // 动态路由
    name: 'detail',
    component: () => import('@/views/DetailView.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router
        (3) 挂载路由

     src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,  // 注入路由实例
  render: h => h(App)
}).$mount('#app')

14. 路由传参方式对比

方式语法示例获取方法特点
Query 参数/detail?id=1this.$route.query.id参数明文显示在 URL
Params 参数/detail/1 + path: '/detail/:id'this.$route.params.id需定义动态路由，刷新后参数保留
命名路由传参{ name: 'detail', params: { id:1 } }this.$route.params.id需配置路由 name，参数不在 URL 显示
示例代码

        List.vue 传递参数：

<router-link :to="{ path: '/detail', query: { id: 1, type: '旅游' }}">链接1</router-link>
<router-link :to="{ name: 'detail', params: { id: 2 }}">链接2</router-link>

        Detail.vue 接收参数：

export default {
  created() {
    console.log('Query参数:', this.$route.query.id)
    console.log('Params参数:', this.$route.params.id)
  }
}

15. 路由守卫

15.1 全局守卫

   router/index.js

router.beforeEach((to, from, next) => {
  // 1. 权限验证示例
  if (to.meta.requiresAuth && !isLogin) {
    next('/login')
  } 
  // 2. 放行路由
  else {
    next()
  }
})

15.2 路由独享守卫

{
  path: '/admin',
  component: AdminPage,
  beforeEnter: (to, from, next) => {
    if (!isAdmin) next('/403')
    else next()
  }
}

15.3 组件内守卫

   DetailView.vue

export default {
  beforeRouteEnter(to, from, next) {
    // 组件渲染前调用
    next(vm => {
      // 通过 vm 访问组件实例
    })
  },
  beforeRouteLeave(to, from, next) {
    // 离开组件时调用
    const answer = confirm('确定离开？')
    answer ? next() : next(false)
  }
}

16. 嵌套路由

16.1 配置嵌套路由

   router/index.js

{
  path: '/user',
  component: UserLayout,
  children: [
    { 
      path: 'profile',  // 匹配 /user/profile
      component: UserProfile 
    },
    { 
      path: 'settings', // 匹配 /user/settings
      component: UserSettings 
    }
  ]
}

16.2 父组件模板

   UserLayout.vue

<template>
  <div>
    <h2>用户中心</h2>
    <router-view></router-view> <!-- 子路由出口 -->
  </div>
</template>

17. 路由模式

模式特点配置方法
Hash 模式URL 带 #，兼容性好默认模式，无需配置
History 模式无 #，需要服务器支持mode: 'history'
const router = new VueRouter({
  mode: 'history',
  routes
})

18. 常见问题解决

18.1 页面刷新后 Params 参数丢失

  • 使用 Query 参数替代

  • 将参数存储在 Vuex 或 localStorage 中

18.2 路由重复跳转报错

// 捕获重复导航错误
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

总结

        Vue 是一个功能强大且易于上手的渐进式框架，适合从简单的页面交互到复杂的单页应用开发。通过 Vue 的响应式系统、组件化开发、路由管理、状态管理等特性，开发者可以高效地构建现代化的 Web 应用。

 希望这份整理对你有帮助！如果需要进一步细化某部分内容，可以告诉我！ 😊 

相关文章：

  • olmOCR：使用VLM解析PDF
  • 【人工智能】数据挖掘与应用题库（201-300）
  • 「慢思考」机理分析：从雪球误差到正确推理概率
  • 12字符函数
  • ThreadLocal原理详解以及使用。
  • C++ 中的reduce函数使用指南
  • AI数据分析：用DeepSeek做数据清洗
  • Ubuntu系统上部署Node.js项目的完整流程
  • MySQL数据库入门到大蛇尚硅谷宋红康老师笔记 高级篇 part 5
  • 代码随想录算法【Day57】
  • 深入浅出：插入排序算法完全解析
  • 事业编体检不合格有哪些?
  • 重新审视 ChatGPT 和 Elasticsearch：第 2 部分 - UI 保持不变
  • MotionLM技术路线与优势解析
  • 【Oracle专栏】sqlplus显示设置+脚本常用显示命令
  • Rust ~ Vec＜u8＞和[u8]
  • Redis源码剖析之GEO——Redis是如何高效检索地理位置的？
  • Nginx+PHP+MYSQL-Ubuntu在线安装
  • Qt开发⑨Qt的事件_事件处理_按键事件和鼠标事件
  • 如何查找APP漏洞并渗透测试 解决网站被黑客攻击
  • 女外交官郑璇已任中国驻莫桑比克大使
  • “典孝急乐批麻蚌赢”：互联网“八字真言”与当代赛博赢学
  • 成都警方通报：8岁男孩落水父母下水施救，父亲遇难
  • 超新星｜18岁冲击中超金靴，王钰栋的未来无限可能
  • 训练孩子的科学思维，上海虹口推出“六个一百”旗舰工程
  • 18世纪“精于剪切、复制、粘贴”的美国新闻界