原创力文档- 1、本文档共4页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
小伙伴们，大家好。
今天由小尼老师带领大家来了解一款渐进式
JavaScript框架——Vue。
近年来，前端开发领域，旧浏览器逐渐淘汰，移动
端开发需求逐年增加，前端交互越来越多，功能越
来越复杂。架构从传统后台MVC向RESTAPI+前
端MV*迁移。
MV*相当于
MVC即：
Model（模型）表示应用程序核心（比如数据库记录列表）。
View（视图）显示数据（数据库记录）。
Controller（控制器）处理输入（写入数据库记录）。
MVP
Model（模型）表示应用程序核心（比如数据库记录列表）。
View（视图）显示数据（数据库记录）。
Presenter（表示器）负责逻辑处理业务。
与MVC差别在于：
1、View与Model完全隔离。
2、Presenter与View的具体实现技术无关。
3、可以进行View的模拟测试。
MVVM（Vue就是一种MVVM框架）
Model（模型）表示应用程序核心（比如数据库记录列表）。
View（视图）显示数据（数据库记录）。
ViewModel（观察者）负责把Model的数据同步到View显示出来，还负责把View的
修改同步回Model。
优点：高内聚，低耦合（可重用性、可移植性）。
Vue是一款数据驱动+组件化的前端开发框架，对比于Angular和React，Vue.js
更轻量，gzip后大小只有26K（Angular56K,React44K），同时更易上手，学习
曲线平稳，吸收两家之长，借鉴了angular的指令和react的组件化。
首先来看一个数据双向绑定的例子：
●当更改输入框的值时，文本的内容会被更新
●如果改变文本的内容，输入框也会更新
Vue.jsAngluar.js
Vue的组件化：
Vue的轻量级：
1.语义清晰，简单明了
绑定click事件
条件渲染
循环渲染
2.代码紧凑，解放性能
Angular.js生产版本：156kb
React.js生产版本：145kb
Vue.js生产版本：75kb
Vue.js的核心思想：
数据驱动：数据（model）改变驱动视图（view）自动更新
组件化：扩展HTML元素，封装可重用的代码
组件设计原则：
1、页面上每个独立的可视/可交互区域视为一个组件
2、每个组件对应一个工程目录，组件所需的各种资源在这个目录下就近维护
3、页面不过是组件的容器，组件可以嵌套自由组成形成完整的页面
OK,本期先介绍这么多吧，下期介绍《Vue常用指令总结》。
文档评论（0）