- 博客(62)
- 收藏
- 关注
原创 web前端常用调试工具
当我们写 webapp 或者 移动端H5网页时,要在手机上调试并不容易。alert:很早之前的调试办法(已被抛弃)vconsole:是2016年由微信公众平台前端团队推出(目前大量使用)eruda:2017年推出(目前大量使用)
2023-07-30 15:55:51
518
原创 vscode实用配置、常用插件
在Files: Auto Save Delay中配置延迟保存的时间。在Files:Auto Save中 选择afterDelay。文件--首选项--设置--输入“自动保存”-
2023-07-09 11:33:08
6860
原创 vue-router实现history模式配置
一:概述vue-router可以设置两种模式:hash和historyconst router = new VueRouter({ mode: "hash", // mode: "history", routes});如果使用hash模式,一般无需特殊配置;但如果要使用history模式,则前端和服务端要做一定的设置;使用history模式通常本地调试没有什么问题,但是一旦发布到测试或生产环境,则会出现页面白屏或者刷新页面白屏的现象,这种问题的出现是因为前端和服务
2022-02-09 16:11:46
17530
3
原创 手机端兼容性总结
一、iphone手机上keyup事件时灵时不灵问题描述:手机端页面有个input输入框,获取焦点时软键盘弹起,此时点击【搜索】按钮,时而有效时而无效,出现该问题的机型:iphone8、11、xr、se等版本。原因分析:......解决方案:使用keydown或者keypress事件代替即可。二:iphone手机慎用固定定位(position:fixed)问题描述:比如一个搜索页面要在顶部固定搜索框,通常想法是把input框用固定定位将其布局到页面顶部,但是此时会出现个现象,当手指下拉页面
2020-08-18 22:41:48
359
原创 vue路由系统mode的hash和history的区别及用法
环境:vue2 + vue-cli3;目标:实现用node后台部署history路由模式的vue项目;一:vue路由模式vue的路由有两种模式--hash和history,二者该如何选择,对比如下:二:hash模式......待完善三:history模式后台:node + express建一个文件夹,例如:demo,进入demo文件夹中,创建一个server.js文...
2020-05-03 23:03:54
1174
原创 浏览器存储方案
一:概述在前端开发中,经常要用到浏览器存储,浏览器存储有如下作用: 1.可有效减少前后端交互; 2.可以实现跨页面传值;二:浏览器端存储方案1.cookie Cookie 是服务器保存在浏览器的一小段文本信息。浏览器每次向服务器发出请求,就会自动附上这段信息。有些开发者使用 Cookie 作为客户端储存。这样做虽然可行,但是并不推荐,因为 Cookie 的...
2020-04-06 10:56:40
472
原创 vue项目使用mock数据的几种方式
以下讲解基于vuecli3.0创建的项目首先我们来说一说vue/cli 3.0 与 2.0 的一些不同:3.0 移除了 static 文件目录,新增了 public 目录,这个目录下的静态资源不会经过 webpack 的处理,会被直接拷贝,所以我们能够直接访问到该目录下的资源,静态数据(如json数据、图片等)需要存放在这里。 3.0 移除了 config、build 等配置目录,如果需...
2020-02-22 18:34:12
2463
原创 实现手机端调试页面
1、在vscode中安装 Live Server 插件2、安装成功后,vscode右下角会有 Go Live 标识点击3、cmd ipconfig 查询自己电脑的ip地址4、复制地址替换端口前的地址5、把地址发送到手机端,手机端点开即可预览...
2019-12-24 16:33:46
12215
原创 微信小程序开发坑总结
1、background图片url不能为本地图片;2、wx.request()请求,当methods:''POST时,需要同步设置header的"content-type"为"application/x-www-form-urlencoded";3、canvas 绘图在安卓手机出现绘图,但并没有按照原设定参数绘制,这种现象时有时无,这种问题出现的概率在安卓设备上很大;解决方法:使用惰性...
2019-09-26 16:35:31
472
原创 有关页面跳转
实现跳转的方式大概有如下几种:<body> <div>...b页面...</div> <input type="text" placeholder="请输入..."> <div> <a href="/a.html">[a标签]跳转到a页</a> </div...
2019-08-21 10:23:19
227
原创 css相关
一、单位css可用单位可分为绝对单位和相对单位。1.1---绝对单位绝对单位:px,pt,pc,cm,mm,in;css中的绝对单位大小固定,显示效果不受到外界因素影响,但这种单位多不适用于前端开发,因为现在的web页面显示设备尺寸五花八门。绝对单位,前端常用的是px,其它的绝对单位基本用不到。px:像素,全称pixel,指的是一张图片中最小的点,或者是计算机屏幕中最小的点...
2019-07-19 16:19:08
174
原创 实现textarea标签高度随内容自动变化
默认情况,textarea标签的高度是不会随文本内容自动撑开的,即其高度固定,高度过多时会使textarea标签出现滚动条;但是有时候会有需求:实现textarea标签高度随内容自动变化,那么可以利用scrollHeight属性实现,如下:// html部分<textarea id="textarea"></textarea>// js部分function ...
2019-06-19 10:08:28
1716
原创 怎么使浏览器兼容ES6语法
随着前端技术的发现,es6语法在被更大范围的使用。浏览器支持情况:支持度比较好的是Chrome和Firefox浏览器,支持度最差的是IE(即便是IE11,支持度也很差)。哪里有灾难,哪里就有勇士和救兵,针对ES6的兼容性问题,很多团队为此开发出了多种语法解析转换工具,把我们写的ES6语法转换成ES5,相当于在ES6和浏览器之间做了一个翻译官。比较通用的工具方案有babel,jsx,trac...
2019-05-08 11:07:23
3778
原创 HTML5的离线检测
// HTML5定义了检测设备是否网络连接的 “属性” : navigator.onLine ; // 该属性为一布尔值,为true时表示设备在线,为false时表示设备连线 ; console.log(navigator.onLine); // 除了onLine之外,HTML5还定义了实时检测网络是否连接的两个 “事件” : online 和 ...
2019-01-01 11:25:18
576
原创 ios手机使用new Date('2018-11-30 23:55:00').getTime()出错
页面使用倒计时时发现:ios手机使用new Date('2018-11-30 23:55:00').getTime()出错,打印一直是NaN;但是安卓手机是好的;最终发现问题症结:是日期格式(2018-11-30 23:55:00)不兼容IOS系统,需要转化成(2018/11/30 23:55:00);举例如下:var timeChose = that.data.pleaseCh...
2018-11-30 13:48:12
648
原创 vue-cli项目构建目录介绍
一:用vue-cli正确构建一个项目的目录如下:二:目录介绍如下:2.1:一级目录/文件介绍如下:build文件夹: 用于存放 webpack 相关配置文件config文件夹: 用于存放 vue基本配置文件node_modules文件夹: 用于存放 npm install 安装的依赖代码库src文件夹: 主要用于存放 我们开发的代码。staic文件夹: ...
2018-11-09 11:58:39
338
原创 vue-cli多页面实现
概述:vue-cli主要是用于构建单页应用的脚手架,但是实际开发的项目中,很多项目都是多页的,所以才有对基于vue-cli生成的单页应用的改造需求,以实现多页应用。本例基于的vue版本为:"vue": "^2.5.2";一:基于vue-cli创建一个项目命令1:vue init webpack;命令2:npm install;命令执行完成后的默认项目结构如下:这样,一个...
2018-11-08 14:36:46
855
原创 node.js常见配置概念解释
__dirname 表示当前文件所在的目录的绝对路径__filename 表示当前文件的绝对路径例子,文件路径有如下结构:newapp > demo > hello.js在hello.js文件中编写如下代码:console.log(__dirname); 打印结果: /Users/jerry/51talk/newapp/democonsole.l...
2018-09-17 11:34:25
212
原创 前端优化页面性能小结
一:减少页面加载时的请求数量1:使用雪碧图;2:按需加载;3:延迟加载;4:合并css和js;5:提示产品(需求),不要在单个页面处理过多复杂流程,建议:单个页面流程过于复杂时可以考虑在该页面提供链接,交互时跳转到另一个页面处理逻辑,以分解单个页面的负载;二:压缩资源文件1:压缩图片(单张图片不能过大,最好不要超过50k)、css、js等资源文件; ...
2018-09-06 10:26:41
207
原创 通过原生js完成ajax请求
首先要知道,ajax的核心是>>>XMLHttpRequest对象;XMLHttpRequest对象有许多方法,最有用的当属open方法,它用于指定服务器上将要访问的文件,例如:open("GET", "test.txt", true );指定了请求目标后,就可以用send方法发送请求啦;下面看一个实例:<body> <button...
2018-08-19 17:56:54
357
原创 css弹性布局(flex)
1:概念解读:传统的布局解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。但对于一些特殊的布局方式(如垂直居中),传统盒模型显得有点力不从心,而对弹性布局(flex)来说却很容易实现。2009年,W3C 提出了一种新的方案 ---- flex 布局flex是Flexible Box的缩写,意为“弹性布局”,用来为盒状模型提供...
2018-08-19 16:47:40
1116
原创 vue2.0生命周期解读
首先看下官方概念解释:1.beforeCreate创建前的状态(创建实例前,vue实例的属性值为undefined)。2.created实例创建完成后(data被定义了,但el属性为undefined)。然而,挂载阶段还没开始,$el属性目前不可见。3.beforeMount挂钩前(DOM渲染前),el属性已经拿到对应的DOM元素。4.mounted挂载结束(Dom...
2018-08-15 15:52:30
386
原创 由于touchend事件在滑动时也会被触发,引起了误操作
问题:在列表里运用touchend事件,当手指在列表上滑动时,也会触发列表元素上的touchend事件方案一:/*仅适用于内容中点击元素。对于拖动等元素,需要自行在页面处理。* 主要是绑定touchstart和touchmove事件,并判断用户按下之后手指移动了多少像素。* 如果手指移动距离小于10像素,则还是认为用户在做点击操作。如果移动距离超过了10像素,则取消后续事件监听函数的执...
2018-08-14 11:30:53
1858
原创 vue碎片
1:有关过滤器的使用地点过滤器 filters 不能和 v-model 一起用,只能和 v-bind 或者 {{}} 中使用,如下图:
2018-08-07 14:35:23
287
原创 有关npm的常见用法
简介:NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:1.查询npm版本:命令:npm -v2.查看某个包的所有版本号的方法:命令:npm view 包名称 versions例如:npm view jquery versions3.安装某个包的方法:命令:npm install 包名称 例如:npm i...
2018-08-01 10:17:23
240
原创 再谈定时器
setTimeout 和 setInterval两个定时器都是接收两个参数;第一个参数可以是字符串或函数;第二个参数是时间(单位是毫秒);如下图:重点关注第一个参数用法,如下所示:// 测试setTimeout定时器 var test1 = function () { console.log("执行了一次t1") };...
2018-07-31 11:20:59
229
原创 vue父子组件通信
vue父子组件通信的几种情况:1、父组件传递自己的data值给子组件; 2、父组件调用子组件的事件;3、子组件调用父组件的事件;一:父组件传递自己的data值给子组件父组件可以使用 props 把data数据传给子组件。实现方式:使用 vue 的 props// 关于 props 的官方介绍// 子组件A.vue配置如下:// 如下为...
2018-07-27 14:34:34
351
原创 vue项目中如何全局引入jquery
说明:在index.html直接用<script>标签引入,不会生效的,正确引入姿势如下:1:打开package.json文件,手动在dependencies中加入如下代码;2:运行cnpm install,这样就会引入版本为2.1.1的jquery作为依赖;3:打开webpack.base.conf.js文件,对该文件进行两处修改,如下图:4:在需要的页面...
2018-07-20 16:08:32
7105
原创 vue-cli构建手机端项目如何手机上测试
1:找到config文件夹下的index.js文件,打开2:将host值设置成本机ip3:重新启动项目即可
2018-07-19 14:09:29
1165
原创 移动端安卓和ios兼容性汇总
问题1:iphoneX适配方法。首先了解一下iphoneX设备基础信息,如下:iphoneX屏幕组成:上部齐刘海(44px)+ 安全区域(safe area)+ 底部手势区域(34px)。默认,页面只显示在“安全区域”中,导致屏幕顶部和底部看起来很别扭,此时可以通过如下几种方式进行适配:1):设置viewport-fitviewport-fit可以取两个值contain(默...
2018-06-01 16:51:06
5630
原创 网页从输入url到完整呈现出来都经历了哪几个过程
大致可以分为如下7步:1:输入网址;2:发送到DNS服务器,并获取域名对应的web服务器对应的ip地址;3:与web服务器建立TCP连接;4:浏览器向web服务器发送http请求;5:web服务器响应请求,并返回指定url的数据(或错误信息,或重定向的新的url地址);6:浏览器下载web服务器返回的数据及解析html源文件;7:生成DOM树,解析css和js,渲染页面,直至显示完成;...
2018-05-18 15:15:00
2788
原创 前端实现跨页面传值的几种方式
一:利用url参数传递//1:A页面设置url参数$('#go_url').on('touchend',function () { var sss = "中国"; window.location.href = encodeURI("demo2.html?name=" + sss + "&age=5000");});//2:B页面获取url参数var url = windo...
2018-05-18 10:42:00
8845
1
原创 html5本地存储localStorage
作用: 1--当前页面存储/读取缓存信息; 2--跨页面传值;容量:5M;浏览器支持情况:对于不支持的浏览器,可以用cookie进行替代支持(但是cookie只支持4K大小)。1.当前页面存储/读取缓存信息:var arrDisplay = [];arrDisplay.push(userNameVal);//存储,IE6~7 cookie 其他浏览器HTML5本地存储if (w...
2018-05-17 17:55:23
223
原创 Ajax完整写法(含加载进度方法)
$.ajax({ url: "http://www.microsoft.com", //请求的url地址 dataType: "json", //返回格式为json async: true, //请求是否异步,默认为异步,这也是ajax重要特性 data: { "id": "value" }, //参数值 type: "GET", //请求方式 ...
2018-05-16 15:34:14
4709
原创 jquery的 $().each 与 $.each 的区别
在jquery中,遍历对象和数组,经常会用到$().each和$.each(),两个方法。两个方法是有区别的。一:$().each这个方法,在dom处理上面用的较多。$(“input[name=’ch’]”).each(function(index){if($(this).attr(‘checked’)==true){ //一些操作代码}回调函数是可以传递参数,index 就为遍历的索引。说...
2018-05-16 13:49:36
402
原创 手机端安卓系统网页input获取焦点被键盘遮挡分析
当 css里设置html,body{ height:100%; }会造成标题所述现象,这里把body的height值设置成autoj即可消除上述现象。
2018-05-09 16:52:54
1580
原创 proxyTable配置接口地址代理
在项目开发的时候,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们现在使用vue-cli进行项目打包的时候,我们在本地启动服务器后,比如本地开发服务下是 http://localhost:8080 这样的访问页面,但是我们的接口地址是 http://xxxx.com/save/index 这样的接口地址,我们这样直接使用会存在跨域的请求,导致接口请求不成功,因此我们需要...
2018-04-16 16:37:09
3183
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人