随笔分类 - 前端学习
自己看前端视频的一些基础学习，加油，颜孙达
摘要：YAML是一种人类可读的数据序列化标准，广泛用于配置文件和数据交换。它的设计目标是使文件易于阅读和编写，同时保持足够的表达力以满足大多数应用的需求，YAML文件通常以.yaml或.yml为扩展名。 YAML的特点 简洁性：YAML 使用缩进来表示层次结构，避免了 XML 和 JSON 中常见的大量括
阅读全文
摘要：官网地址 https://echarts.apache.org/handbook/zh/concepts/dataset 要配合打在echarts Api进行查看，api地址如下: https://echarts.apache.org/zh/option.html#title 使用步骤一：引入ech
阅读全文
摘要：默认情况下，flex值为1，也就是占用弹性容器剩余位置的1份 使用flex修改弹性伸缩比的示例： <body> <div class="box"> <div class="item item1">1</div> <div class="item item2">2</div> <div class="
阅读全文
摘要：因为数据大屏一般在大的屏幕端进行展示。 实现缩放的逻辑：给div设置固定的高度和宽度。通过innerWidth来获取当前屏幕的宽度和高度，得到缩放比例。通过scale来缩放当前div、 具体的实现代码如下： <!DOCTYPE html> <html> <head> <meta charset="u
阅读全文
摘要：其主要通过给html动态的添加一个dark类。 主要要通过dom获取html标签，然后给html标签设置className 需要在main.ts中引入dark所在的css文件： 具体可以参考element Plus的官网
阅读全文
摘要：用处 用于数组和字符串，用于判断数组是否包含某个值。或者用于字符串是否包括某个子串。 如果找到该值或者字符串，则返回true，否则返回false 语法： arr.includes(valueToFind[, fromIndex]) valueToFind：必需。需要查找的元素值。 fromIndex
阅读全文
摘要：height: 100%; 和 height: 100vh; 是设置元素高度的两种不同方式 height: 100%;： 这个属性会使元素的高度等于其父元素的高度。也就是说，元素的高度将会占据其父元素的百分之百高度。 值为百分比时，实际的高度取决于其父元素的高度。如果父元素没有显式地设置高度，则 h
阅读全文
摘要：由于对象采用的是引用赋值。所以直接用“=”,修改属性的时候也会将原来的变量改变掉。 因此，就有了浅拷贝与深拷贝 用{...obj}和object.assign表示浅拷贝，其只拷贝外围对象的一层，而不会拷贝多层。 方法二：使用Object.assign 深拷贝的实现 其一是通过递归实现拷贝。其二lod
阅读全文
摘要：传统的写法不好记忆，书写麻烦，此时可以使用结构赋值的方法让代码更加简洁。 数组结构是将数组中的单元值快速批量赋值给一系列变量的简介语法。 变量的顺序对应数组单元值位置一次进行赋值操作。 如下： 应用一：交换两个变量 Js前面有那种情况需要加分号。（不加分号 解析器认为和上局是连成一句的） 一：数组解
阅读全文
摘要：使用箭头函数的目的：引入箭头函数目的是更加更加简短的函数写法并且不绑定this，箭头函数的语法比函数表达式更加简洁 使用场景：箭头函数更加适用于哪些本来需要匿名函数的地方 定义语法： const fn = () => { } 使用方式一：括号里面加形参 // 箭头函数 const fn = (x)
阅读全文
摘要：什么是闭包？ 简单理解：闭包=内层函数+外层函数的变量。正如前面所说的作用域链也会涉及到闭包，如下： let a = 6;//全局作用域 function f() { a = 7;//父级作用域 function d(){ a = 8;//自己的作用域 console.log(a); } d();
阅读全文
摘要：作用域链本质上就是使用的是哪个变量，全局变量，局部变量，自身的变量。这个在看别人代码的逻辑的时候非常有用，底层是变量的查找机制。 嵌套关系的作用域窜连起来形成了作用域链 在函数被执行，会优先查找当前函数作用域中的变量。 如果当前函数作用域找不到，则会逐级查找父级作用域，知道全局作用域 相同作用域链中
阅读全文
摘要：函数分为具名函数和匿名函数，具名函数需要先声明在进行调用，而匿名函数是完全没有值。 例如：我们设置点击事件中的function就是匿名函数 document.addEventListener('click', function(){ }) 我们可以设置匿名函数立即执行。 好处是一方面可以防止变量污染
阅读全文
摘要：我们在做web页面，由其是后台的页面的时候，需要菜单栏和右侧内容区域分隔开来，例如如下的功能： 就需要使用flex弹性内容的布局。 当我们为父盒子设置为flex后，子元素的float,clear和vertical-align属性将失效 在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列
阅读全文
摘要：1、父组件向子组件传值，通过标签加上":" <user-add-editor :dialogFormVisible.sync="dialogFormVisible"></user-add-editor> 其中dialogFormVisible 就是子组件的值，sync表示子可以修改父组件。 2、父组
阅读全文
摘要：在Vue.js中使用Element UI时，如果需要给组件的属性加上冒号（:），这表示你正在绑定一个动态属性。冒号后跟的是一个JavaScript表达式，而不是一个字符串。 例如，如果你想要绑定一个动态的值到el-input组件的value属性，你应该这样写： <el-input :value="d
阅读全文
摘要：100%和100vh的区别12 在CSS中，height: 100%表示元素的高度将与其父元素的高度相同。但是，要使height: 100%生效，父元素必须具有明确定义的高度，例如固定高度值或相对定位。如果父元素的高度未被明确定义，那么height: 100%将不会生效。 另一方面，heig
阅读全文
摘要：桌面版PC对应网站 Element UI 开发 H5 和多端小程序 NutUI 3.0 京东的组件 MorJS Mor (发音为 /mɔːr/，类似 more) 是饿了么开发的一款基于小程序 DSL 的，可扩展的多端研发框架。使用小程序原生 DSL 构建，使用者只需书写一套（微信或支付宝）小程序，就
阅读全文
摘要：js 中有一个sessionstrage，其意思是当浏览器会话存在的时候会有session数据， 当用户关闭标签页同时清空浏览器session数据的时候会被清除。我们可以在不会发生大的改变，同时经常用到的存储到session strage中。 用法：sessionStrage.setItem('us
阅读全文
摘要：MVVM是vue实现数据驱动视图和双向数据绑定的核心原理。MVVM指的是Model、View、ViewModel，它把每个HTML页面都拆分成了这三个部分，如图所示： 在MVVM概念中： Model表示当前页面渲染时所依赖的数据源。 View表示当前页面所渲染的Dom结构。 ViewModel表示v
阅读全文
