Vue入门介绍

Vue.js 简介

Vue.js，通常简称为 Vue，是一个渐进式的前端框架，用于构建用户界面和单页面应用程序。与其他大型框架不同，Vue 被设计为可以自下而上逐层应用。其核心库主要关注视图层，不仅易于上手，还便于与第三方库或现有项目整合。Vue 还提供了用于构建复杂应用的官方库（也是作者头疼的问题），如 Vue Router、Vuex 等。

---

MVVM 设计模式

MVVM 是 Model-View-ViewModel 的缩写。它是一种设计思想，主要分为以下三部分：

1. Model（模型）：代表数据和业务逻辑。它直接与数据库或后端服务交互，处理数据的保存、更新和删除。

2. View（视图）：用户所看到的 UI 界面。它表示数据的视觉呈现。在 Vue 中，这通常是你的模板或 HTML。

3. ViewModel（视图模型）：它是连接 Model 和 View 的桥梁。在 Vue.js 中，Vue 实例（包含数据、方法等）扮演了 ViewModel 的角色。ViewModel 通过数据绑定将 Model 和 View 连接起来，任何 Model 的改变都会自动更新到 View（数据监听），同样任何 UI 的改变也会自动反映到 Model 中（页面—Model的双向数据绑定）。

其本质上来自于MVC设计模式（经典）。在Vue中考虑到Controller负载较大，于是改进了C，变成ViewModel视图模型。可以完成数据监听和数据绑定，功能强于Controller。

---

Vue.js 中的 MVVM

在 Vue 中，MVVM 模式的实现如下：

Model：在 Vue 中，Model 对应的是我们的数据对象，通常是 Vue 组件中的 data 属性。

data() {
  return {
    message: 'Hello Vue!'
  };
}

View：View 在 Vue 中就是模板部分，它基于 HTML，但允许你使用 Vue 的指令，例如 v-bind、v-on、v-for 等。

  {{ message }}

ViewModel：在 Vue 中，ViewModel 是 Vue 实例自己。当你创建一个新的 Vue 实例时，你定义了 methods、computed properties、watchers 等，它们都是 ViewModel 的一部分。Vue 使用了一种机制（依赖跟踪和虚拟 DOM）来确保 View 总是随着 Model 的改变而更新。

Vue.js 提供了一个简洁、高效的方式来实现 MVVM 设计模式，使得开发者能够快速地构建交互式前端应用程序。其核心特点是反应性，即数据的任何变化都会实时、自动地反映在 UI 上，而不需要额外的操作或代码。

---

Vue进阶介绍

作者有基础，当作自己复习辣：

1. 响应式系统：

   • Vue的核心是其响应式系统。每当Vue实例的数据变化时，视图会自动更新。这是通过Object.defineProperty实现的，Vue利用这个函数来观察和响应数据对象上的变化。

2. 组件系统：

   • Vue的另一个核心概念是组件。组件是Vue的基本构建块，它允许你从复杂UI创建小到大的可重复使用的组件。
   • 每个组件实质上都是一个拥有预定义选项的一个Vue实例。

3. Vue Router：

   • 为单页面应用提供路由功能。它允许你为不同的路径定义不同的组件，当用户导航到这些路径时，对应的组件会被渲染。

4. Vuex：

   • Vue的状态管理库，用于大型单页面应用。它可以帮助开发者更好地在组件之间共享、管理、操作数据。

5. 指令：

   • Vue指令是以v-前缀开头的特殊标记。它们表示Vue实例的DOM元素应该如何响应地进行渲染。例如，v-bind可以用来绑定一个属性，v-model是用于表单输入和应用状态之间的双向绑定。

6. 生命周期钩子：

   • Vue实例有一系列的生命周期钩子，允许你在不同阶段执行自定义的逻辑。例如：created、mounted、updated、destroyed等。

7. 插槽：

   • Vue使用插槽来实现内容分发。这允许你定义一个布局，并允许子组件在这个布局中注入内容。

8. Vue CLI：

   • 是一个强大的命令行工具，可以帮助你快速地初始化、开发和构建Vue项目。

9. Mixin：

   • 是一种分发Vue组件中的可复用功能的方法。一个mixin对象可以包含任何组件选项。当组件使用mixin时，所有mixin的选项都将被“混入”到组件本身的选项中。

10. 自定义事件：

    • Vue组件可以发出自己的事件，就像DOM事件一样，这允许父组件监听子组件的特定交互。