vue的基础概念

1.什么是vue

vue不是一门语言，只是通过JavaScript封装的一套用于构建用户界面的前端框架，
vue有自己独特的API和开发模式，
vue最主要的使用场景是进行单页应用开发，能够在我们进行web单页开发的时候大大提升开发效率

2.什么是单页应用

单页面应用程序（英文名：Single Page Application）简称 SPA，顾名思义，指的是一个 Web 网站中只有唯一的一个HTML 页面，所有的功能与交互都在这唯一的一个页面内完成。

• 传统多页面应用
  1. 单击链接页面会跳转
  2. 页面跳转时页面会整体刷新
• 单页面应用
  1. 不需要跳转新的页面
  2. 不需要重新加载整个页面
• 单页应用的优点
  1. 单页面应用程序将所有的功能局限于一个 web 页面中，仅在该 web 页面初始化时加载相应的资源（ HTML、JavaScript 和CSS）。
  2. 一旦页面加载完成了，SPA 不会因为用户的操作而进行页面的重新加载或跳转。而是利用 JavaScript 动态地变换HTML 的内容，从而实现页面与用户的交互。
  3. 良好的交互体验
     1. 单页应用的内容的改变不需要重新加载整个页面
     2. 获取数据也是通过 Ajax 异步获取
     3. 没有页面之间的跳转，不会出现“白屏现象”
  4. 良好的前后端工作分离模式
     1. 后端专注于提供 API 接口，更易实现 API 接口的复用
     2. 前端专注于页面的渲染，更利于前端工程化的发展
  5. 减轻服务器的压力
     1. 服务器只提供数据，不负责页面的合成与逻辑的处理，吞吐能力会提高几倍

3.vue构建用户页面的特点

传统方式构建用户界面:

在传统的 Web 前端开发中，是基于jQuery+ 模板引擎的方式来构建用户界面的

使用 vue构建用户界面:

使用 vue构建用户界面,解决了 jQuery + 模板引擎 的诸多痛点，极大的提高了前端开发的效率和体验

4.vue版本的介绍

当前，vue 共有 3 个大版本

1. 2.x 版本的 vue 是目前企业级项目开发中的主流版本
2. 3.x 版本的 vue 于 2020-09-19 发布，生态还不完善，尚未在企业级项目开发中普及和推广
3. 1.x 版本的 vue 几乎被淘汰，不再建议学习与使用

vue的基本特点

1.渐进式框架

vue是一套用于构建用户界面的渐进式框架，Vue 的核心库只关注视图层（模板渲染），易于上手，结合多种工具和支持的库，Vue 也完全能够为复杂的单页应用提供驱动

1. 渐进式有一个特点，强制的编码要求较少
2. 按需要使用，不必一竿子把所有的东西都用上

最核心的 vue，实现了模板引擎的自动渲染（声明式渲染）

1. 数据驱动视图
2. 双向数据绑定

2.MVVM模式

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理
MVVM指的是 Model、View 和 ViewModel，它把每个 HTML 页面都拆分成了这三个部分

1. m:model:数据
2. v:view:视图-模板
3. vm:ViewModel（Vue实例）
4. 通过Vue实例来实现数据和模板的关联
   • 在vue中如果更新的数据，页面中对应的渲染内容也会自动的更新
   • 在vue中如果更新页面中所渲染的变量的数据，data中这个变量的数据也自动会有相应的变化
   • 让我们以后可以将精力专注于数据处理，避免繁琐的dom操作

在 MVVM 概念中：
Model 表示当前页面渲染时所依赖的数据源。
View表示当前页面所渲染的 DOM 结构。
ViewModel表示 vue 的实例，它是 MVVM 的核心。

当数据源发生变化时，会被 ViewModel监听到，VM 会根据最新的数据源自动更新页面的结构
当表单元素的值发生变化时，也会被VM 监听到，VM会把变化过后最新的值自动同步到 Model 数据源中