参考资料:vue.js官网 项目演示: 项目源代码: 核心代码及踩坑 删除: new Vue({ el:'#app', data:{ productlist:[], totalMoney:0, checkAllFrag:false,//默认没有全选 deFlag:false, //当前的存起来 curProduct:'' }, //必须加mounted函数,这是页面初加载,如果不写这个函数,network中将请求不到数据 mounted:function(){ this.cartView();…

视频学习网址:http://www.imooc.com/learn/796 源码打包:https://codeload.github.com/fachaoshao/Vue-ShoppingCart/zip/master(before为老师未写功能的源码,after为实现功能后的源码): 注意:以上源码请在 Apache 打开状态打开浏览: 该教程在功能上实现了: 1)将  .json文件数据发送http请求,通过遍历数组将数据渲染到页面: 2)创建过滤器实现了价格加"￥"和保留2位小数…

参考文献        vue.js官网 项目演示:数据渲染,格式化数据,点击加,减号自动加减 项目准备 1. 项目css和js文件  https://github.com/4561231/hello_world 2. 引入和安装vue-包管理工具 三种方式: 方式一:直接引入连接 方式二:将vue-resource包管理工具下载下来 方式三:用npm管理工具(前提先在你的电脑上安装node环境) 第一步: 第二步:默认回车,之后项目中会多出一个package.json 第四步:安装vue-re…

参考文献: vue官网: vue.js 效果展示:全选和取消全选,计算总金额 项目源代码:https://github.com/4561231/hello_world 项目核心代码实现及踩坑 1.全选和取消全选 vue实例代码如下 new Vue({ el:'#app', data:{ productlist:[] }, //必须加mounted函数,这是页面初加载,如果不写这个函数,network中将请求不到数据 mounted:function(){ this.cartView(); },…

第六节 地址列表过滤和展开所有的地址 html:<li v-for="(item,index) in filterAddress">js: new Vue({ el:'.container', data:{ limitNum:3, addressList:[], }, mounted:function () { this.$nextTick(function () { this.getAddressList(); }); }, computed:{ filterAddres…

第二节 创建VUE实例 购物车项目计划: 1.创建一个vue实例 2.通过v-for指令渲染产品数据 3.使用filter对金额和图片进行格式化 4.使用v-on实现产品金额动态计算 5.综合演示 ①npm:安装vue (注: 要先安装cnpm cnpm:淘宝团队提供的一个npm的镜像,在国内使用不会卡顿,方便FQ --save-dev:将包安装到package.json中的devDependencies开发包中 --save是安装到默认package的dependencies库中) 指令:cn…

第七节 卡片选中,设置默认 1.卡片选中html:<li v-for="(item,index) in filterAddress" v-bind:class="{'check':index==currentIndex}" @click="currentIndex=index"> <!--循环判断currenIndex,控制当前选中卡片的样式-->js: data:{ currentIndex:0,},2.设置默认html…

第五节 单件商品金额计算和单选全选功能 1.vue精髓在于操作data模型来改变dom,渲染页面,而不是直接去改变dom 2.加减改变总金额功能: html:<div class="cart-tab-3"> <div class="item-quantity"> <div class="select-self select-self-open"> <div class="quentity&quo…

第四节 v-on实现金额动态计算 用￥金额 进行格式处理,可以使用原生js进行转换,但是在vuei,使用filter过滤器更加方便 注: 1.es6语法=>和import等 好处在于res参数后的function函数内的this作用域,不弄在外部声明变量了. methods:{ cartView:function(){ let _this=this; this.$http.get("data/cartData.json",{"id":123}).then( r…

第三节 使用v-for渲染商品列表 1.使用vue-resource插件引入json数据 (注:在谷歌中调试打断点-- ,console还可以输出vm,res等属性列表,或者productList等一些值.如打出vm可以查看vue实例包含的属性和方法等) html:<ul class="cart-item-list"> <li v-for="(item,index) in productList"> <!--v-for="it…

第一节  vue知识 vue-resource:和后台交互的一个插件,实现get.post和jsonp等功能.(替代jQuery) vue特点: 1.易用:通过创建vue实例,{{}}绑定数据十分方便,如果是jQuery还要获取值,设定十分繁琐 2.灵活-渐进式 ①渲染字段:②公共头部和公共尾部做成组件:③单页面会用到:④管理组件状态,vuex⑤使用构建工具完结项目 3.高效 ①16kb min+gzip的运行大小:②超快虚拟DOM:③最省心的优化 vue基础指令介绍: 1.指令的使用: v-m…

一.地址列表渲染 ,则不可以点击. src/views/Cart.vue <a class="btn btn--red" v-bind:class="{'btn--dis':checkedCount==0}" @click="checkOut">Checkout</a>   methods:{     checkOut(){ // 结账         if(this.checkedCount>0){ // 已勾选的…

VUE前端框架学习记录三:Vue组件化编码1文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/file/be7c0ea67e1832dcd6c3b807548ca394?token=314a84e3ec599696…

Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境,浏览器使用chrome,ide:vs code或者webstorm,node.js8.9+,npm等 uni-app直接使用<script>引入vue.js,vue会被注册为一个全局变量,开发环境不要使用压缩版本,一:开发版本有完整的警告和调式模式,二:生产版本删除了警告. <script…

From:http://blog.csdn.net/zhangting1987/article/details/2732135 网卡地址这个概念有点混淆不清.因为实际上有两个地址,mac地址和物理地址,一般说网卡地址我是指物理地址,不知道别人怎么看?物理地址指的是网卡上的存放地址的ROM里的地址,mac地址是这块卡工作的时候用的地址,一般情况下这两个地址是一样的,所以很多人都混用了,甚至不知道有区别  -_-# 网卡工作的时候,一个以太网帧60到1514(不包括crc),帧的crc是网卡自动加的…

获取用户IP地址的三个属性的区别(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)   一.没有使用代理服务器的情况: REMOTE_ADDR = 您的 IP      HTTP_VIA = 没数值或不显示      HTTP_X_FORWARDED_FOR = 没数值或不显示 二.使用透明代理服务器的情况:Transparent Proxies REMOTE_ADDR = 最后一个代理服务器 IP       HTTP_VIA = 代理服务器 IP     …

问题来源: http://www.cnblogs.com/del/archive/2008/07/30/1039045.html#1272783 在编译器看来, 重载函数根本就是完全不同的几个函数, 当然就会有不同的函数地址; 我们用常规方法获取的地址只是第一种重载的地址. 代码文件: unit Unit1; interface uses   Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,  …

vue表单校验(三) 每当看到heyui的这个表单校验,我就一直想将element的校验也做类似的功能,终于有了方式,虽然不是很完美,但是可以使用,能满足要求了 实现方式 基于element-ui实现 通过表单提交时,触发校验,未通过的表单会添加is-error,之后滚动到对应的错误位置即可 页面视图 实现逻辑 触发条件 在提交时,若是未通过则开始进行判断,由于是依赖于is-error的class类名,因而需要等form表单错误的元素添加完is-error类名后再进行判断 submitForm1…

如何去掉vue的url地址中的#号?及其原理? 点击打开视频讲解更加详细 如何去掉vue的url地址中的#号? import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter) // 1. 定义一些路由 // 每个路由都需要映射到一个组件. const routes = [ { path: '/home', component: ()=> import('../views//home.vue') }, {…

好家伙, 继续完善购物车相应功能 1.如何实现全选和反全选 1.1.全选框的状态显示(父传子) 来一波合理分析: 在页面中,有三个商品中 三个商品中的第二个未选择, 我么使用一个计算属性(fullState)来遍历一遍三个商品的选择状态 遍历过程中发现第二个是false,另外两个为true 那么计算属性fullState的状态也是false了, 三个都是true,这个计算属性才是true 然后将这个值传给全选框的组件, 如果值是false 那么我看到的全选框就是灰色的 反之,如果值是true 那…

代码下载地址:https://github.com/MengFangui/VueShoppingCart 1.index.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>购物车示例</title> <link rel="stylesheet" type="…

<div class="buyCarBox" id="buyCarBox" v-cloak> <div class="haveCloth" v-if="cloths.length"> <div class="cloth-thead"> <div class="cloth-td-head">全部商品{{ cloths.length }}<…

本人看了vue官网上的教程后,感觉对vue的依稀有点了解,决定动手练习个小功能项目,就找了购物车本项目.原文链接:http://blog.csdn.net/take_dream_as_horse/article/details/69942013就找了这个小项目练习,在原项目的基础上做了如下进一步完善1.增加了商品数量,合计金额(computed计算属性)2.修改商品单价合计金额同步变化,增加商品(v-model),3.增减商品数量(methods)4.绑定button class背景,根据商品是…

使用动画的三个函数 v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" 将动画函数easy改成贝塞尔曲线的 效果: 直接上代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- import CSS…

docker 运行jenkins及vue项目与springboot项目: 一.安装docker 二.docker运行jenkins为自动打包运行做准备 三.jenkins的使用及自动打包vue项目 四.docker运行nginx 五.jenkins打包springboot服务且在docker中运行 1.初始化jenkins(若未初始化过) 1.浏览器输入 http://192.168.37.136:9090 192.168.37.136为虚拟机ip,9090为docker启动容器时映射至8080…

注意请求可能存在跨域问题,需要去配置好 这三种建议使用axios 1.resource Vue 要实现异步加载需要使用到 vue-resource 库. Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求. 先导入一个线上cdn的地址,当然还可以去npm安装,但个人觉得这种方便 <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></scri…

1.自动获取IP地址(我不是用的这种方法,不做过多介绍) 虚拟机使用桥接模式,相当于连接到物理机的网络里,物理机网络有DHCP服务器自动分配IP地址. #dhclient 自动获取ip地址命令 #ifconfig 查询系统里网卡信息,ip地址.MAC地址 分配到ip地址后,用物理机进行ping ip地址,检测是否ping通. 2.手动设置ip地址(局域网,固定IP的常用做法,我用的这种方法) 如果虚拟机不能自动获取IP,只能手动配置,配置方法如下: 设置CentOS静态IP: 涉及到三个配置文件…

我们继续前两节的开发.本节教程实现的效果如下: 效果很简单,但是实现起来却要用到Vue的很多知识,下面我们将一步一步的实现这个效果. 首先这些城市的信息都是从后台的server里面获取的,所以我们需要一个后台,后台的代码可以从 https://github.com/EzrealDeng/Taopiaopiao里面的server 文件夹获取,这个server端具体怎么实现的我们暂时不用关心,只需要知道这是一个可以返回我们需要的数据的后台服务即可. 下载完后进入文件夹执行: npm run star…

我每次写博客都要先在本地写一遍草稿,所以之前有些发布顺序可能会有一丢丢凌乱 哈哈哈,以后绝对改正,那下面我们就说一下创建及项目目录结构吧 三.创建项目 1.初始化Webpack p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 10.0px "Helvetica Light"; color: #2f2f2f } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; text-a…

我也是第一次写这种地址联动的 刚开始的时候 我还以为直接用select来写 后来公司的ios告知并不是这样的 他说应该时这样的 于是第一想法 赶紧找插件吧 但是找了一会未果  就问了公司大神 他刚开始更我讲了滴滴的一个插件 但是不怎么好用 于是乎他又让我用了这个插件 首先使用方法 可以参考官网 http://mint-ui.github.io/#!/zh-cn 这里不多说了 因为下面还有很多内容 在一切准别就绪之后 你会发现官网上给的都很鸡肋 很少的东西 自己整理的思路时正确的  但是怎么实现…