随笔分类 - 前端知识分享
专注前端开发技术分享，助力初学者更好成长
摘要：问题描述： 使用 reactive 包装数组响应式失效。 或： reactive 使用时响应式失效。我们通过 reactive 定义一个响应式数组，网络请求返回的数据，赋值给数组之后，页面上的数据并没有更新。 具体的代码： const arr = reactive([]); const load =
阅读全文
摘要：为什么推荐使用 hash 模式？ 创建项目时，vue-router 默认使用 hash 模式，设置模式的时候到底该使用hash还是history模式呢？ 先了解它们的实现原理，搞清楚之间的区别，就知道什么时候该选择什么模式了。 一、实现原理 hash 原理 hash 是通过监听浏览器 onhashc
阅读全文
摘要：
高阶函数是什么呢？ 高阶函数英文名叫：Higher Order function ，一个函数可以接收一个或多个函数作为输入，或者输出一个函数，至少满足上述条件之一的函数，叫做高阶函数。 前言 本篇内容的知识点比较多，讲得不够细致，不熟悉的可翻阅前几篇文章，分别对每个知识点都有一篇特别详细的文章。建议
阅读全文
高阶函数是什么呢？ 高阶函数英文名叫：Higher Order function ，一个函数可以接收一个或多个函数作为输入，或者输出一个函数，至少满足上述条件之一的函数，叫做高阶函数。 前言 本篇内容的知识点比较多，讲得不够细致，不熟悉的可翻阅前几篇文章，分别对每个知识点都有一篇特别详细的文章。建议
阅读全文
摘要：
刚开始使用 script setup 语法糖的时候，编辑器会提示这是一个实验属性，要使用的话，需要固定 vue 版本。 在 6 月底，该提案被正式定稿，在 v3.1.3 的版本上，继续使用但仍会有实验性提案的提示，在 V3.2 中，才会去除提示并移除一些废弃的 API。 script setup 是
阅读全文
刚开始使用 script setup 语法糖的时候，编辑器会提示这是一个实验属性，要使用的话，需要固定 vue 版本。 在 6 月底，该提案被正式定稿，在 v3.1.3 的版本上，继续使用但仍会有实验性提案的提示，在 V3.2 中，才会去除提示并移除一些废弃的 API。 script setup 是
阅读全文
摘要：
在父子组件传递数据时，通常使用的是 props 和 emit，父传子时，使用的是 props，如果是父组件传孙组件时，就需要先传给子组件，子组件再传给孙组件，如果多个子组件或多个孙组件使用时，就需要传很多次，会很麻烦。 像这种情况，可以使用 provide 和 inject 解决这种问题，不论组件嵌
阅读全文
在父子组件传递数据时，通常使用的是 props 和 emit，父传子时，使用的是 props，如果是父组件传孙组件时，就需要先传给子组件，子组件再传给孙组件，如果多个子组件或多个孙组件使用时，就需要传很多次，会很麻烦。 像这种情况，可以使用 provide 和 inject 解决这种问题，不论组件嵌
阅读全文
摘要：
vue3 中 的 computed 的使用，由于 vue3 兼容 vue2 的选项式API，所以可以直接使用 vue2的写法，这篇文章主要介绍 vue3 中 computed 的新用法，对比 vue2 中的写法，让您快速掌握 vue3 中 computed 的新用法。 组合式 API 中使用 com
阅读全文
vue3 中 的 computed 的使用，由于 vue3 兼容 vue2 的选项式API，所以可以直接使用 vue2的写法，这篇文章主要介绍 vue3 中 computed 的新用法，对比 vue2 中的写法，让您快速掌握 vue3 中 computed 的新用法。 组合式 API 中使用 com
阅读全文
摘要：
选项式API与之前写法相同，本篇文章主要通过 Options API 和 Composition API 对比 watch 的使用方法，让您快速掌握 vue3 中 watch 新用法。建议收藏！ 一、watch 新用法 选项式API中，watch 使用 watch:{ mood(curVal,pre
阅读全文
选项式API与之前写法相同，本篇文章主要通过 Options API 和 Composition API 对比 watch 的使用方法，让您快速掌握 vue3 中 watch 新用法。建议收藏！ 一、watch 新用法 选项式API中，watch 使用 watch:{ mood(curVal,pre
阅读全文
摘要：问题描述： 升级脚手架 vue-cli 4.5.15 版本之后，使用 template 时报错： [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available.
阅读全文
摘要：
在之前 vue2 中，data 返回的数据，可以直接进行双向绑定使用，如果我们把 setup 中数据类型直接双向绑定，发现变量并不能实时响应。接下来就看看setup如何实现data的响应式功能？
阅读全文
在之前 vue2 中，data 返回的数据，可以直接进行双向绑定使用，如果我们把 setup 中数据类型直接双向绑定，发现变量并不能实时响应。接下来就看看setup如何实现data的响应式功能？
阅读全文
摘要：
本篇文章干货较多，建议收藏！ 从 vue2 升级到 vue3，vue3 是可以兼容 vue2 的，所以 vue3 可以采用 vue2 的选项式API。由于选项式API一个变量存在于多处，如果出现问题时，就需要去多个函数内检查，项目较大时，遇到问题，增加排故的难度。所以 vue3 中新增了 setup
阅读全文
本篇文章干货较多，建议收藏！ 从 vue2 升级到 vue3，vue3 是可以兼容 vue2 的，所以 vue3 可以采用 vue2 的选项式API。由于选项式API一个变量存在于多处，如果出现问题时，就需要去多个函数内检查，项目较大时，遇到问题，增加排故的难度。所以 vue3 中新增了 setup
阅读全文
摘要：
自定义指令分为全局和局部两种类型，大家并不陌生。今天我们就讲讲在 vue3 中，自定义指令定义、使用以及钩子函数都有哪些变化？ 一、注册自定义指令 以下实例都是实现一个输入框自动获取焦点的自定义指令。 1.1、全局自定义指令 在vue2中，全局自定义指令通过 directive 挂载到 Vue 对象
阅读全文
自定义指令分为全局和局部两种类型，大家并不陌生。今天我们就讲讲在 vue3 中，自定义指令定义、使用以及钩子函数都有哪些变化？ 一、注册自定义指令 以下实例都是实现一个输入框自动获取焦点的自定义指令。 1.1、全局自定义指令 在vue2中，全局自定义指令通过 directive 挂载到 Vue 对象
阅读全文
摘要：
本篇文章主要目的就是想告诉我身边，正在学 vue3 或者 准备学 vue3 的同学，vue3中网络请求axios该如何使用，防止接触了一点点 vue3 的同学会有个疑问？生命周期、router 、vux使用都改变了，那 axios 使用有没有啥改变？ 小姐姐 使用 axios 之前，需要先安装好。
阅读全文
本篇文章主要目的就是想告诉我身边，正在学 vue3 或者 准备学 vue3 的同学，vue3中网络请求axios该如何使用，防止接触了一点点 vue3 的同学会有个疑问？生命周期、router 、vux使用都改变了，那 axios 使用有没有啥改变？ 小姐姐 使用 axios 之前，需要先安装好。
阅读全文
摘要：
vue 2 中采用选项式API。如：data、methods、watch、computed以及生命周期钩子函数等等。 mixin 混入，提供了一种非常灵活的方式，来分发 vue 组件中的可复用功能，一个mixin 对象可以包含任意组件选项，当组件使用 mixin 对象时，所有的 mixin 对象的选
阅读全文
vue 2 中采用选项式API。如：data、methods、watch、computed以及生命周期钩子函数等等。 mixin 混入，提供了一种非常灵活的方式，来分发 vue 组件中的可复用功能，一个mixin 对象可以包含任意组件选项，当组件使用 mixin 对象时，所有的 mixin 对象的选
阅读全文
摘要：
vuex4 是 vue3的兼容版本，提供了和vuex3 的相同API。因此我们可以在 vue3 中复用之前已存在的 vuex 代码。 一、安装以及初始化 vuex4安装： npm install vuex@next 为了向vue3初始化方式看齐，vuex4 初始化方式做了相应的变化，使用新的 cre
阅读全文
vuex4 是 vue3的兼容版本，提供了和vuex3 的相同API。因此我们可以在 vue3 中复用之前已存在的 vuex 代码。 一、安装以及初始化 vuex4安装： npm install vuex@next 为了向vue3初始化方式看齐，vuex4 初始化方式做了相应的变化，使用新的 cre
阅读全文
摘要：
虽然 vue-router 4 大多数 API 保持不变，但是在 vue3 中以插件形式存在，所以在使用时有一定的变化。接下来就学习学习它是如何使用的。 一、安装并创建实例 安装最新版本的 vue-router npm install vue-router@4 或 yarn add vue-rout
阅读全文
虽然 vue-router 4 大多数 API 保持不变，但是在 vue3 中以插件形式存在，所以在使用时有一定的变化。接下来就学习学习它是如何使用的。 一、安装并创建实例 安装最新版本的 vue-router npm install vue-router@4 或 yarn add vue-rout
阅读全文
摘要：
一、组件内的 data 为什么总是函数形式？ 我们试着先做一个计数器案例，把 data 的返回形式修改成一个对象。具体的代码如下： <template> <div> <button @click="num++">+</button> {{num}} <button @click="num--">-<
阅读全文
一、组件内的 data 为什么总是函数形式？ 我们试着先做一个计数器案例，把 data 的返回形式修改成一个对象。具体的代码如下： <template> <div> <button @click="num++">+</button> {{num}} <button @click="num--">-<
阅读全文
摘要：
一、teleport 介绍 teleport 传送门组件，提供一种简洁的方式，可以指定它里面的内容的父元素。通俗易懂地讲，就是 teleport 中的内容允许我们控制在任意的DOM中，使用简单。 使用语法： <teleport to="body"> <div> 需要创建的内容 </div> </te
阅读全文
一、teleport 介绍 teleport 传送门组件，提供一种简洁的方式，可以指定它里面的内容的父元素。通俗易懂地讲，就是 teleport 中的内容允许我们控制在任意的DOM中，使用简单。 使用语法： <teleport to="body"> <div> 需要创建的内容 </div> </te
阅读全文
摘要：
本篇文章主要介绍 v-model 在 Vue2 和 Vue3 中使用变化。 一、Vue2 中 v-model 的使用 v-model 是语法糖，本质还是父子组件间的通信。父子组件通信时有两种方式： 父给子传值：通过 props 子给父传值：通过 Events up，使用 $emit 触发事件。 1.
阅读全文
本篇文章主要介绍 v-model 在 Vue2 和 Vue3 中使用变化。 一、Vue2 中 v-model 的使用 v-model 是语法糖，本质还是父子组件间的通信。父子组件通信时有两种方式： 父给子传值：通过 props 子给父传值：通过 Events up，使用 $emit 触发事件。 1.
阅读全文
摘要：
本篇文章专门写给刚刚想要学习 vue3.x 的同学，大神请绕行。 现在越来越多的公司和程序员选择了 vue ，差不多80%的项目都是使用 vue 进行开发的。vue团队也在不断地改进框架，API做得非常好用。Vue3 发布主要目标：下一代web开发方式，更快，更轻，易维护，更多的原生支持(来自官网)
阅读全文
本篇文章专门写给刚刚想要学习 vue3.x 的同学，大神请绕行。 现在越来越多的公司和程序员选择了 vue ，差不多80%的项目都是使用 vue 进行开发的。vue团队也在不断地改进框架，API做得非常好用。Vue3 发布主要目标：下一代web开发方式，更快，更轻，易维护，更多的原生支持(来自官网)
阅读全文
摘要：电脑的 usb 口，大家都非常熟悉，保留的 usb 口可以插入鼠标、键盘、U盘、音响、耳机等等，一个插口可以添加多个设备。我们的插槽也是这样，预留一个位置，我们使用的时候可以放入自己需要的内容。 一、插槽的作用 插槽的目的是让原来的设备有更多的扩展性。 组件最大的特点就是复用性，插槽能大大提高组件的
阅读全文