Vue实战&&项目开发

---

模块化和组件化

• 模块化和组件化的好处是提高代码的复用性，可维护性和扩展性

准备工作

• 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**脚手架