vue外卖软件开发学习

学习内容：

vue.js框架介绍（核心：数据驱动、组件化）
vue-cli 脚手架 搭建基本代码框架
vue-router   官方插件、管理路由
vue-resource 与后端进行ajax通信
webpack 构建工具 （编译原码，生成游览器可以识别和运行的代码）
es6+eslint      eslint：es6代码风格检查工具

工程化、组件化、模块化

移动端常用开发技巧
flex弹性布局
css stickyfooter布局
酷炫的交互设计
组件的设计与开发

 

学习目标：

掌握vue.js在实战中的应用，

学会使用vuejs完整的开发移动端app

学会组件化，模块化的开发方式

 

功能技术分析：

vue.resource  与后端进行数据交互

vue.router  与前端路由 实现单一应用

第三方js库 better-scroll 实现列表滚动

最大程度组件化

收藏商家：h5的localstorage接口存在游览器端

图标字体的使用

移动端1像素边框

css  sticky  footer布局

flex弹性布局

 

vuejs介绍：

国内大佬：尤雨溪 2014开源

轻量级mvvm框架
数据驱动+组件化前端开发
github超过25k star数，社区完善

 

近年来前端发展趋势：

旧浏览器逐渐被淘汰，异动单需求增加
前端交互越来越多，功能越来越复杂
架构从传统的后台mvc向rest api+前端mv*迁移
传统mvc：前后端交互时，刷新整个页面（用户体验差）
rest api与ajax局部通信异步刷新页面某个区块来优化和提升体验同时，把mv*拿到前端来做

mv*{
mvc
mvp
mvvm <---- vue.js
}

 

mvvp框架：

三部分：

view   　　 viewmodal　　　　   modal
  |         　　     | 　　 　　　　　   |
  |　　　　　　　| 　　　　　　       |
 v 　　　　　     v　　　　　　      v
视图   　　　　通讯 　　　　　　 数据

dom 　　　　观察者　　　　 javascript对象

 

针对具有复杂交互逻辑的前端应用
提供了一些基础的架构抽象
通过ajax做数据持久化，保证前端用户体验（局部刷新）

mvvm{
angular.js
react.js
vue.js
}

 

vuejs核心思想：

数据驱动：
　　dom是数据的一种自然映射：
　　　　改变数据通过directive指令对dom进行一层封装，当数据发生变化，会通知指令去修改对应的
　　　　dom，数据驱动dom变化，dom是数据的一种自然映射。
　　vue.js对操作进行监听：
　　　　当改变视图的时候vue.js监听到这些变化从而改变数据。
　　　　从而实现数据的双向绑定。

　　数据响应原理：
　　　　数据（modal）改变驱动视图（view）自动更新（es5的object.defineproject属性添加getter和setter同时vue.js对末班进行编译解析生成一个指令对象，每个指令对象关联一  个watcher，当我们对指令进行求值时会触发到其getter同时把依赖收集到watcher中，当改变数据时，会触发setter会通知到对应关联的watcher然后watcher会再次对数据求值          计算并及进行对比，当发现改变时，watcher会通知到指令，调用其update方法由于指令是对dom的封装，所以，其会调用原生dom的方法去更新视图，这样就完成了从数据            改变导数据更新的一个自动过程。

组件化：
　　扩展html元素，封装可重用的代码。
　　　　一个页面被拆分成多个区块，每个区块对应一个组件，组件可以嵌套最后组合形成一个完整的页面，在vue.js中，每个组件都对应一个vuemodal，最终生成一个vuemodal  树，其和dom形成了一一对应的关系。
　　组件设计原则：
　　　　页面上每个独立的可视、可交互区域都可以视为一个组件，比如页面的头部、尾部还有一些可复用的区块都可以抽象成组件。
　　　　每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护。
　　　　　　就近维护就体现了前端工程化思想，为前端开发提供了很好的分制策略，每个开发者都能清楚地知道自己所开发维护的功能单元，其代码必然存在与对应的组件目录    中，在其中可以找到，对应功能单元的所有内部逻辑，样式、js、页面结构都在其中。

　　　　　　vue.js中可以通过.vue文件把组件所依赖的 模块、js和样式都写在一个文件中，把组件化的就近维护思想发挥到极致

　　　　页面不过是组件的容器，组件可以嵌套*组合形成完整的页面