vue进阶--外卖商家页

一、准备工作

1、vue特性：轻量级、简洁、高效、组件化、数据驱动

2、技术分析：使用vue- resource与后端交互(ajax通信，ie9+)

　　　　　　  使用vue-router作为前端路由

　　　　　　   better-scroll第三方库

　　　　　　   webpack构建工具

　　　　　　   es6+eslint(代码风格检测)

　　　　　　   flex布局+stickyfooter布局

 

二、VUE介绍

1、MVVM：view:视图dom

　　　　　  viewModel:观察者(数据和视图通过vm相互通知改变)

　　　　　  model:数据js对象

2、有指令又有完整的组件周期

3、核心思想：数据驱动：

　　　　　　有一个数据a.b，先用es5为a.b添加getter和setter方法，vue对模板编译解析生成一个指令对象（v-text）,每个指令关联一个watcher，对指令求值时触发getter,再次改变时触发setter然后再次通知watcher，然后再次求值a.b并对比新旧值，如果改变就通知指令调用update方法更新视图。

 

　　　　　　  组件化：拓展html元素，封装可重用代码。html中每个组件对应一个vm，生成一个vm树和dom树一致。

　　　　　　  组件设计原则：1、每个可视、可交互模块都可设计为组件 2、工程化思想即js+css+html写在一个文件就近维护 3、组件可以在页面中自由嵌套