- 博客(45)
- 收藏
- 关注
RSS订阅原创 【关于vue-awesome-swiper在ipad中a标签点击事件无效的问题】
关于vue-awesome-swiper在ipad中a标签点击事件无效的问题最近开发项目的时候在swiper-slide中添加了a标签用于跳转其他网址，结果在iPad Pro4 (12.9)里点击a链接无效，其他设备没有问题，一开始以为是排版导致的层级问题，但在其他设备没问题，就排除这个想法，后来觉得是兼容问题，总之搞了好久没成功后来同事通过查api发现，是touchStartPreventDefault的默认值是true,默认阻止touchstart (mousedown)的默认事件，设置为false
2021-12-28 11:01:37
643
原创 v-if 和 v-show的区别
区别1：(展示方面)v-if个人理解：满足v-if条件就生成dom元素，不满足就不生成dom元素。换句话说: 就是v-if通过控制dom元素的存在与否来控制元素的显示和隐藏v-show个人理解：其实就是控制dom元素的css样式，满足v-show就显示，不满足就不显示换句话说：是通过设置DOM元素的css样式，display: block为显示，display: none为隐藏；下面用代码具体展示验证上面所说的<template> <div class="wra
2020-12-21 17:31:19
389
1
原创 JS 中 break和continue的区别
话不多少，直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> &l
2020-12-16 18:44:22
126
原创 Google Chrome 追加数据后 滚动条一直在原位置不动问题
最近项目中发现一个问题，在一个商品列表底部就一个更多，就需要点击这个按钮来加载更多的数据, 但是发现点击更多按钮，加载完新的数据后, 滚动条还是在之前的位置，想要查看加载后的内容，还要往上滚动去找加载加载前的位置, 用户体验会不好的解决方法：在滚动条的容器上添加样式:overflow-anchor: none一般加在 html 或者 body 上至于还有没有别的方法，还不知道，如果有其他方法，欢迎留言，谢谢～...
2020-11-03 15:41:08
540
1
原创 前端菜鸟在日期对象new Date()上踩的坑
前段时间公司有个活动页面的banner,只上线两天，两天之后就不再显示，为了省事，直接打算写个倒计时，动态控制banner的显示隐藏，结果就遇到了在safari浏览器的错误。下面举例说明：具体看代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l...
2020-03-20 13:59:54
971
原创 js原生实现简单的进度条效果
最近室友想实现一个点击按钮时会有一个进度条加载的过程，所以尝试做了一下。具体代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia...
2020-03-09 15:35:23
110
原创 js实现点击图片时将图片下载在本地
前段时间，项目有一种需求，就是实现点击图片时，可以将图片下载到本地。类似我们在浏览网页时看到好看的图片，右键然后选择存储的效果差不多，当时做的时候每次点击图片时都会打开一个新窗口。把图片在新窗口中展示出来。并不能起到下载到本地的效果，后来上网搜了下，找到了一个方法，今天整理一下。举例：首先创建一个index.html为了方便展示，不再创建js文件，js代码写在html文件中代码如下：&l...
2020-02-19 17:21:15
1655
原创 伪类选择器和伪类元素的用法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
2020-01-19 16:04:43
409
原创 vue生命周期
最近一直在做vue项目，却对vue的生命周期不太了解，所以在每个钩子函数中打印了下，方便区分 <template> <div @click='changedata'> 生命周期调用顺序{{dataname}} </div> </template> <script> export def...
2020-01-13 17:39:17
114
原创 什么是html5应用程序缓存
经常听说缓存缓存 却不知道缓存究竟是怎么回事？今天要说的缓存就是指没有网络连接时也可以进行访问应用程序缓存带来的好处是什么呢？离线浏览 用户可以在应用离线时使用它 例如现在的电视剧 不都是先缓起来然后在没网的时候还可以看电视一样的道理吧速度 已经缓存的资源加载的更快减少服务器负载 浏览器只从服务器下载更新过或更改过的资源所有主流浏览器均支持应用程序缓存 除了in...
2020-01-09 18:02:20
160
原创 vue中的自定义指令directive
vue中的自定义指令注册一个局部指令 <template> <div> <h1>{{name}}</h1> <p @click='updateEl'>更新</p> <input type="text" v-focus> </div> </templat...
2020-01-07 18:14:03
223
原创 vue中遍历器的用法
vue中的filter遍历器的用法首先展示的是局部过滤器的用法，又叫私有过滤器 <template> <div> <p>{{title | filterTitle('哦')}}</p> </div> </template> <script> export default {...
2020-01-06 13:19:39
433
原创 es6新的数据类型Symbol
* 学习Symbol * 首先Symbol是什么？它是新的(第七种)原始数据类型 null undefined Object Boolean String Number * 其次Symbol可以用来做什么？ 可以作为对象的属性名，可以保证不会与其他属性名产生冲突 * 特点: * 1. 不能使用new命令 值不是对象 类似于字符...
2019-12-09 18:24:59
173
原创 关于for...of for..in和Object.keys()的相同，不同之处
// 一: 遍历对象的方法 let person = { name: "张三", age: 25, address: "深圳", getName: function () { } } Object.keys(person).map((key) => { console.log(person[key]) // 获取到属...
2019-12-09 14:20:02
139
原创 实现每隔1s数组中的内容的位置一次前置一次
对数组中的内容进行换位，每隔1s思路：循环 新数组 间隔调用技术：for 循环( 或者你擅长的循环) 函数举例：结果[1, 2, 3, 4, 5, 6, 7]—>[2, 3, 4, 5, 6, 7, 1]—>[3, 4, 5, 6, 7, 1, 2]…js代码如下：let mylist = [1, 2, 3, 4, 5, 6, 7] functi...
2019-12-05 17:22:18
328
原创 关于 vue项目中safari浏览器下img标签中路径错误时的渲染问题
最近在做vue项目中，遇到通过请求到的数据循环渲染图片的问题，具体情况如下：Google浏览器中是这样：后来我做了处理，当一组数据中的图片的url地址没有时，只渲染有的，没有的用默认的背景图片,这里判断我用的v-show<img v-show='track.imageUr' :src="track.imageUrl" :alt="`${track.title} 앨범 커버`" ...
2019-12-05 10:30:16
525
原创 vue中项目中发现端口被占用解决方法（mac本）
最近在做一个vue的项目时，发现每次本地运行该项目时的端口号都不相同，一开始以为没有什么影响就没有管它， 后来发现代码更新后它还是运行的之前的代码，所以解决了以下这个问题（mac本）如下图 vue.config.js中是这么定义的首次项目起来是这样的几次之后发现端口好成了下面这样解决方法是 1.打开终端然后 输入 sudo lsof -i: 443(443是你vue.config....
2019-10-17 15:45:23
1510
原创 纯css实现简单的风车效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
2019-09-23 13:40:59
201
原创 vue中引入mixin具体步骤
以下的描述都是在vue脚手架中操作的1.首先在assets文件夹中创建一个minxin.jsexport const minxin = { data () { return { message: '师父', age: 22 } }, created () { this.gobeach() }, methods: { g...
2019-09-19 14:10:59
2323
原创 关于input type为submit设置高度失效问题
在用mac本做react项目时 遇到一个提交框样式设置的问题高度设置完之后 就是没有效果如下 html 内容: <input type="text"/> <input type='submit' className='sub' value='搜索提问'/> CSS 样式:.sub{ box-sizing: content-box;...
2019-09-06 09:50:04
965
原创 vue中引入jquery的具体操作
最近盆友工作中遇到了vue中要引入jquery的情况 今天试着引了一下 步骤如下:创建vue项目 npm vue-cli vue init webpack vuejquery(指的是项目名字)下载 jquery npm i jquery -Swebpack.base.cof.js中配置main.js中引入 import $ from “jquery”App.vue中实验 ...
2019-08-02 11:52:38
988
原创 数组和对象的解构赋值
首先是数组的解构赋值1.这是等号左右类型一样的情况下 数组的元素是按次序排列的，变量的取值由它的位置决定 如下： let [,,b] = [1,2,45] console.log(b) // 45 let [a,,c]= [1,2,3] console.log(a,c) // 1 3 let [d] = [...
2019-07-31 16:02:58
509
原创 防抖节流理解
性能优化是前端老生常谈的问题，今天看了下防抖节流这块的东西，觉得挺有意思的就敲了一个小例子首先是防抖个人理解防抖是有一个延时执行 也就是说我现在点击一个事件我有可能让他延迟0.3s触发，如果在者0.3s内又触发了，就不让它触发， 就重新计算周期到规定的时间再触发<button id='btn'>点击</button>防抖 <script&...
2019-07-30 17:51:47
141
原创 setInterval实现歌词或者诗句一点点展示出来
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { text-align: center; ...
2019-07-30 16:15:12
105
原创 关于es6中Proxy的学习笔记
Proxy 字面意思是代理在这里指的是 拦截 , 可以理解为一个关卡，每次外界对目标对象进行访问时，都必须拦截一下，它可以对外界的访问进行过滤或者改写Proxy 的语法：var proxy = new Proxy(targetobj,handler)每次用的时候先是实例化一下targetobj 指的是要拦截的目标对象handler 也是一个对象，它主要是用来定制拦截的行为，是读取还是设...
2019-07-29 18:03:54
162
原创 TS
什么是TypeScript?TypeScript是javascript的类型的超集，它可以通过编译工具编译成纯的javascript，并且运行在任何浏览器上。接下来，开始学习typescript,看看它究竟是什么？TypeScript它有一个很特别的地方就是类型系统（其实个人觉得可以看作是对变量或函数 添加了约束的方式）对于变量的类型定义，还有函数的类型定义能让我们一...
2019-07-25 14:40:12
540
原创 vue 跳转页面query和params传参
vue中遇到的知识点 （自己总结）query传参vue中跳转页面的时候有时需要带上参数，这种情况下有两种传参方式name对应的是params <router-link :to="{name:'detail',params:{detailtitle:'我是这条数据的ID哦}}"> 我要去详情页</router-link>...
2019-07-24 14:04:41
151
转载 vue中要用到的插件 和vscode中要下的插件
vue要用到的插件1.vue-router: 页面路由，用于做单页面应用(SPA)。2.vuex: 数据状态管理。3.vue-navigation: 记录路由并缓存页面，像原生APP导航一样。4.vconsole: 移动端调试利器5. axios: 一个很好的ajax封装集6. fastclick: 为了能够立即响应用户的点击事件，解决移动端click 300ms延迟，才有了FastC...
2019-06-24 16:16:58
2837
转载 generator函数
generator函数generator（生成器）是ES6标准引入的新的数据类型。一个generator看上去像一个函数，但可以返回多次。generator和函数不同的是，generator由function定义（注意多出的号），并且，除了return语句，还可以用yield返回多次。function* fib(max) { var t, a = 0...
2019-06-12 17:45:48
130
原创 js各种事件名称
键盘事件onKeyDownonKeyPressonKeyUp焦点事件onFocusonBlur表单事件onChangeonInputonSubmit鼠标事件onClickonContextMenuonDoubleClickonMouseDownonMouseUponMouseOveronMouseOutonMouseMoveonMouseEnteronMo...
2019-06-12 17:44:09
160
转载 react记录
创建文件夹mkdir+文件夹名称创建脚手架create-react-app + 文件夹名称yarn 淘宝镜像源yarn config set registry https://registry.npm.taobao.org -gyarn 相关知识yarn / yarn install 等同于npm install 批量安装依赖yarn add xxx 等同于 npm insta...
2019-06-12 17:41:38
145
原创 es6数组新增的方法
…扩展运算符let arr1 = [1, 1, 1, 1];let arr2 = [2, 2, 2, 2, 2];let arr = [...arr1, ...arr2];console.log(arr) //[1, 1, 1, 1, 2, 2, 2, 2, 2]let [x, y, ...test, z] = [1, 2, 3, 4, 5, 6, 7, 8, 9]console.l...
2019-06-12 17:38:44
172
原创 vue组件定义
组件（component）是我们自己扩展的html标签，封装重用的代码component 是vue.js最强大的功能定义：全局定义：Vue.component(组件名，配置对象) 配置对象里必须要有template,在任何实例都可以使用局部定义：要写在实例的配置里面 components:{组件名：组件对象}全局定义必须写在局部的前面 也必须要有templatevm是vue的一个实例...
2019-06-12 17:36:15
256
原创 埋点
什么是埋点？个人理解是 就是一个项目，完成之后投入应用之后想要获取客户的浏览和点击的数量时，就需要有一个埋点，来帮助计算统计数据的那么统计就要知道两个名词PV page visit 页面访问量（单页面和多页面有时候不同）UV unique visit 用户访问量（一个Ip算一个人）怎么做到埋点呢？用到了第三方（百度统计）步骤：graph LR首先百度统计上注册成功后新建一...
2019-06-12 17:31:48
160
原创 git常用命令
# git gitgit是一个开源的分布式的版本控制系统不管项目大项目还是小项目都可以由它来管理header 1 | header 2---|---git config --list | 命令说明git init | 初始化本地版本库git config --global user.name lixd|全局配置用户名git config --global user.email|...
2019-06-12 17:29:11
175
转载 swiper属性
var swiper = new Swiper('.swiper-container', { direction: 'horizontal', //默认是横向，可以设置竖向vertical Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。 history: 'love', //开始浏览器前进后退 没什么用 da...
2019-06-12 17:23:08
1806
转载 对象的深层遍历
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script> var xiaoming = { name : "...
2019-06-12 17:21:38
1672
原创 收集前端知识点
1.地理定位a) 先百度地图申请成为开发者，获取key。然后在Index.html页面 引入百度/腾讯地图的一个js文件。b) 在需要定位的页面里面new qq.map.geoLocation(key, myID) ，可以拿到当前所在位置的经纬度c) 把经纬度传递给后台，后台向地图发起请求，根据经纬度返回附近建筑信息，最后传递给前端进行渲染d)Iframe的src属性可以...
2019-06-12 17:15:03
692
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人