- 博客(106)
- 资源 (6)
- 收藏
- 关注
RSS订阅
原创 js面试题 高频 含答案
1. 讲一下 var, let, const 的区别?var 声明的变量有变量提升的特性，而 let、const 没有var 声明的变量会挂载到 windows 对象上，所以使用 var 声明的是全局变量，而 let 和 const 声明的变量是局部变量, 块级作用域外不能访问同一作用域下 let 和 const 不能重复声明同名变量，而var可以const声明的是常量，必须赋初值，一旦声明不能再次赋值修改，如果声明的是复合类型数据，可以修改其属性2. js中的基础数据类型有哪
2021-06-30 22:14:29
15638
33
原创 css实现多个loading动画效果
在开发中，为了提高用户体验，通常在加载数据的时候会给一个。根据序号查看代码，尾部有整合代码。提示，这里分享几个简单的。
2022-12-13 15:08:10
2594
1
原创 封装vue插件并发布到npm详细步骤
平常使用Vue开发时，一个项目中多个地方需要用到的相同组件通常我们会封装为一个公共组件，但是如果项目不同我们也需要这个组件，那就需要复制一份公共组件代码到新项目，一个还好，如果是多个组件，这样就稍显麻烦了。所以我们可以将封装好的组件打包发布至npm，就可以像element ui这些ui组件库一样通过npm命令下载使用了。
2022-11-20 18:27:12
2417
8
原创 TypeError: Reduce of empty array with no initial value（减少没有初始值的空数组）
方法加上第二个参数, 也就是累加的初始值。减少没有初始值的空数组。
2022-11-16 20:11:29
711
原创 vue动态换肤(自定义主题)
有时候一个项目的主题并不能满足所有人的审美, 所以这个时候就需要换肤功能登场了。 下面是一个换肤`demo`, 思路很简单，定义一个全局`css变量`，然后在页面根元素获取变量并动态修改这个变量值即可完成。
2022-10-20 16:21:31
1663
原创 CSS动画-Animation
动画是css3中具有颠覆性的特征之ー,可通过设置多个节点来精确控制一个或一组动画常用来实现复杂的动画效果。相比较过渡，动画可以实现更多变化，更多控制的效果。创建动画的原理是，将一套 样式逐渐变化为另一套样式。在动画过程中我们能够多次改变这套 样式。以百分比来规定改变发生的时间，或者通过关键词 和 ，等价于 和 。就是需要绑定的的名称这就是定义了一个名称为的动画，被元素调用 规定动画完成一个周期所花费的时间意思是指定元素的时间向右移动 规定动画的速率曲线，也就是动画执行过程的
2022-10-16 15:09:48
5332
原创 webpack快速入门-处理css方面优化
样式需要加不同的浏览器前缀才能兼容对应的浏览器，因此在项目打包编译的时候，需要对。文件，配置css压缩前和配置css压缩后有很明显的变化。这样对于网站来说，可能会出现闪屏现象，用户体验不好。属性进行统一的兼容性处理。文件加载时，会创建一个。文件不处理会被打包到。我们应该要使用单独的。标签加载提高用户体验。
2022-09-05 23:00:00
344
原创 webpack快速入门-开发服务器(webpack-dev-server)
在开发阶段，遇到的问题是打包、运行、调试过程过于繁琐，回顾一下我们的操作流程：编写代码控制台运行命令完成打包打开页面查看效果并且，我们往往希望把最终生成的代码和页面部署到服务器上，来模拟真实环境为了解决这些问题，webpack它既不是plugin也不是loader接下来看看它怎么用。
2022-09-05 18:30:00
489
原创 webpack快速入门-处理html资源
dist目录属于构建目录，是我们源码的输出目录，我们希望里面的一切都是可以自动化的，包括index.html文件也能自动创建，js文件也能自动引入到页面所以我们需要用到插件。
2022-09-05 12:00:00
173
原创 webpack快速入门-处理js资源
webpack默认处理了js资源, 为什么还要处理js资源这是因为浏览器无法识别es6语法，webpack默认只对js进行打包，不会将es6语法转换为es5语法供浏览器使用，所以需要我们自己配置，使es6语法转换为浏览器能识别的es5语法。
2022-09-04 13:00:00
168
原创 webpack快速入门-处理图片资源
过去在Webpack4时，处理图片资源通过和url-loader进行处理现在Webpack5已经将两个Loader功能内置到Webpack里了，只需要简单配置即可处理图片资源。
2022-09-04 12:00:00
201
原创 webpack5入门教程
Webpack本身功能比较少，只能处理js资源，一旦遇到其他资源就会报错所以我们学习Webpack，就是主要学习如何处理其他资源Webpack都通过文件进行配置，来增强Webpack的功能负责将 Css 文件编译成 Webpack 能识别的模块会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容, 样式就会以 Style 标签的形式在页面上生效负责将 Less 文件编译成 Css 文件负责将 Sass 文件编译成 css 文件。
2022-09-03 17:43:16
985
原创 webpack快速入门-处理样式资源
负责将 Css 文件编译成 Webpack 能识别的模块会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容, 样式就会以 Style 标签的形式在页面上生效负责将 Less 文件编译成 Css 文件负责将 Sass 文件编译成 css 文件sass-loader 依赖 node-sass 进行编译。
2022-09-03 17:15:55
263
原创 webpack快速入门-核心概念
也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用。应该将打包好的文件输出到哪个目录，以及文件命名等, 默认为。多数插件可以通过选项(option)自定义。插件功能极其强大，可以用来处理各种各样的任务。能够处理的有效模块, 然后就可以利用。应该从哪个文件开始打包, 默认为。功能，打包优化、压缩代码体积等。可以将所有类型的文件转换为。可以去处理那些非js的文件。plugins 用于扩展。想要使用一个插件，只需要。操作符来创建它的一个实例。的打包能力正常进行打包。
2022-09-03 17:10:52
195
原创 webpack快速入门-基本使用
Webpack本身功能比较少，只能处理js资源，一旦遇到其他资源就会报错所以我们学习Webpack，就是主要学习如何处理其他资源查看本系列文章合集click me下载本系列文章源码click me。
2022-09-03 17:08:55
281
原创 快速上手 Grid 网格布局
布局即网格布局，是一种新的CSS布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。有时单元格的大小是固定的，但是容器的大小不确定，想响应式的排满容器，就可以用auto-fill自动填充。布局是二维布局，将容器划分成了“行”和“列”，产生了一个个的网格，可以将网格元素放在行和列相关的位置上，从而达到了布局的目的。比如设置一个3X3的网格，但却有10个项目，所以会多出一个，这时候就可以用这属性设置多出的这一个项目。设置每一列的宽度，可以是具体的值，也可以是百分比。....
2022-07-16 15:16:46
1948
4
原创 TS快速入门-泛型
当我们定义一个变量不确定类型的时候有两种解决方式：使用any使用定义时存在的问题：虽然知道传入值的类型但是无法获取函数返回值的类型；另外也失去了ts类型保护的优势使用泛型泛型指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定具体类型的一种特性。定义一个函数，传入两个参数，第一个参数是任何类型的数据，第二个参数是数量函数的作用是根据数量产生对应个数的数据，存放在一个数组中使用方式类似于函数传参，传什么数据类型，就表示什么数据类型，也可以换成任意合法字符串。一个函数也可以定义多个泛型
2022-07-06 15:19:23
2053
原创 TS快速入门-函数
在TS里，虽然已经支持类，命名空间和模块，但函数仍然是主要的定义行为的地方TS中的函数大部分和JS相同,不同之处在于ts会给函数返回值和参数加上类型声明在TS中，函数仍然是最基本、最重要的概念之一函数类型的定义包括对参数和返回值的类型定义如果在这里省略参数的类型， 会默认这个参数是 类型；如果省略返回值的类型要是函数无返回值，那么 会默认函数返回值是 类型；要是函数有返回值，那么 会根据定义的逻辑推断出返回类型。3. interface定义函数类型使用接口可以清晰地定义函数类型函数参数定
2022-07-04 22:18:31
4173
原创 vue3快速入门-Tree shaking
是一种通过清除多余代码方式来优化项目打包体积的技术, 也就是找出使用的代码。 是基于ES6模板语法 、，主要是借助模块的静态编译思想，在编译时就能确定模块的依赖关系，以及输入和输出的变量在 中，我们使用全局 API (如：) 是不需要我们手动去导入的。如下：也就是说，Vue全局API不是通过模块系统导入的，结合介绍，就可以知道在中，就算我们的代码没有使用到全局API，在项目打包的时候，这些全局API相关的依然会被一同打包进来，这样就导致了项目存在太多的无用代码。所以，引入了特性，对全局API进行分块，
2022-07-02 14:49:59
1071
原创 vue3快速入门-自定义hook
什么是自定义hook- 是封装的可复用的功能函数- 自定义hook类似于vue2中的`mixin`技术- 可以使用vue3的`composition API`
2022-06-25 16:37:30
520
原创 vue3快速入门-watch与watchEffect
侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。 默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数。侦听源，这个参数可以为以下几种：侦听源发生变化时调用的回调函数, 这个回调函数接收三个参数：、以及一个用于注册副作用清理的回调函数。该回调函数会在副作用下一次重新执行前调用，可以用来清除无效的副作用，例如等待中的异步请求。当侦听多个来源时，回调函数接受两个数组，分别对应侦听源数组中的新值和旧值。这个可选参数是一个对象，支持以下选项：立即执行传入的一个函数，同时响应式追踪其依赖，并
2022-06-24 15:07:04
373
原创 vue3快速入门-computed计算属性
1. 简化代码，直接计算得出想要使用的数据2. 计算属性可以依赖多个数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。3. 计算属性相比methods方法会进行缓存，如果多次使用时，计算属性只会调用一次；而方法会使用一次则调用一次，因此计算属性相对而言性能更好。4. 接收计算属性结果的变量可以直接在HTML模板中通过插值语法使用......
2022-06-22 16:06:39
568
1
原创 vue3快速入门-Suspense(异步组件处理)
允许我们的应用在等待时渲染一些前置内容，提高用户体验加载异步组件，在异步组件加载完成成并完全渲染之前 会先显示 插槽的内容 其实是插件 的简写， 不给，则为默认插槽 在路由配置文件按需引入vue3定义异步组件需要通过 来进行显示的定义示例踩坑版父组件子组件踩雷：默认情况下，我们使用 defineAsyncComponent 定义的所有组件都是可挂起的。这意味着，如果组件的父类中存在 Suspense，它将被视为该 Suspense 的异步依赖项。我们的组件加载、错误、延迟
2022-06-18 17:39:38
678
原创 vue3快速入门-Fragment(片段)
组件的模板结构中出现多个标签时，需要使用根标签进行包裹。 组件的模板结构中出现多个标签时，可以不用根标签。这是因为vue3会将多个标签包含在一个Fragment虚拟元素中好处: 减少标签层级, 减小内存占用...
2022-06-17 22:22:28
453
原创 vue3快速入门-Teleport(瞬移组件)
是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术。如果我们嵌套在 Vue app 内的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难。使用 就可以方便的解决组件间 css 层级问题我们将模态内容包装在 teleport 组件中，还需要指定一个 属性，为该属性分配一个查询选择器，以标识目标元素。子组件-teleportto属性为bodyto属性为#d1:::......
2022-06-17 16:11:26
2259
原创 Vue3快速入门-toRaw 与 markRaw
toRaw: 将一个响应式对象转为普通对象markRaw: 标记一个对象，让它永远不会转为响应式对象，返回值是这个对象本身可以看到第二个log 已经转换为了普通对象，也就是说，它就已经具有响应性了。第三个log 使用 reactive 依旧没把他转换为响应式对象，因为它已经被标记为不可响应对象。...
2022-06-17 14:00:00
322
1
原创 Vue3快速入门-shallowRef 与 shallowReactive
shallowRef 类似 ref，不同的是， shallowRef 只处理基本类型的响应式，不处理对象类型的响应式。shallowReactive 类似 reactive，不同的是， shallowReactive 只处理对象最外层属性的响应式。也就是浅响应式
2022-06-17 12:00:00
397
原创 Vue3快速入门-readonly 与 shallowReadonly
readonly- 深度只读数据- 获取一个对象响应式、普通对象或 ref对象 并返回它们的 **只读代理对象**。- 访问任何层级属性都是只读的，不能修改。
2022-06-17 10:00:00
187
原创 Vue3快速入门-toRef
作用： 为原响应式对象上的某个属性创建一个 ref 对象, 二者内部操作的是同一个数据值, 更新时二者是同步的语法： 应用: 使用父组件传递的props数据时，要引用props的某个属性且要保持响应式连接时就很有用。toRefFather.vuetoRefChild.vue初始化：更新后：......
2022-06-17 09:00:00
218
原创 Vue3快速入门-toRefs
reactive响应式对象数据如果通过 es6的三点(…)运算符解构就会消除响应性toRefs 这个方法可以把 reactive 响应式对象，转化为 普通对象，且这个普通对象的每个属性都是 Ref 对象，这样的话保证了 reactive 的每个属性还是响应式的，我们还可以把每个属性进行分解使用，这样在组件就不用 可以直接使用属性了也就是解构响应式对象数据而不丢失响应性可以看到name和age属性都是Ref对象，这样我们就可以直接在模板使用了...
2022-06-16 21:04:14
183
原创 Vue3快速入门-setup
setup 是 Composition API 的入口，setup 的存在就是为了让我们能够使用composition api。所有的 函数都在 setup 中使用, 只在初始化时执行一次。执行时间在 beforeCreate 之前，即组件创建之前; 这就意味着在执行 setup 时尚未创建组件实例，因此在 setup 选项中没有 this。在模版中需要使用的数据和函数，需要在 setup 返回 setup(props, context) / setup(props, {attrs, slots, emi
2022-06-16 20:56:49
2048
原创 node版本升级后vue项目启动错误(node-sass sass-loader)
在升级完node版本后启动项目发现报错，这是由于版本兼容导致的，关键报错如下：以前的版本信息：以前我的node版本为：又去看了下与的版本对应表可以看到前面是没问题的，但是我现在版本升级为了：所以就必须要的版本才行还得去看与的对应版本，把也换为对应的版本我这里需要的版本:版本更换完成，问题解决。...
2022-06-15 22:28:12
4677
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人