itzhaolin-CSDN博客

原创样式中困扰我们的offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX

offsetWidth, offsetHeight //返回元素的宽度, 高度（包括元素宽度、内边距和边框，不包括外边距）clientWidth, clientHeight //返回元素的宽度, 高度（包括元素宽度、内边距，不包括边框和外边距）style.width, style.height //返回元素的宽度, 高度（包括元素宽度...

2019-03-04 00:30:29 352

原创 Javascript的几种常见设计模式(后续使用到后更新)

设计模式是一套被反复使用,多数人知晓的经过分类编目的,代码设计经验的总结;单体模式单体是一个用来划分命名空间并将一批相关的属性和方法组织在一起的对象,如果他可以被实例化,那么它只能被实例化一次;var person={ name:'zhangsan', age:23, doSomething:function(){...}}工厂模式...

2018-06-02 14:38:47 711

原创 Vue学习之十二(webpack优化打包及发布上线)

优化总结思路基本打包–>压缩bundle.js和html–>按需加载elementUI和iview–> 把静态资源从bundle.js中抽离–>把第三方包从bundle.js中抽离–>css从bundle.js中抽离–>使用vue-router的路由懒加载打包前,删除我们的dist文件夹安装 clean-webpack-plugin 包...

2018-04-30 21:57:54 4390

原创 Vue学习之十一(会员中心页面完成,嵌套路由,完成webpack基本打包)

会员中心页面完成1.跳转会员中心组件 router-link 触发路由(App.vue中) main.js设置路由规则2.会员中心中跳转交易订单页面3.查看订单页面对类的判断 :class="order.orderinfo.status>=2?'active':''";时间过滤器 (定义的全局过滤器.. | dateFmt("YYYY-MM-DD HH:mm:ss"));...

2018-04-30 21:55:37 1040

原创 Vue学习之十(用支付宝沙箱模式完成支付功能,项目开发流程)

公钥成为支付宝商户,和支付宝签约上传至支付宝私钥上传至服务端美团支付的整个流程1、前端调用后台接口，进行下单操作【美团前端】2、美团后台，生成订单（此时订单状态为未支付）【美团后台】3、后台会重定向到选择支付方式的页面【美团后台】4、用户选择了某种支付方式之后，点击了确认支付，会发送请求给后台【美团前端】5、美团后台，会拿着支付宝平台的私钥，对...

2018-04-27 14:14:13 2913

原创 Vue学习之九(完成项目下订单功能,生命周期的应用场景)

1.下订单element Form表单校验<el-form :model="orderInfo" label-width='150px' :rules="rules" ref="ruleForm" class="cart-box demo-ruleForm"><el-form-item label="收货人姓名:" prop="accept_

2018-04-27 14:10:39 1455

原创 Vue学习之八(父子组件通讯,Vuex与购物车修改删,导航守卫解决权限路由问题)

父子组件的通讯1.父组件通过prop向下传递, 接收方,子组件中声明props props:['goodsId',goodsCount] 传值方,父组件导入子组件import inputnumber from '..'template中使用 <inputnumber :goodsId="" :goodsCount="" />>在components中注册2.子...

2018-04-23 21:50:01 516

原创 Vue学习之七(动画钩子,Vuex的使用与购物车的展示)

飞入购物车的动画步骤: 1、创建一个div，里面放一个img，把它放在加入购物车的位置，并且隐藏 1.1 创建了div和img，写了必要的样式 1.2 让div刚开始的时候，显示到加入购物车这个位置，那么就必须获取加入购物车的offset2、点击加入购物车，div显示出来，并且通过动画的方式移动到购物车的位置 2.1、在被动画元素上，...

2018-04-23 21:44:40 1215

原创 Vue学习之六(全局导入包,图片懒加载,导入第三方jq模块,路由,渲染的项目中应用)

全局第三方包的导入方式1.jq全局new webpack.ProvidePlugin({$:"jquery",jQuery:"jquery","window.jQuery":"jquery"})2.axios发送请求的全局axios.defaults.baseURL="" Vue.prototype.$axios=axios3.common.js文件中export default{...

2018-04-20 15:36:37 476

原创 Vue学习之五(Vue-cli,jquery导入,路由,购物商城头部,element-ui)

脚手架 Vue-clivue官网=>生态系统=>官方仓库生成空白的vue项目文件带有’beta’字样的是测试版本2.9.x的版本【推荐】安装：npm install -g vue-cli 检测版本 vue -V/--version 生成项目: 首页切换到桌面，在终端里面运行 vue init...

2018-04-18 22:26:10 457

原创 Vue学习之四(webpack+项目搭建)

过滤器局部过滤器:写在组件的对象中和data同级.filter()全局过滤器: 组件定义外部Vue.filters()webpack学习是什么?前端资源化模块化管理和打包工具; 按照依赖关系打包生成符合生产环境的静态资源;异步按需加载;核心概念entry 入口; 项目的打包入口文件output 出口; 经webpack打包生成结果Loade...

2018-04-16 20:31:10 548

原创 Vue学习之三(过滤器,ES6模板字符串,箭头函数,let&const,网络请求,路由)

过滤器(用于文本格式化)局部过滤器 filters 与data同级,是一个对象; 里面是一个过滤函数dateFmt:function(){...}插值表达式 {{date | dateFrm('/')}} 必须传一个原始数据,当做函数的第一个实参;后面传的默认为第二个以后的实参;|管道符全局过滤器 Vue.filter('名称',function(input,operator){}...

2018-04-16 09:00:40 1577

原创 Vue学习之二(vue指令)

v-for 循环遍历<li :key='index' v-for='(index,item) in Arr'> </li>传key 方便后边操作数据;因为遍历的原理是复制上一份数据,直接替换数据;杂项v-pre 不编译差值表达式v-cloak 解决闪烁问题v-once 只渲染一次动画 transition被动画的元素必须被...

2018-04-14 11:26:05 222

原创 Vue初体验

前端三驾马车 (Angular React Vue ) Vue 2.x前端是什么? 渐进式框架数据驱动简化dom操作Vue能做什么?PC端:网站,后台管理移动端:移动web,app ,weex,原生应用Vue特性易用: Html,Css,Javascript灵活:库和框架之间伸缩自如高效:运行大小20kb;虚拟dom使用1.导入v...

2018-04-13 09:08:18 196

原创开发中浏览器兼容的问题总结

最常见的的就是浏览器在解析时的margin和padding不同{margin:0; padding:0}浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性CSS hackIE6认识的hacker 是下划线_ 和星号...

2018-04-08 16:20:04 302

原创前端开发中自己常见问题

前端性能优化网站一.页面级优化1.减少http请求(1). 从设计实现层面简化页面　　(2). 合理设置 HTTP缓存　—原则很简单，能缓存越多越好，能缓存越久越好。例如，很少变化的图片资源可以直接通过 HTTP Header中的Expires设置一个很长的过期头 ;变化不频繁而又可能会变的资源可以使用 Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久。　...

2018-04-08 15:34:06 4503

David Wu