随笔分类 - Vue
摘要：在做vue项目的时候，要求用户在页面访问前先登录，或在离开页面前发出提醒。vue官方提供的路由管理器 vue-router 提供的导航钩子，通过跳转或取消的方式守卫导航。以下总结了路由钩子函数的使用方法和一些使用场景。 一、全局守卫 router.beforeEach 路由改变前的钩子 const
阅读全文
摘要：常见场景：点击列表的详情，跳转到详情内页，在内页根据传递的参数获取详情数据。 路由传参一般有如下几种方式，下面主要介编程式导航 router.push 的传参方式： 方法一：通过 params 传参 路由配置如下： { path: '/detail/:id', //若id后面加?代表这个参数是可选的
阅读全文
摘要：接上篇，有导入也就有导出需求。 导出excel需求，当点击下载模板或下载反馈结果，axios发起后端接口请求，返回的数据获取 response 时出现乱码，如图： 现总结如下几种处理方法。 1、通过 url 下载 即后端提供文件的地址，直接使用浏览器去下载 通过 window.location.hr
阅读全文
摘要：具体需求场景如下： 选择excel文件后，需要把导入的excel文件手动上传到后台服务器，并将导入成功后的统计结果显示出来。官网也有手动上传的示例，通过 action="url" 传入地址的方式，但在实际项目中请求需要自己配置，下面具体说明实现的方法。 说明： 在上传文件到展示统计结果，我们后端给了
阅读全文
摘要：在实际的项目中，和后台的数据交互是少不了的，我通常使用的是 axios 库，所以以下示例也是以 axios 为基础来进行封装的。如果对 axios 不了解的，请看这里 axios 文档 1、安装 首先是 npm 安装 axios 很简单：npm install axios 2、没有封装存在的问题 如
阅读全文
摘要：关于 element-ui 使用中的其他问题请点这里 一、el-table 翻页序号连续 方法一： <el-table-column label="序号" type="index" width="50" align="center"> <template v-slot="{ $index }"> <
阅读全文
摘要：定义： reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。 reduce() 与forEach()、map()、filter()这些方法一样，也会对数组中的每一项进行遍历，但是reduce() 可以将遍历的前一个数组项产生的结果与当前
阅读全文
摘要：最近在项目打包时，出现如下一些错误： 这些错误本可以避免的，前面把编辑器卸载重装忘记设置了，真是自己坑了自己 o(╥﹏╥)o 在项目中使用ESLint校验附带了大量的规则，ESLint的官方rules文档，我们可以自定义规则设置，但设置规则时必须将值设置为以下值之一： "off" or 0：停用这个
阅读全文
摘要：官方解释： <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。 当组件在 <keep-alive> 内被切换，它的 activ
阅读全文
摘要：在做 vue + element-ui 项目时，重复点击导航路由报错，报错信息如下： 虽然不影响使用，但问题还是要解决的。于是，查文档，注意到 vue-router 文档中有这样一段话，传送门→ 即：vue-router@3.1.0 以后，回调函数返回的是 promise。所以如果没有捕获到错误，就
阅读全文
摘要：element-ui 官方文档 element-ui 中 el-table 的使用合集请点这里 基于 vue2.0 的 element-ui 框架，使用起来还是很方便的，非常适合快速开发，但是在做自己的项目中还是会碰到这样那样的问题，有些问题官方文档并不是很详尽，以下是我在使用 element-ui
阅读全文
摘要：在 vue2.0 之前，是有内置过滤器的，在2.0中已经没有内置的过滤器了，但我们可以自定义过滤器。 关于 vue 过滤器，在官方文档中是这样说明的： Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+
阅读全文
摘要：一、什么是指令 学习 vue 的时候肯定会接触指令，那么什么是指令呢？ 在 vue 中提供了一些对于页面和数据更为方便的输出，这些操作就叫做指令，以 v-xxx 表示，比如 html 页面中的属性 <div v-xxx ></div> 比如在 angular 中 以 ng-xxx 开头的就叫做指令
阅读全文
摘要：在 vue 项目中，ESLint 校验报错 Do not use 'new' for side effects. eslint(no-new). 错误图片如下： 虽然项目还是可以运行，但不明白为啥报错了，于是就翻了翻 eslint 文档规则，ESLint 传送门 禁止使用 new 以避免产生副作用
阅读全文
摘要：我们在做前后端分离的项目中，有时会碰到这样的情况，就是当我们前端的项目已完成部分后，需要调用后端接口来做调试，但是有时后端接口还没有完成，这个时候就需要我们自己来模拟了。 如果我们只是 get 一些数据，只用借助 jsonplaceholder 就可以了，但是如果我们想要 post 一些数据，使用
阅读全文
摘要：我们在 Vue 项目中多多少少都会有用到 computed 和 watch，这两个看似都能实现对数据的监听，但还是有区别。所以以下通过一个小栗子来理解一下这两者的区别。 [ 戳 我 查 看 官 网 ] computed 计算属性 计算属性基于 data 中声明过或者父组件传递的 props 中的数据
阅读全文
摘要：想必用过 vue.js 的童鞋，一定知道在 vue 各个组件之间传值的痛苦，基于父子、兄弟组件，我们传值可能会很方便，但是如果是没有关联的组件之间要使用同一组数据，就显得很无能为力了，而 vuex 就很好的解决了我们这种问题。所以 Vuex 也是必须掌握的，出去面试也是必问的，那么接下来我们就来简单
阅读全文
摘要：多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，这就有点大材小用了。所以就有了 $attrs / $listeners ，通常配合 inheritAttrs 一起使用。 inheritAttrs：默认值为 true。 默认情况下父作
阅读全文
摘要：我们都知道 Vue 作为一个轻量级的前端框架，其核心就是组件化开发。Vue 就是由一个一个的组件构成的，组件化是它的精髓，也是最强大的功能之一。而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。 但在实际项目开发过程中，我们需要访问其他组件的数据，这样就就有了组件通信的问题。
阅读全文
摘要：咱们先来看官网怎么说~~~ 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 戳 我 查 看 官 方 文 档 即 mixin 在引入组件之后，会将组件内部的
阅读全文
浙公网安备 33010602011771号