joken-前端工程师

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: :: :: 管理 ::
上一页 1 ··· 5 6 7 8 9 10 11 12 13 下一页

2024年7月23日

摘要: 下载 地址: https://nvm.uihtm.com/ 或者github下载免安装版本,需要自己设置环境变量 https://github.com/nvm-sh/nvm/releases 环境变量设置 创建环境变量名 path 设置环境变量 经过上面的设置,nvm就成为了全局命令;node也成为 阅读全文
posted @ 2024-07-23 22:03 joken1310 阅读(244) 评论(0) 推荐(0)

2024年7月21日

摘要: 快速开始 安装eslint yarn add eslint -D 然后运行初始化eslint npx eslint --init 接着上面命令会自动生成一个新文件eslint.config.js eslint.config.js import globals from "globals"; impo 阅读全文
posted @ 2024-07-21 17:57 joken1310 阅读(565) 评论(0) 推荐(0)

摘要: 安装 yarn add xlsx yarn add file-saver git文档:https://github.com/rockboom/SheetJS-docs-zh-CN npm地址:https://www.npmjs.com/package/xlsx 代码 <template> <div 阅读全文
posted @ 2024-07-21 12:15 joken1310 阅读(51) 评论(0) 推荐(0)

摘要: 案例 import Mock, { Random } from "mockjs"; const resData = Mock.mock({ // key中min-max 代表随机生成5到10条数组数据 'list|5-10': [{ //value @id 可以随机生成id 'id': '@id', 阅读全文
posted @ 2024-07-21 12:10 joken1310 阅读(32) 评论(0) 推荐(0)

摘要: 使用文档 https://github.com/OBKoro1/koro1FileHeader/wiki/安装和快速上手 git 地址 https://github.com/OBKoro1/koro1FileHeader 安装测试 搜索setting.json 用户 输入如下配置 // 头部注释 " 阅读全文
posted @ 2024-07-21 12:03 joken1310 阅读(284) 评论(0) 推荐(0)

2024年7月18日

摘要: 使用方式 父组件 <template> <div class="box"> <div> <!-- setup需要用变量的方式来写入is,如果是options api方式可以用组件字符 --> <!-- myProps 属性可以直接传到动态组件 --> <component :is="childT" 阅读全文
posted @ 2024-07-18 23:22 joken1310 阅读(884) 评论(2) 推荐(1)

摘要: 写法1 export interface Config { arr1: Array<IObject>, obj1?: IObject } const props = defineProps({ title: { type: String, //必须的prop required: true, defa 阅读全文
posted @ 2024-07-18 23:14 joken1310 阅读(201) 评论(0) 推荐(0)

摘要: 概论 watch 监听明确的数据 computed 监听数据并返回计算结果 watchEffect重视监听过程 测试代码 子组件 <template> <div class='box'> <div>props 监听测试</div> computed返回的内容的深度属性:{{ configTwo.ob 阅读全文
posted @ 2024-07-18 23:10 joken1310 阅读(58) 评论(0) 推荐(0)

2024年7月16日

摘要: 代码 <template> <!-- svg使用 --> <div class="box"> <div> <!-- 设置style fill:ref 方式可以直接修改svg颜色样式 --> <svg style="fill: red" xmlns="http://www.w3.org/2000/sv 阅读全文
posted @ 2024-07-16 22:01 joken1310 阅读(111) 评论(0) 推荐(0)

摘要: 使用示例 <style lang="css" scoped> div,span{ --font-size-20:20px; } .color{ color:var(--color-red); font-size:var(--font-size-20); } </style> 另外也可以放在根节点: 阅读全文
posted @ 2024-07-16 21:11 joken1310 阅读(11) 评论(0) 推荐(0)

摘要: 测试代码 <template> <div class="box"> <div><i-ep-edit /></div> <div><i-ep-chat-dot-round /></div> <div><i-ep-close /></div> </div> </template> <script lan 阅读全文
posted @ 2024-07-16 20:50 joken1310 阅读(188) 评论(0) 推荐(0)

2024年7月15日

摘要: iconify https://iconify.design/ Iconify支持100多个图标集,上万种图标可随意使用,你能想到的他都有,Iconify是SVG图标,不是字体图标,所以你也可以结合elementui-plus使用,最后感谢antfu大佬提供的vite插件。 vite.config. 阅读全文
posted @ 2024-07-15 21:02 joken1310 阅读(539) 评论(0) 推荐(0)

2024年7月14日

摘要: 要将 base64 编码的图像数据保存为 PNG 文件到本地,可以借助 JavaScript 和浏览器的 File API。以下是一个简单的步骤和示例代码: 步骤: 解析 Base64 数据:将 Base64 编码的字符串解析为二进制数据。 创建 Blob 对象:使用解析后的二进制数据创建一个 Bl 阅读全文
posted @ 2024-07-14 15:35 joken1310 阅读(3619) 评论(0) 推荐(0)

摘要: SVG(Scalable Vector Graphics)是一种用于描述二维矢量图形的 XML 格式标记语言,它可以被浏览器直接渲染。SVG 图形具有良好的可伸缩性和清晰度,非常适合用于图标、图表、地图等应用场景。以下是编写 SVG 的基本语法和示例: 1. SVG 基本结构 SVG 图形可以直接写 阅读全文
posted @ 2024-07-14 15:26 joken1310 阅读(487) 评论(0) 推荐(0)

摘要: CSS 自定义属性(Custom Properties),也称为 CSS 变量,是 CSS 中一种能够保存和复用值的机制。它们与常规的 CSS 属性不同,因为它们可以在整个文档中定义一次,然后在需要的任何地方使用。 定义和语法 定义一个自定义属性使用两个连字符(--)开头,后面跟着属性名,类似于下面 阅读全文
posted @ 2024-07-14 15:21 joken1310 阅读(141) 评论(0) 推荐(0)

摘要: 在 ES5(ECMAScript 5)中,JavaScript 函数有几种继承方式,主要是通过原型链实现的。以下是常见的几种继承方式: 原型链继承(Prototype Inheritance): 原理:通过将子类的原型对象设置为父类的实例来实现继承。 特点:可以继承父类的实例方法和属性,但无法实现多 阅读全文
posted @ 2024-07-14 15:16 joken1310 阅读(33) 评论(0) 推荐(0)

摘要: js super作用 在 JavaScript 中,super 关键字有两个主要用途: 在子类的构造函数中调用父类的构造函数: 使用 super() 来调用父类的构造函数,并继承父类的属性。 在子类的方法中调用父类的方法: 使用 super.methodName() 来调用父类的方法。 示例解释 使 阅读全文
posted @ 2024-07-14 15:13 joken1310 阅读(309) 评论(0) 推荐(0)

摘要: 在 TypeScript 中,一个类(class)可以拥有以下几种类型的属性: 实例属性(Instance properties): 这些属性是在类的构造函数中使用 this 关键字定义的。 每个实例都有自己独立的实例属性。 原型属性(Prototype properties): 这些属性是定义在类 阅读全文
posted @ 2024-07-14 15:11 joken1310 阅读(226) 评论(0) 推荐(0)

摘要: 在 JavaScript 中,函数对象可以拥有多种类型的属性。主要可以分为以下几类: 实例属性(Instance properties): 这些属性是在通过函数构造函数创建实例时绑定到实例上的属性。 原型属性(Prototype properties): 这些属性是绑定到函数对象的原型上的属性。实例 阅读全文
posted @ 2024-07-14 15:08 joken1310 阅读(38) 评论(0) 推荐(0)

摘要: 在 TypeScript(以及 JavaScript)中,bigint 和 number 是两种不同的数值类型,它们有一些显著的区别和特性。 区别和特性 表示范围: number:表示标准的双精度 64 位浮点数,可以表示的范围是从 -Number.MAX_SAFE_INTEGER 到 Number 阅读全文
posted @ 2024-07-14 13:48 joken1310 阅读(740) 评论(0) 推荐(0)

摘要: Tree shaking 是一种优化 JavaScript 或 TypeScript 代码打包输出的技术,其主要目的是移除代码中未使用的部分(即死代码),从而减小最终生成的文件大小,提升应用程序的性能和加载速度。 Tree Shaking 的工作原理包括以下几个关键步骤: 静态分析: Tree sh 阅读全文
posted @ 2024-07-14 13:46 joken1310 阅读(489) 评论(0) 推荐(0)

摘要: 在 JavaScript 中实现归并排序可以通过递归的方式完成。归并排序使用了“分而治之”的策略,将数组递归地分成两个子数组,分别进行排序,然后将它们合并成一个有序数组。以下是一个简单的归并排序实现: function mergeSort(arr) { // 如果数组只有一个元素或为空,则直接返回数 阅读全文
posted @ 2024-07-14 10:02 joken1310 阅读(139) 评论(0) 推荐(0)

摘要: 在JavaScript中实现快速排序可以通过递归方式来完成。下面是一个示例代码: function quickSort(arr) { // 如果数组为空或只有一个元素,则无需排序 if (arr.length <= 1) { return arr; } // 选择基准元素(这里选择中间元素) con 阅读全文
posted @ 2024-07-14 10:00 joken1310 阅读(195) 评论(0) 推荐(0)

2024年7月13日

摘要: 冒泡排序是一种简单的排序算法。它重复地遍历待排序的列表,比较相邻的元素并交换位置,如果它们的顺序错误。这个过程会重复进行,直到整个列表排序完成。下面是用 JavaScript 实现的冒泡排序算法: function bubbleSort(arr) { let n = arr.length; let 阅读全文
posted @ 2024-07-13 20:52 joken1310 阅读(210) 评论(0) 推荐(0)

摘要: 二分算法搜索数字 二分搜索算法是一种在有序数组中查找目标值的高效方法。其时间复杂度为 (O(\log n))。下面是用 JavaScript 实现的二分搜索算法: function binarySearch(arr, target) { let left = 0; let right = arr.l 阅读全文
posted @ 2024-07-13 20:50 joken1310 阅读(123) 评论(0) 推荐(0)

摘要: require.context 是 Webpack 提供的一个方法,用于创建自己的(上下文)模块。这些模块可以动态导入符合特定条件的文件。在使用 require.context 时,你需要提供三个参数: directory: 要搜索的文件夹路径(字符串)。 useSubdirectories: 是否 阅读全文
posted @ 2024-07-13 17:23 joken1310 阅读(267) 评论(0) 推荐(0)

摘要: 当然,以下是将前面两个步骤汇总到一起的完整实现方案: 1. 定义指令 首先,在 src/directives 文件夹中创建你的自定义指令文件。例如,v-focus.ts 和 v-color.ts: v-focus.ts: import { Directive } from 'vue'; const 阅读全文
posted @ 2024-07-13 17:22 joken1310 阅读(344) 评论(0) 推荐(0)

摘要: 树形数组转一维数组 要将一棵树结构(包含 children 属性)拍平为一个一维数组,可以使用递归或迭代的方法。下面是两种常见的实现方式: 1. 使用递归 function flattenTree(tree) { let result = []; tree.forEach(node => { res 阅读全文
posted @ 2024-07-13 16:27 joken1310 阅读(384) 评论(0) 推荐(0)

摘要: unplugin-vue-components 简介 unplugin-vue-components 是一个用于自动导入 Vue 组件的插件,能够在 Vue 3 项目中简化组件的使用,无需手动导入每个组件。它支持按需加载,提高开发效率。 安装 使用 npm 或 yarn 安装插件: npm inst 阅读全文
posted @ 2024-07-13 16:22 joken1310 阅读(1063) 评论(0) 推荐(0)

摘要: unplugin-auto-import 简介 unplugin-auto-import 是一个用于自动导入常用函数和变量的 Vite 和 Webpack 插件。它可以帮助开发者减少手动导入的麻烦,提高开发效率。 安装 使用 npm 或 yarn 安装: npm install -D unplugi 阅读全文
posted @ 2024-07-13 16:21 joken1310 阅读(770) 评论(0) 推荐(0)

摘要: 当然可以!下面是使用 TypeScript 语法的动态表单弹出组件示例。 1. 创建动态表单弹出组件(TypeScript) <template> <el-dialog :visible.sync="visible" title="表单" @close="handleClose"> <el-form 阅读全文
posted @ 2024-07-13 15:46 joken1310 阅读(558) 评论(0) 推荐(0)

2024年7月10日

摘要: 概论 ts中Array Object 既可以是数据值,也可以是类型 在 TypeScript 中,确实有些语法上的重叠,使得 Array 和 Object 可以同时表示数据值和类型。让我们来看一些具体的情况: 数组 (Array) 1. 数据值: const arr1: number[] = [1, 阅读全文
posted @ 2024-07-10 21:50 joken1310 阅读(191) 评论(0) 推荐(0)

摘要: 代码 global.d.ts global中声明全局类型 declare global { /** * 响应数据 */ interface ResponseData<T = any> { code: string; data: T; msg: string; } } //加入export 就可以使g 阅读全文
posted @ 2024-07-10 21:38 joken1310 阅读(792) 评论(0) 推荐(0)

摘要: 概论 null 就是一个变量为空,未赋值,比如var abc=null; undefined 就是未定义,就是属性还未声明,比如 var abc={}; abc.d 就是undefind未定义,或者变量声明了,确还未赋值过。 一般一个变量声明了,但是空值,用null比较适合,比如 var abc=n 阅读全文
posted @ 2024-07-10 21:17 joken1310 阅读(45) 评论(0) 推荐(0)

摘要: 参考代码 <el-form ref="ruleFormRef" :hide-required-asterisk="true" :model="broker" :rules="rules"> <div v-for="(item, index) in broker.education" :key="in 阅读全文
posted @ 2024-07-10 21:06 joken1310 阅读(680) 评论(0) 推荐(0)

摘要: 原因 原因是element plus form 组件的ref名字和表单reactive变量数据同名了 参考文章 https://blog.51cto.com/u_15127677/4350477 阅读全文
posted @ 2024-07-10 21:01 joken1310 阅读(133) 评论(0) 推荐(0)

摘要: 代码 class myPromise { constructor(syncFn) { this.callbacks = []; //resolve 的目的是调用下一个then中的函数 const resolve = (value) => { const nextThenFn = this.callb 阅读全文
posted @ 2024-07-10 00:10 joken1310 阅读(13) 评论(0) 推荐(0)

2024年7月9日

摘要: 报错方式 对象可能未定义的处理方式优化 使用 Optional Chaining: 这是处理对象属性可能为 undefined 的推荐方式,特别是在 TypeScript 中: let targetId = arrD.find((i) => i.name "tom")?.id; console.lo 阅读全文
posted @ 2024-07-09 00:11 joken1310 阅读(477) 评论(0) 推荐(0)

2024年7月8日

摘要: 代码 <template> <div class="box">childB</div> </template> <script lang="ts" setup> import { reactive, watch, ref } from "vue"; const data1 = reactive({ 阅读全文
posted @ 2024-07-08 21:43 joken1310 阅读(86) 评论(0) 推荐(0)

摘要: 概论 defineEmits 用来定义子组件暴漏给父组件的自定义事件 测试代码 子组件 <template> <div class="box">child</div> </template> <script lang="ts" setup> interface Emit { (e: "emitfn1 阅读全文
posted @ 2024-07-08 21:18 joken1310 阅读(215) 评论(0) 推荐(0)

上一页 1 ··· 5 6 7 8 9 10 11 12 13 下一页