前端基础
关注
分享
扫一扫
前端基础知识总结
薛一半
就是一些问题的解决方法和备忘录而已
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
vue中的nextTick使用场景
1、如果要在created()钩子函数中进行的DOM操作，由于created()钩子函数中还未对DOM进行任何渲染，所以无法直接操作，需要通过$nextTick()来完成。 注：在created()钩子函数中进行的DOM操作，不使用$nextTick()会报错： 2、更新数据后，想要使用js对新的视图进行操作时。 3、在使用某些第三方插件时 ，这些插件需要dom动态变化后重新应用该插件，这时候就需要使用$nextTick()来重新应用插件的方法。 在数据变化后要执行的某个操作...原创 2021-08-30 16:54:12 · 540 阅读 · 0 评论 -
全局设置滚动条的样式
::-webkit-scrollbar {width: 8px;height: 8px;background:#b9b9b9;}::-webkit-scrollbar-button {display: none;}::-webkit-scrollbar-thumb {border-radius: 8px;background: rgba(131, 188, 241, 0.5);}::-webkit-scrollbar-track {...原创 2021-08-17 15:33:40 · 352 阅读 · 0 评论 -
如何让一行字体描述超出隐藏并用省略号代替超出的问题
在字体的标签里无需设置宽高，只需外层盒子设置就行。给包裹字体的标签设置样式overflow：hidden；display：-webkit-原创 2021-06-16 11:01:50 · 204 阅读 · 0 评论 -
如何让一个盒子快速填充整个屏幕
给盒子一个绝对定位absulotetop：0；left：0；right：0；bottom：0；即可原创 2021-06-16 10:48:39 · 409 阅读 · 0 评论 -
uniapp设置及获取全局数据
在uniapp中，在App.vue文件中可以设置“globalData(不在data里)”全局数据；uni.getSystemInfo({success:(result)=>{console.log(result)}}) 获取系统信息在export前设置 let app = getApp(); 就可以使用app.golbalData数据原创 2021-08-30 16:56:24 · 2528 阅读 · 0 评论 -
cssText
cssText 的本质就是设置 HTML 元素的 style 属性值。在某些浏览器中（比如 Chrome），你给他赋什么值，它就返回什么值。在 IE 中则比较痛苦，它会格式化输出、会把属性大写、会改变属性顺序、会去掉最后一个分号一般情况下我们用js设置元素对象的样式会使用这样的形式：var element= document.getElementById(“id”);element.style.width=”20px”;element.style.height=”20px”;element.st原创 2021-08-30 17:00:35 · 502 阅读 · 0 评论 -
mapstate，mapmutations，mapactions
mapState通过扩展运算符将store.state.orderList 映射this.orderList 这个this 很重要，这个映射直接映射到当前Vue的this对象上。所以通过this都能将这些对象点出来，同理，mapActions, mapMutations都是一样的道理。牢记~~~用例...原创 2021-10-21 10:24:45 · 147 阅读 · 0 评论 -
border样式
原创 2021-09-06 09:56:18 · 95 阅读 · 0 评论 -
C3的calc运算
calc主要是根据百分比设置外盒子的宽度，使内盒子根据外盒子的偏移来设置内盒子的宽度外盒子的样式：width: 100%；内盒子的样式：width: calc(100)原创 2021-06-17 10:01:57 · 141 阅读 · 0 评论 -
uniapp路由和页面的重定向
【1】uni.navigateTo(OBJECT): 保留当前页面, 重置到应用内的某个页面 1.保留当前页面, 重置到应用内的某个页面, 使用uni.navigateBack可以返回到原页面 2.可以传递参数, 接受参数时, 使用钩子函数onLoad【2】uni.redirectTo:关闭当前页面, 跳转到应用内的某个页面 1.关闭当前页面, 跳转到应用内的某个页面 2.可以传递参数【3】uni.reLaunch:关闭所有页面, 打开到应用内的某个页面...原创 2021-08-30 16:57:14 · 3407 阅读 · 0 评论 -
animatioan自定义动画
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。您必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。指定至少这两个CSS3的动画属性绑定向一个选择器：规定动画的名称、规定动画的时长。为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。创建动画，把它绑定到一个选择器，否则动画不会有任何效果。动画是使元素从一种样式逐渐变化为另一种样式的效果。0% 是动画的开始，100% 是动画的完成。......原创 2022-08-26 16:18:04 · 298 阅读 · 0 评论 -
VueX的mutations、actions
一、更改Vuex的store中的状态的唯一方法是提交mutation。Vuex中的mutation非常类似于事件：每个mutation都有一个字符串的事件类型和一个回调函数，这个回调函数就是我们实际进行状态更改的地方，并且他会接受state作为第一个参数。1、提交载荷可以向store.commit传入额外的参数，即mutation的载荷mutations：{ increment(state,n){ state.count += n ...转载 2021-12-06 17:39:56 · 1888 阅读 · 0 评论 -
利用demo的源码及注释，详细解释Vuex的使用
<body> <div class="app"> {{one}} <div>{{count}}</div> <!-- 15、状态变更 --> <div>{{muTwoState}}</div> <!-- 24、响应式渲染 --> <div>{{ stateTempt }}</div>.原创 2021-12-08 11:19:47 · 490 阅读 · 0 评论 -
CSS3样式小计
rem是CSS3新增的一个相对字体长度单位，只想对于根元素，即HTML元素字体大小。em是相对字体长度单位，如果用于font-size属性本身，则是相对于父元素的font-size。em的值不是固定的；任意浏览器的默认字体大小都是16px，所有未经调整的浏览器都符1em=16px。em是继承父元素的字体大小，可是当父元素字体大小改变时，其本身的大小则是另一个值。在CSS的body选择器中声明font-size=62.5%，再将你需要的原来的px数值除以10，然后换上em作为单位，这是其简便的做法。...原创 2022-08-16 19:16:20 · 153 阅读 · 0 评论 -
对VueX的状态管理进行模块化的简单模板
在store文件夹中有四个js文件actions.js、index.js、mutations.js、state.js入口文件 index.js文件中import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)import state from "./state";import mutations from './mutations';import actions from './actions';export defaul.原创 2021-12-07 16:05:05 · 334 阅读 · 0 评论 -
Vuex的state、getter总结(根据官网的一些总结和自己的一些理解)
一、state1、由于我们期望的是获得的状态是响应的，所以我们最好在组件的计算属性中用return，返回所用的状态值。2、将store注入到根组件(app)中(跟methods一致)，根组件及以下的所有子组件就都能使用store里的状态值，(this.$store.state.具体字段)。3、当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为解决这个问题，我们可以使用mapState辅助函数帮助我们生成计算属性 computed:mapS...转载 2021-11-30 16:32:25 · 1001 阅读 · 0 评论 -
JS的小结
4、箭头函数中 this 的指向不同：在普通函数中，this 总是指向调用它的对象，如果用作构造函数，它指向创建的对象实例。5、箭头函数不具有 arguments 对象：每一个普通函数调用后都具有一个。arguments 对象，用来存储实际传递的参数。但是箭头函数并没有此对象。3、箭头函数不能用于构造函数：普通函数可以用于构造函数，以此创建对象实例。2、 箭头函数全都是匿名函数：普通函数可以有匿名函数，也可以有具名函数。1、外形不同：箭头函数使用箭头定义，普通函数中没有。原创 2022-10-24 18:11:17 · 137 阅读 · 0 评论 -
浮动详细内幕特性
浮动详细内幕特性原创 2022-08-17 17:56:33 · 128 阅读 · 0 评论 -
transform2D变换
transition-timing-function 指定过渡效果（ease溶解效果；ease-out淡出；ease-in淡入；ease-in-out淡入淡出效果）transition-property 指定过渡的属性 all表示全部。transition-duration 指定过渡时间。transition-delay 指定过渡延迟。transition：all 过渡时间 过渡延迟。取值范围0~1，超出则放大。正值向左上方平移，负值向右下方平移。拉伸旋转，不会超出高度。...原创 2022-08-17 23:29:13 · 290 阅读 · 0 评论 -
vue3的一些注意事项
script首先，Vue3 新增了一个叫做组合式 api 的东西，英文名叫 Composition API。因此 Vue3 的script现在支持三种写法，正如你看到的那样，无论是代码行数，还是代码的精简度，的方式是最简单的形式。这种写法，让 Vue3 成了我最喜欢的前端框架。因为第一种写法的学习负担更小，先学第一种方式，掌握最基本的 Vue 用法，然后再根据我这篇文章，快速掌握 Vue3 里最需要关心的内容。第一种写法，跟过去 Vue2 的写法是一样的，所以我们不过多介绍。原创 2023-10-07 11:56:59 · 375 阅读 · 0 评论 -
用原生js和transform动画手撸一个轮播图
手撸轮播头图原创 2024-01-04 09:39:04 · 980 阅读 · 0 评论 -
vue封装组件进阶
首先，我们需要解决一个问题就是效果图上的诸如产品名称、生产地、提交时间等固定的文字能否也是动态的，根据我们传入的数据来一一展示呢？初次封装可能就会把共同使用的html及css代码剪切到一个子组件中，通过父组件给子组件的传值来达到渲染的效果；创作代码时，经常会遇到需求出现相似的界面效果，但是里面循环的列表参数不一致，重新写的话会导致代码冗余。注释：上方代码中循环对象，第一个参数为对象的键值，第二的参数为对象的键，根据循环对象的键来获取循环数组对象的规定值。这样写不就是相当于把冗余的代码剪切到另外的文件吗！原创 2025-02-08 14:43:31 · 500 阅读 · 0 评论 -
vue使用自定义动画，写个倒计时动画
当需要有个提示框，倒计时几秒后自动跳转页面，单纯的写个setinterval，从几秒减到0再跳转，虽然能满足需求，但是效果不太好。找事的老板就提出优化一下，此时内心万马奔腾。想到用animation自定义动画，写个倒计时，就是数字从小变大，再慢慢消失，再到下一位数字从小变大，如此循环。原创 2023-06-28 10:19:26 · 561 阅读 · 0 评论 -
格式化时间
【代码】格式化时间。原创 2023-11-30 10:19:53 · 207 阅读 · 0 评论 -
滚动条样式更改
:-webkit-scrollbar-track-piece 内层滚动槽。::-webkit-scrollbar-button 滚动条两端的按钮。::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的。::-webkit-scrollbar-thumb 滚动的滑块。::-webkit-scrollbar-track 外层轨道。::-webkit-scrollbar-corner 边角。::-webkit-resizer 定义右下角拖动块的样式。原创 2023-08-14 09:50:09 · 639 阅读 · 0 评论