Vue.js（⼀）——发展背景与简介
这⼀章节主要介绍Vue前的⽹站开发现状以及Vue的介绍原生js和js的区别
1、⽹站交互和开发⽅式
1.1、⽹站交互⽅式的发展
经典的多页⾯==> 交互⽅式
前后端融合在⼀起，开发和维护效率⽅式差
⽤户体验⼀般，点击刷新跳转，等待时间长
每个页⾯都需要重新加载
有利于SEO搜索引擎搜索，蜘蛛会爬连接
现代式的单页⾯==> 所有的交互都是在⼀个页⾯，不存在刷新
开发⽅式好，采⽤前后端分离的开发模式
服务端不关⼼界⾯，只关⼼数据
客户端不关⼼数据库和数据操作，只关⼼通过接⼝拿到的数据和服务端交互，处理界⾯
⽤户体验好，就像是原⽣客户端软件⼀样，点击刷新跳转，等待时间不长
只需要加载局部视图即可，不需要整页刷新
单界⾯应⽤开发技术复杂，所以出现了很多框架
AngularJS
ReactJS
VueJS
单页⾯已经很成熟了，但是⽆法加载到低版本浏览器（IE6、7）
除了⼀些电商⽹站，其实很少有系统兼容低版本
⼤部分在ie9以上
单页⾯都是异步加载过来的，所以不利于SEO搜索引擎搜索
Web APP
服务端管理系统
多页⾯：以服务器为主导，前后端混合
单页⾯：前后端分离，各司其职，⼏乎没有交集，即：服务端只处理数据、前端只负责数据展⽰、⼆者通过第三者也就是 API 接⼝进⾏交流
1.2、前后端分离开发模式
项⽬⽴项
需求分析
服务端的⼯作
需求分析
设计数据库
接⼝设计
接⼝开发（处理数据）
前端的⼯作
需求分析
写页⾯
页⾯写好功能
通过接⼝和服务端进⾏交互
2、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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。