qq_39666711的博客

是HTTP请求头中的⼀个标头，⽤于指示请求或响应中包含的实体的媒体类型，可以出现在请求或响应标头中。它告诉服务器如何处理客户端传过来的数据（通知服务器客户端正在发送的数据类型）、客户端如何处理响应中的数据。get请求的 headers 中是没有 content-type 这个字段的。content-type 是⽤来指定消息体的格式的，get请求⼀般没有消息体，所以，get 请求⼀般不⽤设置 content-type。

el.parentNode && el.parentNode.removeChild(el) 这行代码的意思是，如果 el.parentNode 存在（即 el 有父节点），则从 DOM 中移除 el。这是因为在 Vue 中，使用 v-hasPermi 指令时，如果用户没有相应的权限，我们希望从 DOM 中移除这个元素，从而避免用户看到没有权限的按钮或链接。在这段代码中，el 是一个 DOM 元素，el.parentNode 是获取这个 DOM 元素的父节点。因此， 的父节点是 ，而 的父节点是 或。

修改router中的path为 /common/register 是可以跳转的，成功跳转的浏览器路径如下图所示 ：由此可以看出，浏览器地址中是跳转时写的内容，如果写的是path，则按照path来找，如果写的是name ，按照name的内容，在index中定义的路由中寻找。因为我在router/index.js中定义的是path 是/register 而不是带common的，如果我将path修改成/common/register是可以跳转的。在Vue应用程序中有着不同的用途和效果。在这段Vue代码中，

该方法主要用于重置表单，将其值重置为初始值，并移除校验结果。

⏰️创作时间：2024年11月20日17点30分。

在Vue 3.0中，具名插槽是插槽的一种特殊形式，它允许父组件向子组件的特定位置插入内容，通过给插槽命名来实现更精确的内容分发。与默认插槽不同，具名插槽可以在一个子组件中定义多个不同名称的插槽，父组件根据这些名称将相应的内容插入到对应的位置，从而使子组件的结构更加灵活和可定制。通过具名插槽，Vue 3.0的组件能够更好地满足各种复杂的页面布局和内容定制需求，提高了代码的可维护性和复用性，使开发者能够更高效地构建应用程序。组件的对应具名插槽中插入了自定义的内容，如标题、主体内容和操作按钮。

在这个新例子里面呢，通过$refs实现了父组件对子组件方法的调用呀，这样就完成了计数器的增加和减少操作啦；同时呢，子组件通过defineExpose把内部方法暴露给父组件，这也是遵循了Vue 3.0组件间交互的规范哦。// 当点击增加按钮时，调用子组件的增加方法并更新计数。// 当点击减少按钮时，调用子组件的减少方法并更新计数。// 这里可以添加一些额外的逻辑，比如发送通知等。// 向外部暴露增加计数的方法。// 向外部暴露减少计数的方法。// 定义增加计数的方法。// 定义减少计数的方法。

组件不需要处理这些属性，实现了在电商应用场景下组件间属性的合理传递。接收的属性，以便在组件内部或继续向下传递给更深层的子组件时使用。//测试一下在自己的组件中只定义的变量是否会被放在$attrs中。是一个组件实例属性，它包含了父组件传递给子组件的所有非。当父组件向子组件传递数据时，属性是指那些父组件传递过来但子组件没有通过。组件会接收到一些关于产品的通用属性，如。组件（产品页面组件），它包含一个。组件（产品详情组件）和一个。组件并不需要使用这些属性。组件（产品评论组件）。等，这些属性需要传递给。

当v-model用于自定义组件（如modelValueprop 和事件自定义组件需要通过名为modelValue的prop来接收父组件传递的值，这类似于普通v-model中的数据绑定部分。在中，通过接收了父组件传递的ming和mima，这里的ming和mima就类似于modelValue的作用，用于接收父组件的数据。当子组件内部的数据发生变化时，需要通过触发名为的自定义事件来通知父组件更新数据。在中，通过和实现了这一点，当输入框的input事件触发时，会将最新的值通过相应的update。

时，要确保事件处理函数的参数顺序和类型与实际需求相符，以便正确地获取和使用事件相关的信息。函数，这样就可以在函数内部访问鼠标点击的原生事件对象的属性。'接收到自定义组件传递的数据：'框中用户输入的最新文本内容。，它包含了自定义组件通过。'用户输入的内容：'需要注意的是，在使用。

组件在按钮点击时，会发送一个事件，通知其他组件有玩具要传递的信息。//这里会根据子项的选中与否的状态来触发父组件中的完成数量的增减。就会增加，从而更新已完成事项的数量显示。假设我们有一个简单的待办事项应用，有一个。组件中的某个待办事项完成并触发该事件时，创建的实例）用于实现组件间的事件通信。child1没有给child2的时候。组件中，当复选框的状态变为完成（//监听子组件触发的数量增加。//监听子组件触发的数量减少。实现了组件之间的事件通信，让。组件的状态变化做出响应。更新完成事项的数量。

概念在 Vue 3.0 中，自定义事件是一种组件间通信的机制，允许子组件向父组件传递数据或触发父组件中的操作。子组件通过函数定义可以触发的事件，父组件通过v-on（或）指令监听子组件触发的这些自定义事件，并在事件处理函数中接收和处理数据。这种方式遵循了单向数据流的原则，同时实现了父子组件之间灵活的数据交互。使用场景用户交互反馈：例如在一个表单组件中，子组件（如输入框组件）可以在用户输入完成并提交时，通过自定义事件将用户输入的值传递给父组件，父组件再进行数据验证和后续处理。状态更新通知。

在子组件中，可以使用。

在Vue 3.0的开发中，高效的状态管理是构建大型应用的关键。Pinia作为专为Vue 3设计的状态管理库，结合setup语法糖，能让我们更优雅地处理应用状态。本文将详细阐述在使用setup语法糖的情况下，Pinia在Vue 3.0中的使用细节。setup函数是Vue 3.0中一个新的组件选项，它在组件创建之前执行。在这个函数中，可以使用Composition API来组织逻辑。使用setup语法糖可以让我们更方便地在组件中引入和使用Pinia的Store。

在日常练习的项目中，我每次都在vscdoe编写前台代码，但是对于编写的代码，如何将本地项目关联到远程的仓库；这里做一下记录。

在 Vue 3（以及许多现代 JavaScript 和 TypeScript 项目）中，模块化是组织和重用代码的一种重要方式。这些机制为在 Vue 3 和其他现代 JavaScript/TypeScript 项目中组织代码提供了极大的灵活性和能力。重新导出允许你将一个模块中的导出导入到另一个模块中，然后再次导出。在使用 TypeScript 时，你还可以导出类型定义，这对于在项目中维护类型安全和一致性非常重要。类型导出（TypeScript）：用于导出类型定义。重新导出：用于从其他模块导入并再次导出值。

背景：在一些情况下，前台的组件是可以复用的，那这些复用的对象和数据，为了避免直接写在一个vue文件中的混乱性，我们可以为每一个类型的内容，写成一个hooks，以便后面重复利用

在 Vue 3 中，接口是一种用于定义对象形状的方式，它可以帮助我们确保组件接收正确的数据类型和结构。接口的使用可以提高代码的可读性和可维护性，特别是在涉及到组件之间的数据传递和交互时；接口的定义在 Vue 3 中，可以使用 TypeScript 来定义接口。接口使用interface关键字进行声明，后面跟着接口的名称（通常以大写字母I开头，这是一种命名约定，但不是必需的），然后是一对花括号，在花括号内定义接口的属性和方法。id: number;

⏰️创作时间：2024年10月18日20点56分。

⏰️创作时间：2024年10月17日21点56分。

监视ref定义的【基本类型】数据：直接写数据名即可，监视的是其value值的改变。

在这个示例中可能有的人会有疑问，为什么这个循环中的单个元素没有 使用.value呢？

基础示例在这个例子中，通过将对象中的属性转换为一个对象。修改的值，会同时改变原对象中的属性值。函数传递示例这里将对象中的属性转换为后传递给函数，函数内部对值的修改反映到了原对象上。（二）toRefs示例基础示例使用将对象的所有属性转换为对象。然后可以通过解构后的对象方便地操作每个属性，并且这些操作会反映到原对象上。在组件中的应用示例

OptionsAPI在data函数中定义响应式数据。例如：data() {return {count: 0},methods: {响应式数据通过this关键字在methodswatch等其他属性中访问和修改。这里的this指向组件实例，这种方式在多层嵌套函数或回调函数中使用时可能会出现this指向混淆的问题。使用ref或reactive函数来定义响应式数据。例如使用refsetup() {return {count,increment或者使用reactive。

/ name和age是一个RefImpl的实例对象，简称ref对象，它们的value属性是响应式的。// 注意：name不是响应式的，name.value是响应式的，所以如下代码并不会引起页面的更新。从下图中可以看出，使用ref创建响应对象的value中又包含了一层被reactive处理过的内容；// tel就是一个普通的字符串，不是响应式的。// JS中操作ref对象时候需要.value。// JS中操作ref对象时候需要.value。

并把webpack解压进去，因为处于C盘，所以可能无权限在里面直接解压，我们可以创建一个webpack文件夹，然后再别的盘解压后，再复制到此文件夹下即可。2.但是提示下载webpack的时候，连接超时，那么这个资源可能不在国内，需要kexue上网；结果我这都是通的，但是就是不行，不知道为什么，索性换了一种方式----下载好webpack模版后，然后离线创建这个项目。紧接着在cmd初始化的窗口中，进入到vue-demo的项目里面，执行npm run dev命令启动项目。从上图可以清楚的看到，我已经安装过了。

编译器会解析其中的插值表达式{{message}}，生成相应的 AST 节点，并进行优化，最终生成一个渲染函数，该函数知道如何根据数据的变化来更新 DOM。例如，在一个具有路由功能的 Vue 项目中，views文件夹中的Home.vue组件可能是首页的组件，About.vue组件可能是关于页面的组件等。例如，如果message的值发生了改变，Vue 会重新计算渲染函数的结果，并更新 DOM 中相应的部分，以显示新的值。是项目的入口文件，主要作用是初始化 Vue 实例，并引入所需要的插件。

Vue 实例在创建和运行过程中会经历一系列的阶段，每个阶段都有相应的钩子函数可以让我们在特定时刻执行自定义的逻辑。创建阶段：在这个阶段，Vue 实例被初始化，包括数据观测、事件绑定等操作。挂载阶段：Vue 实例被挂载到 DOM 上，此时可以访问到 DOM 元素。更新阶段：当数据发生变化时，Vue 会重新渲染组件，触发更新阶段的钩子函数。销毁阶段：当组件被销毁时，会执行一些清理操作，如解绑事件、移除 DOM 元素等。

在大型应用开发的时候， 页面可以划分成很多部分。往往不同的页面， 也会有相同的部分。例如可能会有相同的头部导航。但是如果每个页面都独自开发， 这无疑增加了我们开发的成本。所以我们会把页面的不同部 分拆分成独立的组件，然后在不同页面就可以共享这些组件， 避免重复开发。在 vue 里， 所有的 vue 实例都是组件。

情况下， 过滤器都是有用的， 比如尽可能保持 API 响应的干净， 并在前端处理数据的格式。//由于这个过滤器写在单个的Vue实例中，所以叫做局部过滤器，我们还有全局过滤器一说。某些结果是基于页面上之前的数据实时计算出来的， 我们可以利用计算属性。//第一个参数：过滤器名字，第二个参数是函数体（真正的处理逻辑）watch 可以让我们监控一个值的变化。从而做出相应的反应。， 而只是改变渲染的结果， 并返回过滤后的版本。//watch可以让我们监控一个值的变化，从而做出反应。"西游记库存没有更多了"

用来标识每一个元素的唯一特征， 这样 Vue 可以使用“就地复用” 策略有效的提高渲染的效率。示例：

 指令 (Directives) 是带有。

在 2021 年，淘宝就发文称，npm 淘宝镜像已经从 registry.npm.taobao.org 切换到了 registry.npmmirror.com。注意：此处修改的镜像用的是npm本身，一般国内用户还是建议使用淘宝镜像，所以推荐还是设置成用淘宝镜像，执行：npm config set registry https://registry.npmmirror.com 【推荐】4、再次运行： npm config list，查看 registry 已经被更改为默认的 npm 公共镜像地址。

🌹🌹期待您的关注 🌹🌹，让我们共同进步！在 Vue 开发中，了解 Vue 项目的基本结构是进行 Vue 开发的基础。通过合理组织项目目录和代码结构，可以提高开发效率，增强代码的可维护性和可扩展性。在实际开发中，可以根据项目的需求和规模进行适当的调整和扩展，以满足不同的开发场景。

Vue 组件是构建强大和可维护应用的关键。通过理解组件的基础概念、掌握创建和注册组件的方法，以及利用 ref 和 defineExpose 等特性，可以更加高效地开发 Vue 应用。在实际开发中，根据项目的需求合理地组织和使用组件，将大大提高开发效率和代码质量。

背景：比如在一个vue写成的页面中，想要使用一个vue完成的表格组件(这个表格组件也是一个XXX.vue文件)，具体的怎么在一个文件中引入需要使用的那部分内容，比如前面的表格、比如某个饼图图表什么的。下面有两种方法：方法一:代码如下<template><div><!-- 3.在template中就可以直接使用了 --><tes...

样例1：const { xxx } = this.state;上面的写法是es6的写法，其实就相当于：const xxx = this.state.xxx样例2：const {comment,index,deleteComment} = this 上面的这句话是一个简写，最终的含义相当于const comment = this.commentconst index = th...