- 博客(26)
- 收藏
- 关注
RSS订阅转载 【转载】vue3中watch数据，因为dom对象导致页面卡死的问题
【转载自】-vue3中watch数据，因为dom对象导致页面卡死的问题问题今天有个功能需要监听数据变化，为了方便存取将生成的dom对象存放在数据中，导致页面卡死的问题。问题代码：export default definedComponent({ setup() { const ele = ref(null) const nodes = { a1: { name: 'Text',
2021-11-24 16:55:56
1401
原创 sublime text3 css3前缀自动补充插件
如何下载 按快捷键ctrl+shift+P 打开包控制器， 输入install Package，等待获取服务器列表，接着输入 Autoprefixer 等待下载完成就ok了。需要安装node.js使用输入css3 属性 如 transition ，按下tab键就可以自动补全前缀。
2020-03-02 15:18:36
13688
原创 自定义vue radio控件
如何使用vue自定义radio控件?背景原生浏览器的radio控件的样式谁用谁知道,一个字丑! 所以今天要使用vue之间封装一个美美哒的radio控件.实现功能自定义v-model,使组件之间数据能够进行双向绑定.使用checked属性默认选中radio使用disabled属性禁用radio当用户点击radio时触发组件上绑定的change事件代码实现...
2020-03-02 15:18:06
9057
8
原创 使用 vue-router 切换页面时怎么设置过渡动画
如何实现切换页面时的过渡动画?背景今天在编写页面时,看到页面没有任何效果就只是直入直出,完全没有一点逼格,所以想要实现类似于原生app的那种切换页面时的特效,遂开始google,发现网上各种方案都是各有优缺点,于是整理了自认为优雅的方案并记录下来.实现难点如何判断切换路由时是前进还是后退每次切换时向左向右切换动画如何实现解决方案我们需要给各个页面定义层级
2020-03-02 15:16:31
50329
20
原创 当元素使用flex布局，子级无法设置高度怎么办？
1.使用绝对定位html <div class="wrap"> <div class="header">头部</div> <div class="main"> <div class="container">内容</div> </div> <div class="footer">尾部</d
2020-03-02 14:54:54
12572
原创 配置webpack作为你新轮子的打包工具
本文首发在 掘金背景前两天帮前同事写一个兼容公安内网，外网，专网的多地图合一的地图类库，但是越写越烦躁，整理一下有以下几个痛点：使用es5语法编写javascript，语法啰嗦冗长。js代码全部写到一个文件中，没有模块化，项目难以维护。需要手动使用压缩工具压缩代码。所以打算使用webpack作为新轮子的打包工具。预期目标期望使用es6语法编写插件代码，代码整洁易读。支...
2019-01-09 17:20:55
496
原创 改造vue-cli,使用mockjs搭建mock server
本文首发在 掘金关于最近准备开发一款web应用，考虑到可能会有前后端并行开发的场景,所以决定使用mockjs做mock server。浏览官网文档时发现没有跑在webpack上的例子，索性自己找方法解决。什么是mockjs?他的使用场景是什么？当前端工程师需要独立于后端并行开发时,后端接口还没有完成,那么前端怎么获取数据？这时可以考虑前端搭建web server自己模拟假数据,mo...
2019-01-09 17:14:42
6303
原创 从零开始到发布上线，如何自定义一个webpack loader
本文首发在 掘金关于前两天在使用webpack搭建移动端web的时候,需要使用到flexible.js动态修改html的font-size。考虑到只有几行代码，我想把flexible.js镶嵌到&lt;head&gt;中,同时我希望能够随时修改它的源码,并且最后输出到html中是压缩过后的代码。由于没有找到类似于我描述的这类插件，我决定自己动手写一个。什么是webpack loader...
2019-01-09 16:57:26
1182
原创 zepto.js scrollTop方法在移动端chrome中失效的问题
问题正在开发移动web,使用的是较为轻量的zepto.js,在移动端chrome测试时,突然发现返回顶部的功能失效,也没有任何报错，其他浏览器都运行通过，解决后记录下来。//这段代码在chrome移动端失效$(document.body).scrollTop(0);解决办法有这个问题的更改为下列代码//将事件挂载到window对象上,就可以正常运行了$(window).scrollTop(0);
2017-12-15 16:43:02
6666
原创 dataset兼容低版本IE的方法
元素dataset属性兼容性很差,IE11以上才支持,所以写了个方法兼容下,一下是代码function getDataset(ele){ if(ele.dataset){ return ele.dataset; }else{ var attrs = ele.attributes,//元素的属性集合 dataset = {},
2017-11-22 09:39:42
2334
2
原创 使用vue-resource读取本地json文件404
使用json文件来模拟数据的时候报错404，在chrome network 中查看，路径没错但是还是报错了。 然后去百度了，原来是dev-server限制了http的访问，解决办法就是讲json文件放到static文件夹下面，static文件夹没有被限制。
2017-10-28 15:33:45
2273
原创 jquery 源码学习 – jquery的闭包
jquery 源码学习 – jquery的闭包jquery源码版本2.0.3,下载地址：http://www.jq22.com/jquery/jquery-2.0.3.zip这篇jquery源码学习是作为秒味课堂的jQuery源码分析的学习笔记。什么是闭包？闭包是建立一个独立的作用域，并让外部能够访问函数内部变量和对象的方法。闭包的作用闭包可以创建一个不被外部干扰的封闭的作用域，保证全局作用域不被污
2017-08-16 16:16:00
579
原创 用js获取当前日期的前一天
使用时间戳获取var date = +new Date(); //获取当前日期时间戳var before = date-1000*60*60*24;//当前日期时间戳减去一天时间戳var beforeDate = new Date(before);//将时间戳转化为Date对象var result = beforeDate.toLocaleString();//当前日期2016/9/1 下午1:17
2016-09-01 13:18:58
12267
2
转载 使用gulp-concat合并js文件
1.安装nodejs、构建目录、初始化项目搭建gulp项目2.安装gulp-concat插件在项目目录下打开命令提示符工具按下 ctrl+r --> 输入 cmd安装gulp-concatnpm install gulp-concat --save-dev可能会比较慢，等待一段时间。完成安装3.如何使用首先在 项目根目录下的 gulpfile.js文件中间中 引入 gulp插件和gulp-con
2016-08-22 10:55:53
2506
原创 用nodejs启动一个简单的本地服务器2步搞定
1.下载anywhere插件 ctrl+r –> cmd 打开命令提示符工具输入：npm install anywhere --g -g 表示全局安装，因为网络原因可能会很慢耐心等待。2. 启动本地服务器输入 ：anywhere 8089启动本地服务器
2016-08-21 17:12:17
4646
1
原创 sublime 自动注释 插件 DocBlockr
安装 ctrl+shift+P –> install Package–> DocBlockr 等待下载完成.使用输入 /** 按下enter 键 自动完成注释范围。
2016-07-30 13:46:07
5284
1
原创 angular ng-true-value 的作用
当我们点击checkbox 选中复选框时，ng-model 的绑定默认值是true，取消选中时为false.<input ng-model="checkboxModel" type="checkbox" >//选中时，checkboxModel 等于 true如果我们需要获取的值为字符串或者数字呢？那么就需要用到 ng-true-value 和ng-false-value选中checkbox 时：<
2016-06-13 16:34:32
13050
原创 javascript 基础 -- 替换字符串文本中的空格
替换字符串中字符 1.regExp : 正则表达式匹配字符串，匹配成功的字符串替换成指定字符。 2.str : 用指定字符替换str字符串。 3.string ： 替换字符串str.replace(regExp | str , string);实例替换字符串中的所有空格function replaceStr(val){ var str = val.replace
2016-06-07 15:54:46
819
原创 angularjs 封装百度地图API（实现异步加载）
想用angular封装百度地图api，先吧最基础的异步加载完成，以后需要新功能在慢慢往上加，直接上code不废话。申请百度秘钥APIhttp://lbsyun.baidu.com/apiconsole/key/create //创建应用获取AK这一步不多讲，大家都会，不申请的同学可以使用我调试用的密钥。会在下面贴出来，只能调试用哦。定义service(function() { 'user s
2016-05-28 13:43:47
4413
1
原创 sublime 分屏编辑
有时候需要左右编辑两块地方的代码，开两个编辑器又太麻烦，那么有个sublime自带的快捷键分屏可以解决烦恼。shift+alt+1~5可以分出多个屏幕。
2016-05-23 13:43:18
2067
原创 sublime 设置背景透明度
开头今天看到有些大神的编辑器半透明喜欢的不得了，所以自己就到网上搜了下，有些教程过时了。所以找了半天才找了，分享出来。下载sublime 透明背景插件我用的是git下载插件：git clone https://github.com/vhanla/SublimeTextTrans.git然后，打开sublime 选项卡 Preferences -> browse Packages 将下载的
2016-04-26 12:18:13
10716
5
原创 sublime JS Format js格式化工具
打开sublime 包控制器ctrl+shift+p 或者 点击菜单栏的“Preferences”-->"Package Control"打开包下载器输入 install package，回车。安装 JS Format js格式化工具输入 JS Format 弹出插件选项，回车。即可安装快捷键是 ctrl+shift+f
2016-04-25 15:37:59
9197
原创 开发web时禁止浏览器缓存资源
开头平常在编辑代码时，更改html页面总是没反应，觉得奇怪，后来发现是流浪器缓存问题。清除chrome流浪器的模板缓存1.F12 打开console,选择 network2.勾上 diable cache3.catl+r 刷新页面就好了[]~(￣▽￣)~*
2016-04-25 10:31:46
2390
原创 使用gulp-sass 和 gulp-livereload 自动编译sass文件
吐槽前面我也说过了，出来实习几个月，被前端磨得快没脾气了，特别是写css 时 不停的F5 -> 切换.. 循环 W(￣_￣)W，使用 gulp 前端自动化很好的解决了这个问题。在这篇blog中不止介绍 gulp-sass 还有一款 gulp-livereload ，两个插件配合使用，简直爽爆了 (≧▽≦)/。gulp-sass简介： gulp-sass 是一款编译sass 的插件，只需要一行命令行
2016-04-24 18:01:53
1350
原创 使用gulp 完成前端自动化
刚出来实习，刚开始第一个项目就被深深的伤害到了，项目进度缓慢，在一些很琐碎的地方耗费了大量时间，就写css时: 量像素->切换到sublime编辑器->写css->刷新页面->再切换..泪奔，入了前端的坑啊..前两天在网上看到gulp这个神器,照着教程怎么都无法成功，Σ(｀д′*ノ)ノ，后来发现是教程太老了！！浪费了好多时间，找了一天终于找到完整的了，把学习笔记分享出来咯( ╯▽╰)安装n
2016-04-24 16:03:25
1076
原创 安装Yeoman + Bower + Grunt 创建angularjs 项目结构（新手笔记一）
Yeoman项目初始化工具，快速生成一套项目文件，代码结构和需要的工具。 在官网上有生成器可以选择 ，http://yeoman.io/generators/bower一个包管理器，用以搜索安装前端项目资源grunt 需要反复重复的任务，例如压缩、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。安装nodejs在win7
2016-03-15 15:49:02
1516
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人