随笔分类 - 前端学习
自己看前端视频的一些基础学习，加油，颜孙达
摘要：YAML是一种人类可读的数据序列化标准，广泛用于配置文件和数据交换。它的设计目标是使文件易于阅读和编写，同时保持足够的表达力以满足大多数应用的需求，YAML文件通常以.yaml或.yml为扩展名。 YAML的特点 简洁性：YAML 使用缩进来表示层次结构，避免了 XML 和 JSON 中常见的大量括
阅读全文
摘要：需求：不同角色的用户显示不同的菜单，且对页面的按钮也有是否对角色开发的权限 服务端返回两个数据 一个是菜单的权限列表，另外一个是拥有的按钮列表数据，如下： 动态加载菜单 /** routerInfo: 动态路由 hasRoutePermission: 用户拥有的路由权限 */ const filte
阅读全文
摘要：官网地址 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
阅读全文
摘要：普通定义ref标签值如下： <el-input ref="name" v-model="xxx" /> 在script中我们通过如下的代码获取到定义的ref标签 const name = ref(); 但是我们如果标签是动态生成的，他的值并不固定，需要通过:ref的方式进行绑定函数的方式，如下： <
阅读全文
摘要：Promise是强大的异步编程工具，它允许我们更好的管理和处理异步操作。这里将探讨Promise中的reject以及如何使用catch来处理异步错误 什么是promise？ promise是一种代表异步操作最终完成或失败的对象。它有三种状态： 1、Pending(进行中):初始状态，既不成功也不失败
阅读全文
摘要：height: 100%; 和 height: 100vh; 是设置元素高度的两种不同方式 height: 100%;： 这个属性会使元素的高度等于其父元素的高度。也就是说，元素的高度将会占据其父元素的百分之百高度。 值为百分比时，实际的高度取决于其父元素的高度。如果父元素没有显式地设置高度，则 h
阅读全文
摘要：// 通过模板路由配置 import { createRouter, createWebHistory } from "vue-router"; // 创建路由器 const routes = [ // 登录路由 { path: "/login", component: () => import("
阅读全文
摘要：属性使用动态值加固定值用 :a="`${变量名}` + '固定值'" 例如： <svg :style="{width,height}"> <!-- 内部需要用use结合使用 --> <use :xlink:href="`${prefix}` + 'mao'" :fill="color"></use>
阅读全文
摘要：在开发环境、测试环境、生产环境需要请求不同的接口，对应不同的数据。 因此，配置环境变量也尤为重要 第一：为项目根目录开发、测试、生成（也可以加入预发布）环境创建.env文件 .env.development .env.production .env.test 第二：配置数据 # 变量必须以 VITE
阅读全文
摘要：插槽（slot）可以实现父与子组件间通信，即想让父组件在指定位置插入一些信息。 插槽分为三种：默认插槽、具名插槽、作用域插槽 默认插槽 子组件代码： <h1>我是子组件默认插槽--父组件中子组件标签中的数据会放入slot中</h1> <!-- 默认插槽 --> <slot></slot> 父组件代码
阅读全文
摘要：vue3提供两种方法，分别为（爷爷提供）provide（提供）和（孙子）inject（注入）。 可以实现隔辈传入数据，且孙子组件可以修改爷爷提供的数据。 即如果子组件再调用子组件，那么父组件可以通过provide 和 inject来实现父孙志坚消息通行。 ①实现父子组件调用子组件， 子组件再调用子组
阅读全文
摘要：ref:给子组件的标签绑定ref属性，子节点把对应的数据暴露出来，可以以此修改子组件的值 $parent:子组件通过固定参数，拿到父组件暴露出去定义的方法或者数据，并操作 ref的用法： ①给子组件标签绑定ref <Son ref="son"></Son> ②在子组件中用defineExpose暴露
阅读全文
摘要：事务总线mitt适用于在任意组件间传递信息。 1、需要安装mitt插件 npm i mitt 2、新建一个emitter.ts文件 //导入mitt import mitt from 'mitt' //创建mitt实例 const emitter = mitt() //暴露mitt实例 export
阅读全文
摘要：自定义事件实现通信的逻辑是给子组件的标签上绑定一个自定义事件。 在子组件中写触发事件，传入实参。 在父组件中定义具体事件方法体逻辑。 例如： <!-- 绑定自定义事件xxx，实现子组件给父组件传递数据 --> <Event2 @xxx="handler3"></Event2> 在子组件中使用defi
阅读全文
摘要：props用于父组件向子组件传递数据。 子组件只能读取该值，但是不能修改 父组件代码： 子组件使用defineProps来接收数据
阅读全文
摘要：pinia是vue2中的vuex,状态管理，可以实现数据共享 1、先安装 npm install pinia 2、在main.ts中进行创建和载入 3、在src下新建store文件夹 定义存的文件 4、在组件中使用 此时控制台会有具体的值。 5、修改数据的三种方式 ①直接修改 countStore.
阅读全文
浙公网安备 33010602011771号