第一节  vue知识

vue-resource:和后台交互的一个插件,实现get、post和jsonp等功能。(替代jQuery)

vue特点:

1.易用:通过创建vue实例,{{}}绑定数据十分方便,如果是jQuery还要获取值,设定十分繁琐

2.灵活-渐进式

①渲染字段;②公共头部和公共尾部做成组件;③单页面会用到;④管理组件状态,vuex⑤使用构建工具完结项目

3.高效

①16kb min+gzip的运行大小;②超快虚拟DOM;③最省心的优化

vue基础指令介绍:

1.指令的使用:

v-model:表单中使用,双向功能

v-text:文本的渲染

v-show:控制dom的显示隐藏,修改display属性

v-if:控制dom存不存在

v-bind:给dom绑定属性

v-for:表格等循环

v-on:时间

2.过滤器filter:

从接口获得很多数据,在页面使用这些数据时,进行字段的处理。

3.组件component:页面的复用等

VUE2.0实现购物车和地址选配功能学习第一节(来源--慕课网河畔一角)的更多相关文章

  1. VUE2.0实现购物车和地址选配功能学习第二节

    第二节 创建VUE实例 购物车项目计划: 1.创建一个vue实例 2.通过v-for指令渲染产品数据 3.使用filter对金额和图片进行格式化 4.使用v-on实现产品金额动态计算 5.综合演示 ① ...

  2. VUE2.0实现购物车和地址选配功能学习第七节

    第七节 卡片选中,设置默认 1.卡片选中html:<li v-for="(item,index) in filterAddress" v-bind:class="{ ...

  3. VUE2.0实现购物车和地址选配功能学习第六节

    第六节 地址列表过滤和展开所有的地址 html:<li v-for="(item,index) in filterAddress">js: new Vue({ el:' ...

  4. VUE2.0实现购物车和地址选配功能学习第五节

    第五节 单件商品金额计算和单选全选功能 1.vue精髓在于操作data模型来改变dom,渲染页面,而不是直接去改变dom 2.加减改变总金额功能: html:<div class="c ...

  5. VUE2.0实现购物车和地址选配功能学习第四节

    第四节 v-on实现金额动态计算 用¥金额 进行格式处理,可以使用原生js进行转换,但是在vuei,使用filter过滤器更加方便 注: 1.es6语法=>和import等 好处在于res参数后 ...

  6. VUE2.0实现购物车和地址选配功能学习第三节

    第三节 使用v-for渲染商品列表 1.使用vue-resource插件引入json数据 (注:在谷歌中调试打断点-- ,console还可以输出vm,res等属性列表,或者productList等一 ...

  7. 关于慕课网《使用vue2.0实现购物车和地址选配功能》的总结

    视频学习网址:http://www.imooc.com/learn/796 源码打包:https://codeload.github.com/fachaoshao/Vue-ShoppingCart/z ...

  8. vue2.0实现购物车功能

    购物车功能是一件比较繁琐的事情,逻辑功能太多,今天就用vue2.0实现一个简单的购物车功能,数据都本地自己写的假数据 功能列表: 1.全选和单选结算 2.减少和增加数量 3.商品的删除 界面搭建以及布 ...

  9. vue购物车和地址选配(三)

    参考资料:vue.js官网 项目演示: 项目源代码: 核心代码及踩坑 删除: new Vue({ el:'#app', data:{ productlist:[], totalMoney:0, che ...

随机推荐

  1. 使用 Redis 统计在线用户人数

    在构建应用的时候, 我们经常需要对用户的一举一动进行记录, 而其中一个比较重要的操作, 就是对在线的用户进行记录. 本文将介绍四种使用 Redis 对在线用户进行记录的方案, 这些方案虽然都可以对在线 ...

  2. NodeMCU之旅(四):实现Web配置页面

    引言 利用Web页面做配置可以轻松适应用户的多种设备,如Android, IOS等.本文将介绍如何在NodeMCU中实现配置页面. 接线图请参考NodeMCU之旅(三):响应配置按钮. 配置页面后端 ...

  3. Angular - - ngClass、ngClassEven、ngClassOdd、ngStyle

    这几个都关于样式及类名修改的,所以先把样式代码贴上吧. .red{color:red} .blue{color:blue} 写案例用到的样式就这么简单的两个,下面进入正题. ngClass ngCla ...

  4. 解决mysql 1062 主从错误

    1062错误----主键冲突,出现这种情况就是从库出现插入操作,主库又重新来了一遍,iothread没问题,sqlthread出错 解决方案: 从库操作 mysql> stop slave; Q ...

  5. Eclipse 使用说明

    2. 使用技巧 2.1. Eclipse 打开文件所在文件夹 2.2. Mac 安装Eclipse 2.3. Eclipse 安装插件 2.4. Eclipse 工具栏不见了 2.5. Eclipse ...

  6. ubuntu和Deepin下chrome浏览器提示flash下载失败或者过期的解决方案

    问题:更新了下Deepin系统,打开chrome发现,视频放不了了,提示flash"下载失败" 谷歌浏览器版本是Version 55.0.2883.87 (64-bit) flas ...

  7. python yield generator 详解

    本文将由浅入深详细介绍yield以及generator,包括以下内容:什么generator,生成generator的方法,generator的特点,generator基础及高级应用场景,genera ...

  8. 地图学与GIS制图的基础理论(二)

    利用GIS技术进行地图制图,其最终目标还是需要回到地图学中去.地图学中关于地图制作的经典要求,有以下几点: 地图必须要与现实相符,符合人类的感知 这点是地图最基本的一条,地图的每一个要素展现的都是跟现 ...

  9. Error:(2, 0) Plugin with id 'com.github.dcendents.android-maven' not found. <a href="openFile:I:\API\PermissionGen-master\permissiongen\build.gradle">Open File</a>

    不上图说个*** 报这个错的原因是因为 你在project中的build.gradle 少写了两句话 所以报这个错 你只需要在build.gradle中添加 classpath 'com.github ...

  10. NSMutableAttributedString

    开发过程中,经常会遇到动态计算行高的问题, - (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)op ...