随笔分类 - vue
vue学习记录以及项目中遇到的vue相关的问题
摘要：### 需求背景 在项目开发中遇到需要前端将后端返回的数据导出的任务，由于后端已经全部返回了相关数据，为避免重复请求接口、减少后端IO提升系统性能，因此需要在前端将后端返回的任务数据导出成 Excel。之前没有做过前端根据数据直接导出excel的案例，特此做记录。 ### 使用的插件 1. xlsx
阅读全文
摘要：一、真实 DOM 及其解析流程 本节我们主要介绍真实 DOM 的解析过程，通过介绍其解析过程以及存在的问题，从而引出为什么需要虚拟 DOM 。下图为 Webkit 渲染引擎工作流程图。 所有的浏览器渲染引擎工作流程大致分为 5 步：创建 DOM 树 -- 创建 style Rules -- 构建 R
阅读全文
摘要：理解 官方文档说明如下： 通过注入路由，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前的路由。 注入路由，在 mian.js 中引入 路由，并且注入。 import router from './router'; new Vue({ el
阅读全文
摘要：router.resolve() 的解释 const resolved: { location: Location; route: Route; href: string; } = router.resolve(location, current?, append?) 解析目标位置 (格式和 <ro
阅读全文
摘要：需求：每隔一段时间获取最新数据，然后渲染到页面。如下图效果。 思路：使用定时器，每隔一段时间发起一次请求。 代码： data() { return { // 定时器 timer: null， // 展示的数据 info: [] } }， methods: { getInfo() { // 轮询获取更
阅读全文
摘要：Vue项目中刷新当前页面的方法 JS 原生刷新页面方法：window.location.reload() 利用路由刷新的方法：this.$route.go(0) 利用 vue 提供的 provide 和 inject 自定义刷新 前两种方法：js原生方法和路由刷新相当于强制刷新当前页面，虽然比较简单
阅读全文
摘要：vue 组件间传值总结： 父组件向子组件传值 子组件向父组件传值 祖孙组件间传值 兄弟组件间传值 父组件向子组件传值 props 和 $emit() $parent 和 $children ：子组件通过this.$parent可以获取到父组件的数据，父组件通过 this.$chilren()可以直接
阅读全文
摘要：所谓动态组件就是让多个组件使用同一个挂载点，并动态切换。 is 用法 通过使用保留的 <component></component> 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换。根据 v-bind:is="组件名" ，组件名就会自动去匹配对应的组件，如果匹配不
阅读全文
摘要：第一种方法: main.js router.afterEach((to,from,next) => { window.scrollTo(0,0); }); 第二种方法： 在创建router实例时，做如下的配置 savedPosition当且仅当通过浏览器的前进/后退按钮触发时才可用 scrollBe
阅读全文
摘要：nprogress 插件是在页面刷新和跳转时出现在浏览器顶部的进度条，它会随着页面的加载而显示进度状态。可在官网 查看相关效果。 在vue项目中使用 nprogress 插件 1.安装：npm install --save nprogress 2.在 src → utils 文件夹下创建 nprog
阅读全文
摘要：1. 需求说明 在前端开发中，往往会遇到页面需要实时刷新数据的情况，给用户最新的数据展示。 2. 逻辑分析 如果需要数据实时更新，我们自然是需要使用定时器，不断的调用接口数据，会相对的消耗内存。 3. 代码示例 data(){ return { intervalId:null } }, method
阅读全文
