Vue.js（一）——发展背景与简介_js和vue的国内外综述-CSDN博客

本文链接：https://blog.csdn.net/weixin_43866812/article/details/109289173

这一章节主要介绍Vue前的网站开发现状以及Vue的介绍

1、网站交互和开发方式

1.1、网站交互方式的发展

经典的多页面==> 交互方式
- 前后端融合在一起，开发和维护效率方式差
- 用户体验一般，点击刷新跳转，等待时间长
- 每个页面都需要重新加载
- 有利于SEO搜索引擎搜索，蜘蛛会爬连接
现代式的单页面==> 所有的交互都是在一个页面，不存在刷新
- 开发方式好，采用前后端分离的开发模式
  - 服务端不关心界面，只关心数据
  - 客户端不关心数据库和数据操作，只关心通过接口拿到的数据和服务端交互，处理界面
- 用户体验好，就像是原生客户端软件一样，点击刷新跳转，等待时间不长
- 只需要加载局部视图即可，不需要整页刷新
- 单界面应用开发技术复杂，所以出现了很多框架
  - AngularJS
  - ReactJS
  - VueJS
- 单页面已经很成熟了，但是无法加载到低版本浏览器（IE6、7）
- 除了一些电商网站，其实很少有系统兼容低版本
- 大部分在ie9以上
- 单页面都是异步加载过来的，所以不利于SEO搜索引擎搜索
- Web APP
- 服务端管理系统

多页面：以服务器为主导，前后端混合
单页面：前后端分离，各司其职，几乎没有交集，即：服务端只处理数据、前端只负责数据展示、二者通过第三者也就是 API 接口进行交流

1.2、前后端分离开发模式

项目立项
需求分析
服务端的工作
- 需求分析
- 设计数据库
- 接口设计
- 接口开发（处理数据）
前端的工作
- 需求分析
- 写页面
- 页面写好功能
- 通过接口和服务端进行交互

2、Vue.js介绍

单页面应用程序框架
官方文档：https://cn.vuejs.org/vue.js官方文档

Vue.js是一种渐进式的框架、自低向上、只关心视图层（只关心界面）

vue.js可以说是国内最火的前端框架，React是最流行的前端框架，二者都可以用来开发手机APP。

Vue.js是一套构建用户界面的框架，只关注视图层，易上手，便于与第三方库或既有项目整合。（Vue有配套的第三方库，可以用来整合起来做大型项目开发）。

提高开发效率的发展历程：原生JS ==> jQuery之类的类库 ==> 前端模板引擎 ==> Angular.js / Vue.js

Vue中的核心概念就是让用户不在操作DOM元素，提高渲染效率，双向数据绑定，解放双手，让程序员更多的去关注业务逻辑层。

人无我有，人有我优。

框架：完整的项目解决方案，对项目的入侵性较大，项目如果需要更换框架，则需要重新架构整个项目。

node中的express

库（插件）：单一的某个小功能，对项目侵入性较小，如果某个库无法完成某个需求，可以很容易的切换到其他库。

1.jQuery——>Zepto

2.EJS——>art-template

Node.js/Java（后端）中的MVC与前端中的MVVM之间的区别

MVC是后端的分层开发概念(M：model层，数据；V：view视图层；C：controller业务逻辑层)
MVVM是前端视图层的概念，主要关注于视图层的分离，也就是说：MVVM把前端的视图层分为了三个部分：
- Model、
- View、
- VM 、ViewModel

3、Vue基本代码和MVVM之间的对应关系

	<body>
		<!-- 将来new的vue实例会控制这个元素中的内容 -->
		<!-- vue实例控制的元素区域就是’V‘ -->
		<div id="app">
			<p>{{ msg }}</p>
		</div>
		
		<script>
			//2.创建一个vue的实例
			<!-- 导入包之后，在浏览器内存中就多了一个vue构造函数 -->
			// 注意：这里new出来的VM对象就是我们MVVM中的’VM‘调度者
			var vm = new Vue({
				el: '#app' ,//（element） 表示，当前我们new的这个Vue实例，要控制页面上的那个区域
				//这里的data就是MVVM中的’M‘，专门用来保存每个页面的数据
				data: {		//data属性中存放的 是el中用到的数据。
					msg: 'HelloWord'//通过vue提供的指令，很方便的就能把数据渲染到页面上，程序员不在手动操作DOM元素（前端vue不提提倡手动操作DOM元素）
				}
			})
		</script>
	</body>