随笔分类 - 前端开发笔记
摘要：此笔记记录实践中目前遇到的Vue3使用ref定义后的变量与传统JS变量的些许区别，仅是如上区别的冰山一角。 Vue3使用ref定义的变量实际上是一个对象！ 例如：使用ref定义一个数组 import {ref} from 'vue' var array = ref([1,2,3]) 如上这段代码实际
阅读全文
摘要：现有如下代码： const canvas1 = document.querySelector("#animation-container1"); const ctx1 = canvas1.getContext("2d"); 明明检查过了，确实有id为animation-container1的元素存在
阅读全文
摘要：当浏览器支持 user-select 时，如此写将使 user- select 覆盖 -webkit-user-select，而在不支持 user-select 的旧版浏览器中，-webkit-user-select 将生效。
阅读全文
摘要：本人在本地网站学习Vue时，发现了写在Vue代码前面的实现导航栏功能的JS代码失效了，而如果把这段JS代码放在Vue代码的后面，则导航栏功能正常。 这可能是由于Vue的生命周期，如有操作了DOM的JS代码写在Vue的代码之前，所操作的DOM并未渲染，从而导致操作DOM的JS代码未能正常工作。 开发时
阅读全文
摘要：slice方法是对字符串进行切割/截取的一种方法。 string.slice(index1, index2) 其中：string为字符串名； index1为数字，意为字符串从第X个字符开始截取，如为1，则从字符串第1个字符开始截取。同时该数可为负数，当设为负数时则是从倒数第X个字符开始截取（但仍旧是
阅读全文
摘要：如下图所示，margin上下左右四个方向分别是1px, 2px, 3px, 4px。 而在浏览器F12检查时，margin显示如下图所示： 即浏览器检查时显示的margin值，是按照上、右、下、左的顺序来的。 该规律在padding也同样适用。
阅读全文
摘要：百分比(%)单位：百分比单位在响应式设计中十分好用，不过有时候，使用百分比单位设置元素的宽度可能会导致元素过小或过大。为了避免这种情况，可以结合使用百分比和最小宽度（min-width）或最大宽度（max-width）属性来限制元素的大小范围。 em 和 rem 单位：em 和 rem 是相对于元素
阅读全文
摘要：当flex布局的父元素使用align-items: center时，子元素都会居中，而若想要单独某一个子元素不居中，而是向左对齐，则应该给子元素添加align-self: flex-start。
阅读全文
摘要：给元素添加样式border-collapse: collapse即可。
阅读全文
摘要：setInterval使用格式：setInterval(函数, 间隔时间) 意为每隔一段设定的间隔时间（单位为ms）就执行一次函数。 需要注意的是，里面的函数不需要带括号，否则无法正常执行。如下： 正确写法：setInterval(fn, 1000) 错误写法：setInterval(fn(), 1
阅读全文
摘要：checkValidity()会检查元素是否有任何输入约束条件，并且检查值是否符合约束条件。 如下所示，Input元素下限为4上限为20： ··· <input id="password" type="number" min="4" max="20"> ··· <script> function m
阅读全文
摘要：JS中，switch 语句会使用恒等计算符( )进行比较。 如上所述，下列代码中因为x定义为字符串10，而case为数字10，因此将不会弹出“Hello World”： var x = "10"; switch(x) { case 10: alert("Hello"); } 实际应用时应注意这点。
阅读全文
摘要：Boolean()函数可以将其他数据类型转化为布尔型数据。 值得一提的是，大部分数据转化为布尔型数据都是true，而''（空字符串）、0、NaN、undefined以及null会被转化为null。 在实际应用时有很多用处。
阅读全文
摘要：在标签中填写 onclick 事件调用函数时，不是 onclick=函数名， 而是 onclick=函数名+()，代码如下所示： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>*来自菜鸟教程(runoob.com)</titl
阅读全文
摘要：span、font标签都默认具有inline属性，此时将无法修改这两个标签的height，应将其display属性改为inline-block
阅读全文
摘要：菜鸟工具的该实例非常清晰地展示了各种transform是如何撰写代码的且是什么样子的： Css3 Transform 各种变形旋转 | 菜鸟工具 (runoob.com)
阅读全文
摘要：opacity: value / inherit; value的值从0到1，从完全透明（0）到完全不透明（1）； inherit：从父元素继承 opacity 属性的值。
阅读全文
摘要：滚动条样式的修改是通过伪元素实现的： -webkit-scrollbar 滚动条整体部分 -webkit-scrollbar-button 滚动条两端的按钮 -webkit-scrollbar-track 外层轨道 -webkit-scrollbar-track-piece 内层轨道，
阅读全文
摘要：后代选择器 会选择所有后代，不论a是li的几代后代。例如在下列代码中，ul a {color: red}，111和222都会被改为红色。 <ul> <li><a>111</a></li> <a>222</a> </ul> 子选择器 只会选择第一代直系后代（儿子），而不选择其他后代（孙子或其他）。 并
阅读全文
摘要：HTML部分 CSS部分 如果想要打出text-align: center，可以直接打tac（text-align: center每个单词的首字母）然后按一个tab，即可快速生成text-align: center； 如果想要打出width:100px，可以直接打w100，然后按一个tab，即可快速
阅读全文
浙公网安备 33010602011771号