模块化和组件化
- 模块化和组件化的好处是提高代码的复用性，可维护性和扩展性
准备工作
- Vue-resource 和 Ajax进行通信
- Webpack构建工具
- ES6 + eslint eslint：对ES6的代码风格检查工具，规范ES6的代码规范和静态语法检测，它的好处就是可以规范一个团队的代码保持相近的风格，这样有助于阅读和维护
近年来前端开发趋势
- 旧浏览器逐渐被淘汰，移动端的需求量大大增加。
- 前端交互越来越少，功能越来越复杂。
现在前端可谓是一个大杂烩，各种高大上的技术库和框架，酷炫的运营活动页面，好玩的H5小游戏。 - 架构从传统后台的MVC向REST API + 前端 MVVM迁徙。
REST：全称（REpresentational State Transfer，表述性状态转移）REST指的是一组架构约束条件和原则，满足这些约束条件和原则的应用程序设计就是RESTful。
传统后台的MVC：是当前前端和后端发生一些数据交互的时候，会刷新整个页面，这样的用户体验是很差的。
因此我们通过Ajax的方式和后端REST API的进行通讯，异步刷新某个区块，提供良好的用户体验。
MVVM(类似于设计模式里面的观察者模式)
- 数据的双向绑定(任何那边发生改变都可以监测的到)。
- 针对具有复杂交互逻辑的前端应用。
- 提供基础的架构抽象。
- 通过Ajax数据持久化，保证前端用户体验。
-
SPA单页面应用程序
**MVVM**
Vue
- 它是一个轻量级的MVVM框架
- 数据驱动 + 组件化是它的核心
对比Angular React
- Vue更轻量，gzip后大小之后20K+。
- Vue更易上手，学习曲线平稳。
- 吸取两家之长，借鉴了angular的指令和react的组件化
Vue的核心思想
- Vue的核心思想是数据驱动和组件化
数据驱动
- 不用Vue之前，需要手动触发和改变DOM操作，还特别容易出错，而用了Vue之后只需要通过Directives指令。
-
数据的双向绑定：Vue指令(Directives)是对DOM的封装，当数据发生改变会通知指令去修改相应的DOM。Vue还会对数据进行监听(Dom Listeners)， 当我们修改视图的时候，Vue监听到这些变化，从而改变数据。这就形成了数据的双向绑定。
**数据驱动**
**数据响应原理**
组件化(组件可以嵌套)
- 扩展HTML元素，封装可重用的代码。
- 页面上每个独立的可视/可交互区域视为一个组件
- 每个组件对用一个工程目录，组件所需要的各种资源在这个目录下就近维护。
- 页面不过是组件的容易，组件可以嵌套自由组合形成完整的页面。
Vue-cli
- Vue-cli是Vue的脚手架工具。
-
而Webpack是一个模版。
**Vue-cli**脚手架
网友评论