一、准备工作

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、组件可以在页面中自由嵌套

vue进阶--外卖商家页的更多相关文章

  1. VUE进阶(路由等)

    初级教程:http://www.cnblogs.com/dmcl/p/6137469.html VUE进阶 自定义指令 http://cn.vuejs.org/v2/guide/custom-dire ...

  2. vue学习之用 Vue.js + Vue Router 创建单页应用的几个步骤

    通过vue学习一:新建或打开vue项目,创建好项目后,接下来的操作为: src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置 src目录重整 在项 ...

  3. 基于VUE的SPA单页应用开发－加载性能篇

    1.基于异步数据的vue页面刷新 先看看基于异步数据的vue页面刷新后,都发生了啥- 如图所示: 图1 基于异步数据的vue页面刷新 网络请求图 步骤如下: step1:请求页面: step2:请求页 ...

  4. 【vue】vue中实现标签页

    前言 tab标签页实现很多, 纯css实现, js实现等, 外加一些特殊动画. vue中实现标签页实现 keep-alive标签和is特性 vue-router中嵌套路由 is特性实现(推荐) 优点: ...

  5. 《Vue 进阶系列之响应式原理及实现》

    https://www.bilibili.com/video/av51444410/?p=5 https://github.com/amandakelake/blog/issues/63 https: ...

  6. [转发]Android视频技术探索之旅：美团外卖商家端的实践

    美团技术团队 2019-09-12 20:02:11 背景 2013年美团外卖成立,至今一直迅猛发展.随着外卖业务量级与日俱增,单一的文字和图片已无法满足商家的需求,商家迫切需要更丰富的商品描述手段吸 ...

  7. vue项目实现详情页后退缓存之前的数据

    vue项目实现详情页后退缓存之前的数据 2019年02月19日 14:54:57 不想写代码的程序员 阅读数:244   一.需要缓存的内容: 1.后退缓存条件查询的数据 2.后退缓存分页信息 二.实 ...

  8. Vue 进阶系列（一）之响应式原理及实现

    Vue 进阶系列(一)之响应式原理及实现:https://juejin.im/post/5bce6a26e51d4579e9711f1d Vue 进阶系列(二)之插件原理及实现:https://jue ...

  9. Vue是如何渲染页面的，渲染过程以及原理代码

    Vue是如何渲染页面的,渲染过程以及原理代码:https://www.cnblogs.com/ypinchina/p/7238402.html

随机推荐

  1. chattr和lsattr的基本用法

    lsattr filename  查看一个文件的属性 chattr filename  改变一个文件的属性 主要用途:实现文件的原有内容不允许改变,但可以增加新行,则需通过改变文件的属性来实现. ch ...

  2. git 入门教程之分支总览

    分支就是一条独立的时间线,既有分支,必有主干,正如一棵树谈到树枝,必有树干一样的道理.我们先前对git 的全部操作默认都是在主干上进行的,这个主干也是一种特殊的分支,名为 master 分支. 无论是 ...

  3. http连接基础类，负责底层的http通信

    /// <summary> /// http连接基础类,负责底层的http通信 /// </summary> public class HttpService { public ...

  4. 使用第三方插件Gear Tacks 画齿轮

    以下介绍第二种方法: 重复再生成一个大的齿轮 两个都保存起来: 再创建一个装配体环境. 接下来就是要达到使两个轮子配合转起来的效果! 步骤如下:

  5. 小甲鱼Python第二十二讲课后习题

    笔记: 斐波那契数列的两种实现方式:   迭代的方式: 自己写的: def fab(n): n1 =1 n2 =1 n3 =1 if n < 1: return -1 if n ==1: ret ...

  6. vue PC端项目中解决userinfo问题

    在vue2 中用脚手架建立的项目,后端提供接口获取数据.在公司做第一个项目的时候不清楚公司里的对接流程,结果后续代码被一个接口整的乱七八糟,这个接口是获取用户信息的接口——'usre/info'. 如 ...

  7. (84)Wangdao.com第十八天_JavaScript Promise 对象

    Promise 对象 是 JavaScript 的异步操作解决方案,为异步操作提供统一接口. 目前 JavaScript 原生支持 Promise 对象 它起到代理作用(proxy),充当异步操作与回 ...

  8. CSS 使用absolute 是<div>居中

    <style>        .col-center-block {            position: absolute;            top: 50%;         ...

  9. （转载）CentOS6 Linux系统添加永久静态路由的方法

    https://blog.csdn.net/magerguo/article/details/49636231

  10. 数据仓库 - 2.数据仓库设计思路及ETL设计思路

    一.数据仓库构建思想 构造数据仓库有两种方式:一是自上而下,一是自下而上. Bill Inmon先生推崇“自上而下”的方式,即一个企业建立唯一的数据中心,就像一个数据的仓库,其中数据是经过整合.经过清 ...