一、准备工作

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. oracle 删除重复记录

    查询及删除重复记录的SQL语句   1.查找表中多余的重复记录,重复记录是根据单个字段(Id)来判断   select * from 表 where Id in (select Id from 表 g ...

  2. [Web]ORM模式的看法

    在看各种语言建站Web资料的时候,无一例外的都使用了ORM的设计模式.一直百思不得其解. 从个人实践来说,ORM带来了更高的学习成本和更低的性能,并且还无法满足复杂的查询需求. 之前一直认为自己在大型 ...

  3. ubuntu创建新用户

    ubuntu和windows一样,可以任意创建或者删除新的用户,windows下比较简单,ubuntu下需要使用命令,不过操作起来不是很繁琐,所以我尽量写的详细一些.  如何创建ubuntu新用户? ...

  4. svn提交按钮灰选

    1.当我新建了一个文件或者文件夹,要提交的时候出现ok按钮灰选,提交不了. 解决方法:提交信息多写一些字儿就可以了,挥着回车换行也行 2.报错:you need to upgrade the work ...

  5. Java三大集合框架

    定义:java中集合类:是一种工具类,就像是容器,储存任意数量的具有共同属性的对象 一.List集合 1.List实现的超级父类接口:Collection 2.了解ArrayList类 A):定义的格 ...

  6. ng7 设置http proxy

    看文档 proxy.conf.json { "/api": { "target": "http://localhost:5000", &qu ...

  7. transform:translate(-50%,-50%)实现水平垂直居中

    .content {    padding:10px;    background:green;    color:#fff;    position:absolute;    top:50%;    ...

  8. XenServer多网卡绑定

    xenserver通过 XenCenter可以绑定网卡,支持Active-Active和Active-Standby的模式,但是通过Xencenter只能绑定两块网卡为一组.更多的比如3块一组.4块一 ...

  9. [math] 我对对数的最新理解

    前言 作为资深学渣,每次遇到对数就极度恐慌.恐慌不是因为要考试---.而是因为不理解,只能靠死记硬背运算规则.不能进行有效的推理,这让我极度不爽,因为会忘记.故惶恐. 所以总是耿耿于怀,想要试图理解对 ...

  10. RuntimeError: implement_array_function method already has a docstring

    根源:Numpy/Scipy/Pandas/Matplotlib/Scikit-learn 出现冲突 解决办法: pip uninstall scikit-learn pip uninstall ma ...