- 博客(87)
- 收藏
- 关注
RSS订阅
原创 路由守卫路由钩子生命周期
beforeEach（to，from， next） 前置守卫 beforeResolve（to，from， next） 解析守卫 afterEach（to，from）后置守卫简单的来说就是路由与路由之间切换跳转的关系.to:意思是要去的地方from:意思是从什么地方来.next:开启允许通过.一般next()这样书写可以添加对应的路由名跳转对应的路由next('/')<template> ...</template><script>ex.
2021-11-17 08:28:34
660
原创 数组的使用方法
持续更新.let arr = [1,2,3,4,5]console.log(arr.push(5)) // 6console.log(arr) // [1,2,3,4,5,5]arr.pop()从后面删除元素.只能是一个.返回值是删除的元素let arr = [1,2,3,4,5]console.log(arr.pop()) // 5console.log(arr) //[1,2,3,4]arr.shift()...
2021-10-20 21:02:38
130
原创 Git 相关指令
clear 是清空目前终端界面的内容$ git config --global user.name //第一次创建时需要注册的用户名称$ git config --global user.email //第一次创建时设置的邮箱$ git config --list 用于查询自己的名字和邮箱.如果更换就重敲上面两行代码键盘用上下可以切换之前输入过的的指令git config --list --global 查看全局配置git config user.name 查看指定全局配置名称g.
2021-10-07 21:05:10
93
原创 鼠标事件以及 onmouseover, onmouseout 鼠标移动事件动态渲染的注意点
onmouseover, onmouseout 鼠标移动事件闪烁bug
2022-10-26 11:39:18
1835
原创 节流与防抖
节流只要触发了就会在一定时间内匀速执行, 一般运用于窗口下来图片懒加载。防抖一般用于禁止多次发送请求的情况下使用, 避免浪费资源。一段时间只想执行最后一次用防抖。一段时间内想持续匀速执行用节流。
2022-09-29 11:33:06
97
原创 表单验证, 同时弹出警示框
方法一. this.$refs.form.validate(valid => { if (!valid) { this.$message.warning('请完善必填信息') return false } }通过在form表单中设置ref='form' 使用el 默认的validate 实现,统一校验缺陷:并不是每一条实时弹出警示框, 只在提交时统一弹出警示框方法二.data .
2022-05-26 17:58:20
1410
原创 筛选时切换分页导致数据丢失
具体情况如下search (pageNum = 1) { this.pageNum = pageNum // 默认为分页1 let obj = { page: { pageNum: this.pageNum, pageSize: this.pageSize } } Object.assign(obj.params, this.params) // 合并筛选里的数据... 发送请求 参数为obj}.
2022-05-25 11:34:00
628
原创 Vue 简单导出Excel
// 下包 xlsx // 下包 file-saver npm install --save xlsx file-saver// 导包import FileSaver from 'file-saver'import XLSX from 'xlsx'// 导出按钮<el-button class="btn-search" type="primary" plain size="small" @click="exportExcel()">导出Excel</el-butt.
2022-03-07 11:05:12
453
转载 树形结构穿梭框
npm install el-tree-transfer --save<template> <div> <tree-transfer :title="title" :from_data="fromData" :to_data="toData" :defaultProps="{ label: 'label' }" @addBtn="add" @removeBtn="remove...
2022-02-28 15:16:07
4088
原创 在vue中导出pdf格式文档
1. npm 或者yarn 安装包//将页面html转换成图片npm install --save html2canvas//将图片生成pdfnpm install jspdf --save 2. 在项目中创建一个js文件, 名字自定义, 输入下面完整内容// 导出页面为PDF格式import html2canvas from "html2canvas"import JSPDF from "jspdf"export default { install (Vue, option
2022-01-16 22:29:39
828
原创 Vue常问面试题持续更新.
01. 什么是原型链构造函数的prototype和其实例的__proto__是指向同一个地方的，这个地方就叫做原型对象 把这些串联在一起就叫原型链fn是一个函数.当const f = new fn()的时候.f.__proto__ = fn.prototype 同时fn = new foo()的时候,则fn.__proto__ = foo.prototype,此时,f.__proto__ = foo.prototype02. 响应式的原理Object.defineProperty
2021-12-25 14:43:07
921
原创 SPA 基础知识
SPA :Single Page Application单页面应用程序，整个应用中只有一个页面（index.html）优势：页面响应速度快，体验好（无刷新），降低了对服务器的压力。 a，传统的多页面应用程序，每次请求服务器返回的都是一整个完整的页面。 b，单页面应用程序只有第一次会加载完整的页面，以后每次请求仅仅获取必要的数据。缺点：不利于 SEO 搜索引擎优化。 a，因为爬虫只爬取 HTML 页面中的文本内容，不会执行 J...
2021-12-16 20:58:59
144
原创 移动端REM适配
1.PostCss-Pxtorem 配置yarn add -D postcss-pxtorem // -D就是保存为开发依赖2.创建 postcss.config.js 是PostCSS 的配置文件module.exports = { plugins: { autoprefixer: {}, 'postcss-pxtorem': { // 根值：默认是37.5，来自于设计稿大小的10分之一 rootValue: 37.5, // 根植 .
2021-12-14 15:17:08
1046
原创 Redux 基础应用.
基础应yarn add redux来自 阮一峰 为了让代码各部分职责清晰、明确，Redux 提出三个核心概念，需要我们写代码的时候遵守。 a，action（动作）：描述要做的事情（要干啥）。 b，reducer（函数）：更新状态（怎么干）。 c，store（仓库）：整合 action 和 reducer（谁来指挥）。 通过例子来理解三个核心概念。 a，action：相当于公司里面要做的事情，比如打扫卫生这个事等。 b，reducer：相当于公司的员工，负责执行。
2021-12-13 20:30:44
665
原创 React 跨组件传值内置方法.
祖父import React, { useState, createContext } from 'react'import Pands from './Pands'// 使用内置createContext导出数据export const Context = createContext()export default function App () { const [a, b] = useState(8) const handleClick = () => { b((
2021-12-12 15:34:35
638
原创 如何准确判断数据具体类型
准确判断数据具体类型.终极解决方案const arr = []const obj = {}const tempnull = nullconst fn = function () { }const str = '1'const num = 1console.log(Object.prototype.toString.call(arr));console.log(Object.prototype.toString.call(obj));console.log(Object.protot.
2021-12-09 18:02:36
411
原创 React 传值 通信传递
目录:在开发中,避免代码过于繁琐.特将模块分离,通过一个个组件合在一起.在组件与组件之间使用组件通信.为了传递和共享某些数据父子 兄弟 跨件相传1.父传子1.定义数据. state = { salary: 11.46,}2.在子标签上绑定数据 <Fuzi salary={this.state.salary}></Fuzi>3.子组件使用.<div>工资:{this.props.salary}</div>
2021-12-08 21:20:00
117
原创 React 中的this指向,获取方式.
// 需求.点击按钮的时候state里的arr++export default class App extends React.Component { state = { arr: 18 } handclick () { } render () { return ( <> <button onClick={this.handclick}>按钮+1</button> <span>.
2021-12-06 15:51:03
725
原创 React 中的状态
状态是指某个时间点对应的数据.分为有状态.和无状态有状态:能定义state的组件,类组件就是有状态组件无状态:不能定义state的组件,函数组件一般叫做无状态组件2019年2月06日.React v16.8引入了React Hooks, 从而函数式组件也能定义自己的状态.无状态组件的场景:组件本身不需要有状态.不需要变化.一般用于写死组件本身就没有状态,有可能只需要从外部传入的状态特点:状态可以被改变.会影响到视图变化.作用:保存数据.同时数据.
2021-12-06 09:49:47
519
原创 React 中的组件实例和类实例
import React from 'react'import ReactDOM from 'react-dom'// 函数组件function Hello1 () { return <h1>Hello Word</h1>}const Hello2 = () => <h2>Hello React</h2>const arr = [ { id: '1', name: '小乌龟', age: 888 }, { id: '2', n.
2021-12-05 17:41:13
838
原创 后台管理系统权限问题必答
权限管理整个流程用户管理：所有帐号的增删改查，为该帐号分配可选权限角色信息角色管理：角色信息的增删改查，为该角色分配具体权限数据权限管理：对应路由需求的访问权权限管理分三部分- api请求定义 - 主要后端处理， - 前端：响应拦截统一错误处理- 路由 1. 将路由分为二大块 - 静态路由：不需要访问权限的路由 - 动态路由：需要权限访问的路由 - 默认只有静态路由 2. 在获取到用户信息后 1. 用户信息中包含当前用户能访问的权限页...
2021-11-26 20:32:46
1188
2
原创 将文本生成二维码,打印指定DOM
对应代码. <!-- 二维码生成 1.设置弹框 2.下包 3.导包. 4.触发点击事件弹出框 5.使用$nextTick方法获取生成的二维码. --> <el-dialog :visible.sync="isShowo" title="二维码"> <div style="text-align:center"> <canvas ref=...
2021-11-24 15:15:57
409
原创 excel文件夹上传.模板代码.
来源:src/components/UploadExcel/index.vue · 花裤衩/vue-element-admin - Gitee.comhttps://gitee.com/PanJiaChen/vue-element-admin/blob/master/src/components/UploadExcel/index.vue1.定义一个vue. 样式根据个人情况修改.<template> <div class="index"> <input.
2021-11-22 16:53:38
413
原创 组件传值:父子$emit,props.兄弟$bus.$on.$emit,
1.父子传值父传子通过事件绑定.在父结构上的子标签能添加//子组件的标签 < :需要传递的名字='父组件需要传递的值' >子组件通过props接收export default { props:['父定义的名字']}2.子给父传值通过事件绑定的方式在子组件中定义methods:{ 事件名(){ this.$emit('这里是自定义的任何名字用于传给父组件接收',参数可填可不填.根据情况而定) } }父组件
2021-11-21 18:56:50
635
原创 全局组件自动注册
Vue.use(js对象/function,参数)js对象:{install(Vue,options){ //在Vue.use后,该方法会执行 }function:function(Vue,opt}
2021-11-20 15:08:14
250
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人