自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(178)
  • 资源 (5)
  • 收藏
  • 关注

原创 如何使用promise

git项目地址:https://github.com/WangShuangshuang/promiseindex.html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Promise</title>&lt...

2019-07-01 21:43:34 392

原创 如何使用vuex

如何使用vuex目标:在一个项目中使用vuex,并正确执行。如何使用vuex 项目实例之gitHub地址:https://github.com/WangShuangshuang/vuex项目截图:思路:1. 用 new Vuex.store({ }) 创建一个vuex的实例,并把这个实例传入到main.js中的new Vue({ })对象中。2. Vuex.store()...

2019-06-29 22:02:34 267

原创 如何用vue-cli3创建项目(vue-cli 3.8.4)

如何用vue-cli3创建项目(vue-cli 3.8.4)Step1 安装vue-cli: cnpm install -g @vue/cliStep2 查看vue-cli版本: vue -V Step3用vue-cli快速创建一个项目: vue create vuex (now Iuse the default setting) ...

2019-06-29 21:04:32 1056

原创 vue 动画之展开收起

亲测好用:https://www.hangge.com/blog/cache/detail_2386.html方法一 . 用css实现 高度已知的 内容区域的展开收起:<template> <transition name="myWrap" class="myWrap"> <div style="height: 54px;" v-if="...

2019-06-05 16:09:24 4251 1

转载 Whistle 抓包简易教程

版权声明: https://blog.csdn.net/huangpb123/article/details/80594061 </div> <link rel="stylesheet" href="https://csdni...

2019-03-27 15:09:29 3234

转载 H5禁止/启用页面滚动

document.addEventListener('touchmove', this.preventTouchMove, false)preventTouchMove(e) { e.stopPropagation() e.preventDefault() }document.removeEventListener('touchmove', this.preventTouchMov...

2018-06-21 16:39:40 3239

原创 css3 div吸顶

position: -webkit-sticky;position: -moz-sticky;position: -ms-sticky;position: sticky;top: 0;z-index: 888;

2018-04-10 20:29:32 2954

原创 vue2.9.1-vue-cli几个配置

安装vue-cli: cnpm install vue-cli用vue-cli初始化一个vue项目: vue init webpack demoProject (安装router,其它先都不要)进入demoProject,安装项目依赖: cnpm install安装vuex: cnpm install vuex --save开发中运行项目: npm run dev项目

2017-12-13 19:21:28 822

原创 less使用小总结

.less文件:/*这句注释会被编译进css*///这句注释不会编译进css/*引入其它的less文件*/@import "v.less";/*变量*/@bgc: yellow;#div1{ width:100px; height:100px; background-color: @bgc;}/*常用的数值计算函数*/@num1 : 100;@num2 :

2017-11-12 16:46:04 953 2

转载 Vue axios设置访问基础路径

原文地址:http://blog.csdn.net/fengjingyu168/article/details/78120368看过axios的官方文档后配置变得简单:在main.js 做如下配置:import axios from 'axios'axios.defaults.baseURL = 'http://10.202.42.24:8080/sf-cloud-web'

2017-11-07 14:52:45 4748

转载 分离出的bootstrap的栅格样式

分离出的bootstrap的栅格样式,直接引用到html页面就可使用,不需要bootstarp的js和jquery。/*! * Bootstrap v3.3.7 (http://getbootstrap.com) * Copyright 2011-2016 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/boot

2017-11-02 15:47:39 1014

原创 gulp1.4.0使用笔记

gulp是一个前端开发工具,可以配置自动化构建工作,如:js的合并 压缩,css的合并 压缩,图片的压缩等。相比于webpack,gulp更加灵活且适用于多页面应用。------下面说明如何 创建一个项目-用gulp构建工作流------ *开发的源css,js,images存放于src文件夹,合并压缩后的css,js,images发布到build文件夹。 步骤: 1.项

2017-10-24 11:11:58 385

原创 webpack3.6.0使用笔记-附件

webpack3.6.0 附件------ package.json ------{ "name": "webpackStudy", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "ser": "webpack-dev-server", "dev": "export aaa=dev&we

2017-10-24 10:56:35 1497

原创 webpack3.6.0使用笔记

webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成少量的 bundle - 通常只有一个,由浏览器加载。它通常适用于单页面SPA应用,通常以一个js文件为入口文件,在入口文件中

2017-10-24 10:36:11 4744

原创 webpack之前的各种工具

进入项目目录: cd WebstormProjects/beforeWebpack/------Lesson1: beforeWebpack------webpack主要应用于SPA项目,运行在node的环境下webpack工作:.压缩图片成base64 .压缩多个css文件为一个 .把less,sass压缩生成css------Lesson2: babel(javascript

2017-10-11 20:07:18 395

原创 Vue2 标签内容拓展slot

slot 通过标签把内容传递到模板效果:slot是标签的内容拓展通过标签把内容传递到模板名称:pen 数量:20名称:car 数量:1代码:slot是标签的内容拓展通过标签把内容传递到模板 {{ aaa.name }} {{ aaa.num }} 名称: 数量:

2017-09-18 20:17:18 1089

原创 Vue2 实例属性 实例方法 实例事件

一.实例属性 $el {{ message }} var vm2 = new Vue({ el:"#app2", data:{ message : "I am message." } }); console.log(vm2.$el); //vm2.$el === 原生j

2017-09-18 17:47:49 1422

原创 Vue2 访问父级数据this.$parent 修改插值语法delimiters

效果:Hello Jack !My name is Jack ! This month is September .changeName代码: Vue.component("sayHello",{ template:"Hello ${this.$parent.username} !", //访问父实例(a

2017-09-18 15:59:08 9019

原创 Vue2 局部拓展extends 先于局部mixins执行

效果:控制台输出:created in overrall局部扩展extendshello Vue!created in aaacreate in native代码: {{ message }} //全局混入 Vue.mixin({ created:function () {

2017-09-18 14:35:05 2227

原创 Vue2 混入mixins

效果:native message您的代办事项有:3 件 +  控制台输出:created in overrallcreated in aaacreated in nativemounted in overrallmounted in aaamounted in native  点击+按钮,控制台输出:addItem in nat

2017-09-18 14:20:56 1808

原创 Vue2 监听属性改变watch

效果:幼儿园入学年龄(3~6): + -代码: 幼儿园入学年龄(3~6): + - {{ errMsg }} var app = new Vue({ el:"#app2", data:{ child:{age:2}, hasErr:false,

2017-09-18 11:52:29 5911

原创 Vue2 方法methods和事件修饰符

效果:数量:21+10 构造器内访问外部事件+ 构造器内访问内部事件- 构造器内直接写事件我是一个按钮组件- 构造器外访问内部事件事件的修饰符.stop 阻止事件冒泡 .prevent 阻止提交表单后的默认行为,阻止重新加载表单 .capture 在捕获阶段触发事件 .self 仅当事件在本元素触发时执行事件.stop.prevent 事件修饰符可以

2017-09-18 10:57:56 2117

原创 Vue2 计算属性computed

效果:点击增加数量按钮,计算属性-总价将自动变化;methods方法计算的属性也将自动变化单价: 数量:  总价: ¥600总价: ¥600代码: 单价: 数量: + 总价: {{ total }} 总价: {{ total2() }} var vm = new Vue({ el:"#app", dat

2017-09-18 10:42:26 521

原创 Vue2 向Vue.extend传参-propsData属性

效果:Vue.extend的propsData 用得很少,仅用于开发环境我是网站头部 I am message! -by wss代码:Vue.extend的propsData 用得很少,仅用于开发环境 var CommonHeader = Vue.extend({ template:"我是网站头部 {{ message }} -by {{ usern

2017-09-18 10:23:34 15036

原创 Vue2 组件

一.全局组件和局部组件    全局注册的组件可以在全局使用;而局部注册的组件只能在其定义的实例内使用。 Vue.component("hello1",{ template:"这是全局化组件" }); worldworld={ template:"我是局部组件" }; var vm=new Vu

2017-09-11 14:42:48 399

原创 Vue2 模板template的四种写法

我是直接写在构造器里的模板1 我是选项模板3 我是script标签模板4 var vm=new Vue({ el:"#app", data:{ message:1 }, //第2种模板 写在构造器里 //template:`我是选项模板2`

2017-09-11 10:50:39 37033 2

原创 Vue2 构造器的生命周期

{{ message }} increment销毁 var vm=new Vue({ el:"#app", data:{ message:1 }, methods:{ increment:function () { this.mes

2017-09-11 10:36:29 307

原创 Vue2 全局-Vue.set更新vue数据

代码: {{ name }} --- {{ price }} --- {{ count }} 减少 function reduceOne() { Vue.set(cartData, 'count', cartData.count-1); } var cartData={ name:"T-shirt

2017-09-03 16:06:43 4974

原创 Vue2 全局-Vue.extend构造器拓展

下面用 Vue.extend 方法构造一个全局的网页底部。代码:我是内容,一大片内容。谢谢你了。 var Footer=Vue.extend({ template:"联系人:{{ contact }} 版权所有:{{ company }}", data:function () { return{

2017-09-03 16:00:28 2472

原创 Vue2 自定义全局指令Vue.directive和指令的生命周期

在Vue中,自定义指令的生命周期,有5个事件钩子:1-bind 被绑定,  2-inserted 被插入, 3-update 开始更新, 4-componentUpdated 更新完成,5-unbind 解除绑定。我们可以设置指令在某一个事件发生时的具体行为。例子如下:页面一进来:在控制台中设置一个新值:再设置一个新值:点击解绑,解除绑定(解除绑定之后,

2017-09-03 15:49:09 10190

原创 Vue2 指令v-bind v-pre v-cloak v-once

1.属性绑定指令 v-bindstyle> article{padding:20px;border:4px solid #ccc} .redColor{color:red} .blueColor{color:blue} .narrow{width:50%} .head{text-decoration:underline}style>

2017-08-27 16:01:00 1949

原创 Vue2 指令v-on v-model 各种表单控件

1.绑定事件指令v-ondiv id="app"> input type="number" v-model="myNumber"> button v-on:click="add">加1button> button @click="reduce">减1button> br>br> input type="number" v-model="one

2017-08-27 14:54:22 1933

原创 Vue2 指令v-if v-show v-for v-text v-html

1.插值指令{{ }} div id="helloWorld"> p>{{ msg + "!!!"}}p> p>input type="text" v-model="msg">p>div>script> var app=new Vue({ el:"#helloWorld", data:{ msg:"

2017-08-26 22:33:16 918

原创 咱家项目一瞥

由于近两年工作所做的项目大多限公司内部访问,所以只能贴出它们的系统截图,见谅啊。。。(页面有些部分考虑应需保密,所以涂抹上了,哈哈)如下:1.支付服务平台首页:收款产品页:2.收银台PC页:WAP页的一些不同的支付方式:

2017-08-03 17:16:22 305

原创 自制轮播图

效果:轮播图的关键:a.外层容器宽度设为一张图片的宽度,子元素的宽度是n张图片的总宽度(放置这n张图片用),此时子元素宽度大于了外层容器宽度,设置外层容器:overflow:hidden,可每次只显示一张图片。b.切换到下一张图片时的动画怎么做?从前的话就用jquery的animate函数,现在有了css3,使用transition动画就可以了,transition:left

2017-07-28 15:14:58 483

原创 js对频繁触发事件的函数防抖和函数节流

1.场景 函数防抖:注册时邮箱的输入框,随着用户的输入,实时判断邮箱格式是否正确。此时,每一次的用户输入都触发邮箱格式检测事件,造成了浪费,于是设置两次输入之间的时间间隔大于1s时(用户结束输入时),再执行检查邮箱格式。const filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

2017-07-27 17:52:47 8795

原创 监听浏览器回退事件

Dom: Js:window.onload=function(){ addHistoryEntity(); detectBack();}//新增一条浏览器浏览历史记录function addHistoryEntity(){ if(history.pushState){ //现代浏览器 history.pushState('s

2017-07-27 16:14:14 4004

转载 现在的网页该不该兼容IE6/7

这个文章,想跟大家讨论一个话题,就是咱们现在的网页该不该兼容IE6/7 ?首先,大家可以访问下来自百度流量研究院的统计  “浏览器市场份额” :http://tongji.baidu.com/data/browser 这个网页上可以选择时间段,查看浏览器的市场占有率:2014年全年:  IE6和IE7共占10.68%的市场份额2016年全年:   IE6

2017-01-03 17:46:44 4423

转载 js获取各种浏览器窗口可视部分大小(可视部分不包含工具栏、标签栏等)

js获取各种浏览器窗口可视部分大小(可视部分不包含工具栏、标签栏等)function getViewportSize(w){ w= w || window; //除了IE8以及更早版本外,其它浏览器都能用 if(w.innerWidth != null){ return { w:w.innerWidth, h:w.innerHeight } }; //对标准模式下的IE或任何

2016-11-25 15:58:28 2228

转载 js闭包

2016-11-25 15:39:09 306

C#.net_经典例子400个.

C#.net_经典例子400个.初级C#编程者可借鉴学习。

2012-09-27

MFC深入浅出

详细介绍了mfc常用各种技巧 用法 工具书

2012-09-27

Html + CSS入门经典

Html + CSS入门经典 附丰富源代码 详细介绍了html制作网页用法和技巧

2012-09-27

PHP手册工具书

PHP手册 所有PHP人员应该拥有的工具书一本

2012-09-27

一个月挑战C++

C++入门基础必备 一个月挑战C++ C++学习入门经典之作

2012-09-27

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除