- 博客(123)
- 收藏
- 关注
RSS订阅原创 #JavaScript 宏任务与微任务详解
宏任务是 JavaScript 中的最外层任务，它包括了浏览器中几乎所有的常见操作，如setTimeout 和 setInterval 中的回调函数DOM 渲染网络请求的回调（如 AJAX）用户输入（键盘事件、鼠标事件等）每当 JavaScript 引擎执行一个宏任务时，它会按照以下步骤进行从宏任务队列中取出第一个任务。执行这个任务，直到它完成。然后开始下一个宏任务。
2024-11-06 22:00:00
1007
原创 Promise 简单介绍及深入挖掘
在 JavaScript 中，Promise 是用于处理异步操作的一种方式。它代表了一个 可能 在将来某个时间点完成或失败的操作的结果。Promise 使得我们能够优雅地处理异步代码，避免了回调地狱（Callback Hell）的问题，提升了代码的可读性和可维护性。Promise 的基本状态初始状态，表示异步操作还未完成。表示异步操作已成功完成表示异步操作失败。
2024-11-06 21:15:00
724
原创 JavaScript 变量作用域与函数调用机制：var 示例详解
JavaScript 中的函数作用域遵循词法作用域规则，变量的查找顺序是从当前函数的作用域开始，依次向外查找，直到全局作用域为止。即使在一个函数内部声明了与全局变量同名的局部变量，这个局部变量仅对函数内部有效。函数外部的同名变量（如果有）不会被覆盖。使用 var 声明的变量在其作用域内有效，如果函数内有同名变量，局部变量会覆盖函数内部的代码，但不会影响外部作用域中的变量。
2024-11-05 22:30:00
813
原创 JavaScript 中 this 指向问题分析与解决
this.age++ 在此时尝试访问 window.age，如果 age 在全局对象上未定义，它会被初始化为 undefined,然后，undefined++ 结果是 NaN，因为 undefined 不能进行加法操作，JavaScript 会将其转为 NaN。注意，growup() 是一个普通函数，而不是作为对象方法调用的，因此它的 this 指向是一个重要的焦点。我们调用了 obj 对象的 growup 方法，this 在方法调用时指向该对象 obj this 指向 obj。使用 bind() 方法。
2024-11-05 21:30:00
918
原创 使用纯CSS和JavaScript来实现一个转盘抽奖效果（设置机率）
使用纯CSS和JavaScript来实现一个转盘抽奖效果。我们可以设定每个奖项的概率，并使用加权随机算法来决定最终的中奖奖项。
2024-10-10 19:45:00
763
原创 vue3 学习笔记14 -- 自定义指令
当我们在项目中需要对 DOM 进行直接操作或者监听事件时，自定义指令（Custom Directives）是一个强大的工具。它允许我们在 Vue 组件中声明式地绑定指令，从而实现各种交互行为和视觉效果。本文将介绍如何创建和使用自定义指令在 Vue 中，指令是带有 v- 前缀的特殊属性，用于对 DOM 进行直接操作或者添加特定行为。自定义指令允许我们封装对 DOM 的操作逻辑，并在多个组件中重复使用，从而提高代码的可维护性和复用性。在项目中创建一个文件夹来存放自定义指令，比如 directives。
2024-07-18 07:15:00
379
原创 vue3 学习笔记13 -- 生命周期和防抖节流
onMounted(): 在组件挂载后调用，此时组件已经被添加到页面中，可以执行 DOM 操作或异步请求等操作。onBeforeMount(): 在组件挂载之前调用，此时虚拟 DOM 已经准备好，但尚未渲染到页面上。onBeforeUpdate(): 在组件更新之前调用，可以用于准备更新前的数据状态。onUpdated(): 在组件更新完成后调用，可以执行一些 DOM 操作。onUnmounted(): 在组件卸载后调用，执行一些清理工作。节流函数用于减少函数的调用频率，确保在一定时间内只执行一次。
2024-07-17 06:00:00
299
原创 vue3 学习笔记12 -- 插槽的使用
插槽（Slots）是一种让父组件能够向子组件传递标记的方法。通过定义插槽，子组件可以预留出可由父组件控制的区域，这样父组件就可以向这些区域填充自己的内容。具名插槽允许父组件在子组件中定义多个插槽位置，使得父组件可以将不同的内容分发到不同的插槽中。这种方式特别适合需要布局或者结构化控制的场景。默认插槽是最基本的插槽形式，允许父组件在子组件中插入任意内容，而子组件则可以通过 来渲染这些内容。子组件向父组件传递数据的一种形式，子组件在具名标签或者匿名标签上绑定数据，父组件在标签上获取数据。
2024-07-16 21:00:00
725
原创 vue3 学习笔记11 -- 模板语法和指令
下述代码中，message的内容将在页面上显示一次，5秒钟后改变，但页面上的内容不会更新，仍然显示为"Hello, once!这是因为v-once已经在第一次渲染时将内容"Hello, once!"和数据绑定一起存储起来，后续即使数据变化，也不会更新DOM。{{ this will not be compiled }} 会被当作静态文本显示在页面上，而不是由 Vue 进行处理。以 v- 开头的特殊属性，如 v-if, v-for, v-bind, v-on。
2024-07-16 19:30:00
251
1原创 vue3 学习笔记09 -- 自适应实现(postcss-pxtorem)
postcss-pxtorem 是一个 PostCSS 插件，用于将 CSS 中的像素单位（px）转换为 rem 单位，从而实现响应式布局。主要用途是在移动端开发中，通过设置根元素的字体大小，使得页面元素的尺寸随着根元素字体大小的变化而变化，从而实现不同屏幕尺寸下的自适应布局。
2024-07-15 21:45:00
672
原创 vue3 学习笔记08 -- computed 和 watch
computed 是 Vue 3 中用于创建计算属性的重要 API，它能够根据其它响应式数据动态计算出一个新的值，并确保在依赖数据变化时自动更新。这样可以确保在性能上的优化，避免不必要的计算。watch终止监听，只需要将watch赋值给一个变量，当达到条件调用watch赋值的那个变量就可以终止监听了。squaredCount 是一个计算属性，它依赖于 count 的值，并且会在 count 变化时自动更新。在 Vue 组件中，可以将计算属性直接用于模板中，而不需要额外的 .value 访问方式。
2024-07-12 23:15:00
895
原创 vue3 学习笔记07 -- 定义响应式数据
定义响应式数据主要通过 Vue 3 提供的 reactive、ref 和 computed 这几个 API 来实现ref：用于定义基本类型的响应式数据,如数字、字符串、布尔值等。它返回一个包含响应式数据的对象，通过 .value 访问或修改数据// 读取响应式数据// 更改响应式数据在模板中，直接使用 count 而不需要使用 .value 来访问数据。reactive:用于定义一个对象，并使该对象内部所有属性变成响应式的。
2024-07-12 20:00:00
524
原创 vue3 学习笔记06 -- pinia的简单使用
使用 Pinia 的步骤可以分为安装和配置 Pinia、创建和封装 store 以及在组件中使用 store。
2024-07-12 19:30:00
916
原创 vue3 学习笔记04 -- axios的使用及封装
创建一个 Axios 实例并封装成一个可复用的模块，这样可以在整个应用中轻松地进行 API 请求管理。
2024-07-11 20:00:00
1178
原创 vue3 学习笔记03 -- scss的使用
在src/styles下新建通用scss文件。项目中结合 SCSS 可以很方便地管理样式。在main.ts中引入。
2024-07-11 19:30:00
1569
原创 vue3 学习笔记02 -- 配置路由router+导航守卫
如果已登录存在token，则直接跳转到指定页面，否则进入登录页。在main.js中引入挂载路由。
2024-07-10 22:45:00
358
原创 vue3 学习笔记01 -- 搭建项目及基础配置
确保你已经安装了Node.js（建议使用最新的LTS版本）如果想使用ip访问则需配置vite.config.ts文件。
2024-07-10 15:57:36
904
原创 vue 渲染表格两个表头，横向显示时间，纵向显示参数
parameters 是一个参数数组，包含了表格纵向的参数列表，而 times 是一个时间数组，包含了表格横向的时间列表。这个方法的主要作用是根据这两个数组生成一个符合格式要求的表格数据数组。它使用 Math.random() 函数生成一个 0 到 1 之间的随机小数，然后将其乘以 100 并取整，得到一个 0 到 100 之间的随机整数作为参数值，并返回该值。它用于显示一个包含时间和参数的表格，其中时间横向显示，参数纵向显示。vue 渲染表格两个表头，横向显示时间，纵向显示参数。
2024-04-11 20:00:00
1291
原创 设置el-cascader级联组件父子不关联，解决只能点击单选框才能选中，点击label无反应
设置el-cascader级联组件父子不关联，解决只能点击单选框才能选中，点击label无反应。
2024-02-07 20:15:00
736
原创 js 数字转换为带有千分位标注的格式的几种方法的记录
在非单词边界处（即数字之间）匹配每个连续的三个数字组合，但排除最末尾的数字组合后面的位置”。例如，在数字 1234567 中，正则表达式会匹配 234 和 567，但不会匹配 1。toLocaleString() 是 JavaScript 内置的函数，用于将数字格式化为本地化的字符串表示形式。然后，它使用循环来遍历整数部分的每个数字，每隔三个数字插入一个逗号。\d)) 来匹配每个三位数字组合前面的位置，并在这些位置插入逗号。使用递归来不断地截取字符串的后三位数字组合，并在它们之前插入逗号。
2024-01-30 22:15:00
819
原创 js padEnd方法介绍笔记
padEnd() 方法常用于需要将字符串的长度填充到指定长度时。例如，在生成固定长度的字符串时，或者在对齐表格中的文本时，都可以使用 padEnd() 方法。padEnd() 方法不会改变原始字符串，而是返回一个新的填充后的字符串。如果目标长度小于或等于原始字符串的长度，则返回原始字符串本身。padEnd() 是 JavaScript 字符串的方法之一，它用于在当前字符串的末尾添加指定数量的字符，直到字符串达到指定的长度。
2024-01-30 22:15:00
772
原创 vue 使用mock模拟数据
vue 使用mock模拟数据在根目录下，新建一个mock文件，且创建如下文件utils.jsindex.js${${${在 Vue 中使用 mock 进行接口模拟数据时，接口路径中的 .* 是一个正则表达式的匹配规则，表示该路径可以匹配任意字符（包括字母、数字、特殊字符等）。通常情况下，.* 用于模拟具有动态参数的接口路径。例如，假设你的接口路径为 /api/user/:id，其中的 :id 表示一个动态参数，可以是任意字符。
2024-01-15 20:00:00
883
原创 vue面包屑导航与右键菜单功能实现
实现一个面包屑导航组件。面包屑导航用于显示当前页面的路径，并提供快速跳转到上级页面的功能,且可以通过右击菜单的命令实现关闭其他、关闭左侧和关闭右侧的功能。
2024-01-09 20:00:00
899
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人