前端框架初识

1. 网站交互及开发方式

1.1 经典的多页面

1. 例如：京东商城、唯品会
2. 特点：前后端糅合在一起，开发维护效率低
3. 用户体验一般，点击刷新跳转，等待时间过长
4. 每个页面都需要重新加载渲染，速度慢
5. 有利于SEO搜索引擎搜索（蜘蛛会爬链接）

1.2 现代式的单页面

1. 例如：网易云音乐、coding
2. 单页面应用程序的最主要目的是为了让你的前后端开发能够分离，用户体验反而是其次的
3. 开发方式好，前后端分离，开发效率高，可维护性好，服务端不关心页面，只关心数据，客户端不关心数据库及
   数据操作,只关心 通过接口拿数据和服务端交互，处理页面
4. 用户体验好，就像一个原生的客户端软件一样使用
5. 只需要加载渲染局部视图即可，不需要整页刷新
6. 单页面应用开发技术复杂，所以诞生了一堆开发框架，如：Angularjs、Reactjs、Vuejs
7. 单页面技术其实已经很成熟了，但是都无法兼顾低版本浏览器
8. 但是现在除了一些电商网站，其实已经很少有系统需要去兼容低版本浏览器，大部分都是IE9以上
9. 单页面由于数据都是异步加载过来的，所以不会被搜索引擎搜索到，不利于SEO
10. 单页面主要应用于：手机web网页、服务端管理系统

2. 前端三大框架

1. 单页面开发其实是比较复杂的，需要一定技术支撑，所以就诞生了前端三大框架
2. Angular：2009年Google开发的，它的主要目的是让我们开发单页面应用程序更方便了，最主要的是为前端
   带来了 MVVM 开发模式。（MVVM：数据驱动视图，不操作DOM）
3. React：Facebook公司开发的Web框架，主要是思想是组件化
4. Vue：作者：尤雨溪，早期由个人开发，vue借鉴了angular 和 react 之所长，自己做了一个，后起之秀
5. 使用Angular、React、Vue不一定开发单页应用，但绝大多数都是开发单页应用

3. 为什么要学习流行框架

1. 在企业中使用流行框架，可以提高开发效率
2. 提高开发效率的发展历程:原生JS--->jQuery之类的类库--->前端模板引擎--->Angular.js / Vue.js
3. 在 vue 中，一个核心概念，就是让用户不再操作 Dom 元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑

4. 框架和库的区别

1. 框架：是一套完整的解决方案；对项目的侵入性比较大，项目如果需要更换框架，则需要重新架构整个项目
2. 库(插件):提供一个小功能，对项目的侵入性比较小，如果某个库无法完成某些需求，可以放容易 切换到其它库实现需求

5. MVVM

1. MVVM： 是一种架构开发方式，基于这种方式去开发写代码，提升开发效率与代码的可维护性

2. MVVM的原则：模块职责单一

3. MVVM的核心思想：数据驱动视图

4. MVVM的优点：代码低耦合、可重用性、独立开发、可测试

5. MVVM：是前端视图层的概念，主要关注于视图层分离，也就是说 MVVM 把前端的视图层分为
   三个部分 Model、View、VM(ViewModel)
   M： model是专门操作数据增、删、改、查的的页面
   V ： Vue实例所控制的区域（视图界面）
   VM：相当于Vue中的 data 属性，与视图进行交互，处理业务
   

6. VM原理：
   事件观察者（发布/订阅模式），一种设计模式
   Object.defineProperty高级属性定义方式

6 什么是Vue

1. vue.js 是一款非常优秀的前端javaScript框架
2. 由尤雨溪创建开发，正式发布于2014年2月，并开源于Github，2015年10月27正式发布1.0版本,
   2016年8月1日正式发布2.0
3. 可以轻松构建 SPA 应用程序
4. 通过指令扩展了HTML，通过表达式绑定数据到HTML
5. 最大程度上解放了DOM操作
6. Vue最主要的思想是：数据驱动视图