- 博客(15)
- 收藏
- 关注
RSS订阅
2原创 Vue2.0和Vue3.0响应式原理对比以及Vue3.0的项目创建和composition Api的使用
1.Vue2.0和Vue3.0响应式原理对比1.1.Vue2.0响应式原理Vue2.0中使用ES5中的Object.defineProperty方法实现响应式数据const data = { name: 'hy', age: 18 } for(let i in data){ let temp = data[i] Object.defineProperty(data, i, { get(){ cons
2021-02-18 11:44:18
292
原创 select下拉框去掉箭头，替换图片
记录工作中用到的小需求.selectInput{ appearance: none; -moz-appearance: none; -webkit-appearance: none; outline: none; border: 2px solid #2D3753; background-color: #414B6B; width: 260px; height: 40px; color: #fff; -webkit-appearance: none;//清除默认样式
2020-12-23 13:22:06
801
原创 常用到的布局方式
掌握几大经典布局有圣杯布局、双飞翼布局、左右固定中间自适应 定位实现，还有flex弹性伸缩布局，grid网格布局，table-cell布局等等圣杯布局稍微说明一下： 浮动和负marginhtml代码中 middle部分首先要放在container的最前部分。然后是left,right**1.**将三者都 float:left , 再加上一个position:relative (因为相对定位后面会用到）**2.**middle部分 width:100%占满**3.**此时middle占满了，所以
2020-12-14 11:50:09
339
原创 盒子水平居中的几种方案
盒子水平居中的几种方案这种需求在我之前的项目当中是非常常见的刚开始的时候我是用position定位的方式来实现的，后来随着css3的兴起，display:flex的方式尤其是在移动端开发的时候来实现它是非常强大的，然后有一段时间我在看博客的时候发现display:table-cell的方式虽然不常用但是也可以实现，当然还有position+calc计算的方式，js方式，grid网格布局方式都可以实现定位三种定位一：absolute + 负margin(子盒子宽高的一半)（一定要知道子元素的宽高）.
2020-12-14 11:02:04
285
原创 vue 中使用防抖和节流，防止重复点击或重复上拉加载
vue 中使用防抖和节流，防止重复点击或重复上拉加载// 防抖export function debounce(func, delay = 5000) { let timer = null return function (...args) { if (timer) clearTimeout(timer) timer = setTimeout(() => { func.apply(this, args) }, delay)
2020-08-20 17:35:06
256
转载 50个CSS技巧
这里我工作中收集了10个很不错的CSS技巧，你可以用在你的项目上。它可以帮你很好地整理你的元素并让他们看起来蛮酷的。下面开始我们的内容，希望你会喜欢它。下面是我收集的CSS技巧，希望能帮助到你，感觉收藏吧。1. 黑白图像这段代码会让你的彩色照片显示为黑白照片，是不是很酷？img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter
2020-06-11 13:30:14
201
原创 简单理解vue响应式原理
通过Object.defineProperty监听对象属性的改变const obj = { message: '哈哈哈', name: '张三'}Object.keys(obj).forEach(key => { let value = obj[key] Object.defineProperty(obj, key, { set(newValue){ console.log('改变' + key + '值')
2020-06-05 15:27:28
140
原创 vue中用postcss-px-to-viewport实现px-vw转化
vue中用postcss-px-to-viewport实现px-vw转化1.安装postcss-px-to-viewportyarn add -D postcss-px-to-viewport2.创建postcss.config.js并配置module.exports = { parser: false, sourceMap: false, plugins: { 'autoprefixer':true, //低版本安卓css识别不了，开启可以自动转换让低版本识别的css
2020-06-05 14:03:04
944
原创 vue中如何使用图片懒加载vue-lazyload
vue-lazyload简单使用安装npm i vue-lazyload -S引入import VueLazyLoad from 'vue-lazyload'//安装lazyload插件Vue.use(VueLazyLoad)组件中使用<img v-lazy="src" alt="" />官方文档和示例：mint-ui Lazyload文档vue-lazyload github文档...
2020-06-04 16:58:11
140
原创 在vue中用fastClick解决移动端点击事件300ms延迟
原理:在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后真正的click事件阻止掉安装yarn fastclick引入import FastClick from 'fastclick'使用FastClick.attach(document.body)...
2020-06-04 16:18:16
178
原创 简易的git命令行入门教程
简易的命令行入门教程:Git 全局设置:git config --global user.name “Jessica”git config --global user.email “1084717763@qq.com”创建 git 仓库:mkdir vue-mallcd vue-mallgit inittouch README.mdgit add README.mdgit commit -m “first commit”git remote add origin git@gitee.c
2020-05-25 11:26:14
148
转载 JS滑动到页面底部
如果需要让页面平滑滚动到指定位置，则需要增加参数behavior，设置其值为"smooth"var t = document.body.clientHeight;window.scroll({ top: t, left: 0, behavior: 'smooth' });References：https://blog.csdn.net/Dongguabai/article/details/98057316...
2020-05-15 14:25:15
866
原创 Ubuntu 18.04安装：node及node版本管理工具
Ubuntu 18.04安装：node及node版本管理工具简介Nvm是一款node的版本管理工具，很方便快捷。安装简介Nvm是一款node的版本管理工具，很方便快捷。安装nodesudo apt-get install nodejssudo apt-get install nodejs-legacysudo apt-get install npm安装nvm前需要安装一下cur...
2019-10-29 16:12:50
1201
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人