随笔分类 - Vue
摘要：三、如何在 Vue3 中使用 postcss-px-to-viewport？ 首先，我们需要安装相关的插件： npm install postcss-px-to-viewport -D 在vite.config.js文件中进行配置 import vue from '@vitejs/plugin-vu
阅读全文
摘要：第一步先在需要保留的组件中添加name属性 第二步添加keep-alive 这样浏览器会报一个警告 建议我们使用插槽方式
阅读全文
摘要：不建议监听window滚动 建议监听元素滚动 不然每个页面滚动到底部都会触发 import { onDeactivated, onMounted, onUnmounted, ref } from 'vue'; import { throttle } from 'underscore' //监听滚动位
阅读全文
摘要：效果展示 第一步将数据进行分组处理 例如:数据是这样的 处理方法一:进行两次for循环 处理方法二:进行一次for循环 下一步进行分类显示 下一步显示当前图片所在组的位置
阅读全文
摘要：动态路由使用方法 第一步配置动态路由 第二步传入参数 路径+id 第三步获取动态路由id
阅读全文
摘要：import axios from "axios"; // import { ElMessage } from 'element-plus' import { BASE_URL,TIMEOUT } from "../config"; const Axios = axios.create({ // 后
阅读全文
摘要：效果 实现步骤 第一步先编写一个加载页面 在APP.vue中引入 将控制加载的变量添加到状态管理库中例如pinia或VueX中 在loading页面中导入常量并控制主体是否显示 在请求拦截器和响应拦截器里配置
阅读全文
摘要：方式一 使用fixed固定定位 缺点:滚动条不好控制 必须添加margin-top进行内容和主题分离 方式二:局部滚动 给内容设置一个固定的高度并且设置overflow-y = hidden 高度就是视口的高度减去上面两个内容的高度 解决方式一的缺点
阅读全文
摘要：方法一 使用route的实例 比如我们在home页面需要这个标签 在city页面不需要这个标签 我们可以在router里面添加meta属性 在需要的组件页面导入route实力获取meta属性的值 方法二 使用css样式
阅读全文
摘要：计算属性和方法的区别 1.计算属性本质上是包含getter和setter的方法 当获取计算属性时,实际上是在调用计算属性的getter方法,vue会收集计算属性的依赖,并缓存计算属性的返回结果,只有当依赖发生变化时才会重新计算 方法没有缓存,每次调用方法都会导致重新执行 2.计算属性的getter和
阅读全文
摘要：认识axios axios请求方式 常见的配置选项 axios的创建实例 请求和响应拦截器 axios请求库封装（简洁版）
阅读全文
摘要：什么是Pinia呢？ Pinia和Vuex的区别 如何使用Pinia？ 定义一个Store 使用定义的Store 认识和定义State 操作State（一） 在vuex中修改state中的数据必须要用mutations 操作State（二） 认识和定义Getters 访问Getters（一） 访问G
阅读全文
摘要：什么是状态管理 复杂的状态管理 Vuex的状态管理 Vuex的安装 创建Store 组件中使用store 单一状态树 组件获取状态 在setup中使用mapState 在setup中不使用mapState获取值 getters的基本使用 getters第二个参数 getters的返回函数 mapGe
阅读全文
摘要：前后端分离阶段 URL的hash HTML5的History 认识vue-router vue-router的使用 路由的默认路径 history模式 router-link 路由懒加载 打包效果分析 路由的其他属性 动态路由基本匹配 获取动态路由的值 NotFound 匹配规则加* 路由的嵌套 代
阅读全文
摘要：Options API的弊端 认识Composition API setup函数的参数 setup函数的返回值 Reactive API 定义响应式复杂数据 Ref API 定义响应式数据 Ref自动解包 setup函数定义数据 ref 和 reactive的使用场景 认识readonly read
阅读全文
摘要：认识生命周期 生命周期的流程 1.创建组件实例之前回调beforeCreate函数 2.创建组件实例 3.创建组件实例之后回调create函数(1.发送网络请求 2.事件监听 3.this.$watch()组件监听) 4.对template模板进行编译 5.在挂载到虚拟DOM之前回调beforeMo
阅读全文
摘要：非父子组件的通信 ◼ 在开发中，我们构建了组件树之后，除了父子组件之间的通信之外，还会有非父子组件之间的通信。 ◼ 这里我们主要讲两种方式： 全局事件总线； Provide/Inject； 全局事件总线mitt库 使用事件总线工具 事件取消 Provide和Inject Provide和Inje
阅读全文
摘要：认识插槽Slot 如何使用插槽slot？ 插槽的默认内容 多个插槽的效果 具名插槽的使用 ◼ 事实上，我们希望达到的效果是插槽对应的显示，这个时候我们就可以使用具名插槽： 具名插槽顾名思义就是给插槽起一个名字，<slot> 元素有一个特殊的attribute：name； 一个不带name 的sl
阅读全文
