一、准备工作

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. 理解ActivityManagerService

    --摘自<Android进阶解密> *AMS家族* 1.Android 7.0的AMS家族 2.AMP和AMS进行通信 3.(Android 7.0)AMP是AMN的内部类,它们都实现了I ...

  2. vi编辑器常用操作

    vi的三种模式 1.命令模式 2.编辑模式 3.末行模式(命令模式下,按":"即可进入末行模式) 命令模式到编辑模式:插入命令i,附加命令a,打开命令o,修改命令c,取代命令r,替 ...

  3. node环境配置

    1.进入node的官网https://nodejs.org/en/download/ 2.选择自己需要的安装包 3.下载之后,直接安装http://www.runoob.com/nodejs/node ...

  4. Go语言基础之time包

    Go语言基础之time包 时间和日期是我们编程中经常会用到的,本文主要介绍了Go语言内置的time包的基本用法. Go语言中导入包 Go语言中使用import关键字导入包,包的名字使用双引号(”)包裹 ...

  5. [LeetCode] Global and Local Inversions 全局与局部的倒置

    We have some permutation A of [0, 1, ..., N - 1], where N is the length of A. The number of (global) ...

  6. [LeetCode] Encode N-ary Tree to Binary Tree 将N叉树编码为二叉树

    Design an algorithm to encode an N-ary tree into a binary tree and decode the binary tree to get the ...

  7. JSON.stringify 语法实例讲解+easyui data-options属性+expires【申明：来源于网络】

    JSON.stringify 语法实例讲解+easyui data-options属性+expires[申明:来源于网络] JSON.stringify 语法实例讲解:http://www.jb51. ...

  8. js 第三期 小肩膀 第一段

    var 时间戳 = new.Date().getTime();//系统引擎 var 时间戳 = Date.now(); //V8引擎 数据类型 false =  underfuned =null = ...

  9. PAT甲级1078 Hashing【hash】

    题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805389634158592 题意: 给定哈希表的大小和n个数,使用 ...

  10. pip3更新后install package出现ImportError: cannot import name 'main'

    linux下pip3更新后,install包出现main不能导入的情况: bear@bear:~/eclipse-workspace/Python-toolbox$ pip3 install pycr ...