- 博客(178)
- 资源 (5)
- 收藏
- 关注
原创 如何使用promise
git项目地址:https://github.com/WangShuangshuang/promiseindex.html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Promise</title><...
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
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅