VUE2.0实现购物车和地址选配功能学习第一节(来源--慕课网河畔一角)
第一节 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实现购物车和地址选配功能学习第一节(来源--慕课网河畔一角)的更多相关文章
- VUE2.0实现购物车和地址选配功能学习第二节
第二节 创建VUE实例 购物车项目计划: 1.创建一个vue实例 2.通过v-for指令渲染产品数据 3.使用filter对金额和图片进行格式化 4.使用v-on实现产品金额动态计算 5.综合演示 ① ...
- VUE2.0实现购物车和地址选配功能学习第七节
第七节 卡片选中,设置默认 1.卡片选中html:<li v-for="(item,index) in filterAddress" v-bind:class="{ ...
- VUE2.0实现购物车和地址选配功能学习第六节
第六节 地址列表过滤和展开所有的地址 html:<li v-for="(item,index) in filterAddress">js: new Vue({ el:' ...
- VUE2.0实现购物车和地址选配功能学习第五节
第五节 单件商品金额计算和单选全选功能 1.vue精髓在于操作data模型来改变dom,渲染页面,而不是直接去改变dom 2.加减改变总金额功能: html:<div class="c ...
- VUE2.0实现购物车和地址选配功能学习第四节
第四节 v-on实现金额动态计算 用¥金额 进行格式处理,可以使用原生js进行转换,但是在vuei,使用filter过滤器更加方便 注: 1.es6语法=>和import等 好处在于res参数后 ...
- VUE2.0实现购物车和地址选配功能学习第三节
第三节 使用v-for渲染商品列表 1.使用vue-resource插件引入json数据 (注:在谷歌中调试打断点-- ,console还可以输出vm,res等属性列表,或者productList等一 ...
- 关于慕课网《使用vue2.0实现购物车和地址选配功能》的总结
视频学习网址:http://www.imooc.com/learn/796 源码打包:https://codeload.github.com/fachaoshao/Vue-ShoppingCart/z ...
- vue2.0实现购物车功能
购物车功能是一件比较繁琐的事情,逻辑功能太多,今天就用vue2.0实现一个简单的购物车功能,数据都本地自己写的假数据 功能列表: 1.全选和单选结算 2.减少和增加数量 3.商品的删除 界面搭建以及布 ...
- vue购物车和地址选配(三)
参考资料:vue.js官网 项目演示: 项目源代码: 核心代码及踩坑 删除: new Vue({ el:'#app', data:{ productlist:[], totalMoney:0, che ...
随机推荐
- UVa 10602 - Editor Nottoobad
题目大意:有一个编辑器,它有两种命令,“重复上一个单词” 和 “删除前一个字母”,给出一系列字符串,求最少的敲击键盘的次数. 题目中强调第一个敲的单词必须是给的第一个单词,于是就考虑按照单词与第一个单 ...
- zepto js 源码 解读
/* Zepto v1.0-1-ga3cab6c - polyfill zepto detect event ajax form fx - zeptojs.com/license */ ;(funct ...
- Java读取其他jar包里的配置文件
最近要做个东西,需要自己控制数据库的事物,项目封装的框架,实在是提不起去阅读的兴趣, 就想直接去读框架的底层实现里面的数据连接的配置文件(如:Url,port,username,password等), ...
- 定制jackson的自定义序列化(null值的处理)
http://www.cnblogs.com/lic309/p/5048631.html
- --@angularJS--路由、模块、依赖注入
以下是演示angular路由切换的demo. 主页:index.html <!doctype html><html ng-app="bookStoreApp"&g ...
- 天兔(Lepus)监控系统慢查询分析平台安装配置
被监控端要安装pt工具 [root@HE1~]## yum -y install perl-IO-Socket-SSL [root@HE1~]## yum -y install perl-DBI [r ...
- MyBatis 一对多关联查询
sqlxml文件 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC ...
- border-radius是向元素添加圆角边框的方法
border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角.右上角.右下角和左下 ...
- 浅析vue数据绑定
前言:最近团队需要做一个分享,脚进脑子,不知如何分享.最后想着之前一直想研究一下 vue 源码,今天刚好 "借此机会" 研究一下. 网上研究vue数据绑定的文章已经非常多了,但是自 ...
- Android离线缓存
android做到一定程度,需要考虑缓存的问题,不信可以掏出手机看看淘宝等一些app是否无网的情况下还可以浏览,不过大部分app并没有考虑到这些问题,解决Android的缓存有哪些方法呢 1.IO流读 ...