- 博客(34)
- 收藏
- 关注
RSS订阅原创 封装倒计时组件（逻辑复用）
import { useState, useRef, useEffect } from 'react'// useTimeDown(要倒计时的时间，倒计时结束后的回调函数)export default function useTimeDown (init, CallBack) { const [count, setCount] = useState(init) const refTime = useRef(null) const start = () => { // 1..
2021-11-13 11:19:37
798
原创 vue自定义指令
1 注册注册自定义指令分为全局注册与局部注册两种：全局注册： Vue.directive('xxx', { inserted: function (el) { //指令属性 } });局部注册：var app = new Vue({ el: '#app', directives: { xxx: { //指令属性 } }});2 属性
2021-11-11 23:29:48
125
原创 React的生命周期
1. 挂载卸载过程 1.1.constructor() 1.2.componentWillMount() 1.3.componentDidMount() 1.4.componentWillUnmount () 2. 更新过程 2.1. componentWillReceiveProps (nextProps) 2.2.shouldComponentUpdate(nextProps,nextState) 2.3.componentWillUpdate (nextProps,nex
2021-11-10 20:04:31
382
原创 keep-alive实现原理
一、前言本文介绍的内容包括：keep-alive用法：动态组件&vue-router keep-alive源码解析 keep-alive组件及其包裹组件的钩子 keep-alive组件及其包裹组件的渲染二、keep-alive介绍与应用2.1 keep-alive是什么keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。一个场景用户在某个列表页面选
2021-11-08 23:09:44
188
原创 v-model实现父组件和子组件之间的传值
父组件中设置为:<template> <div> <!-- msg变量传给Child的value属性(props) --> <Child v-model="msg"></Child> 外面{{msg}} </div></template> import Child from './Child'export default { data () { return {
2021-11-08 18:41:48
704
原创 Vuex持久化
使用插件让在vuex中管理的状态数据自动同时存储在本地免去自己存储的环节1.安装vuex-persistedstate插件npm i vuex-persistedstate2.vuex中准备要存储的数据例如:在src/store 文件夹下新建 modules 文件，在 modules 下新建 user.js 和 cart.js// 用户状态export default { namespaced: true, state: () => { return
2021-11-08 18:38:35
106
原创 RBAC 介绍 (权限)
1.封装UploadImg组件1.1下载依赖包npm i cos-js-sdk-v5 --save1.2 封装一个具有上传功能的组件我这里结合element-ui中的 来进行封装的(官网cv)show-file-list: 是否显示上传的文件列表action: 用来指定文件要上传的地址 这里我们要自定义上传动作 所以写#:http-request:自定义上传的行为动作 后面跟一个方法on-success: 上传成功之后的回调before-upload： 上传之前需要做的...
2021-11-08 18:33:02
412
原创 城市及城市下地区 封装
export const datas = [ { city: '北京市', area: [ '东城区', '西城区', '朝阳区', '丰台区', '石景山区', '海淀区', '门头沟区', '房山区', '通州区', '顺义区', '昌平区',.
2021-11-02 15:40:21
104
原创 HTTP协议网络请求状态码，详细~
客户端应当继续发送请求。这个临时响应是用来通知客户端它的部分请求已经被服务器接收，且仍未被拒绝。客户端应当继续发送请求的剩余部分，或者如果请求已经完成，忽略这个响应。服务器必须在请求完成后向客户端发送一个最终响应。101 服务器已经理解了客户端的请求，并将通过Upgrade 消息头通知客户端采用不同的协议来完成这个请求。在发送完这个响应最后的空行后，服务器将会切换到在Upgrade 消息头中定义的那些协议。 只有在切换新的协议更有好处的时候才应该采取类似措施。例如，切换到新的HTTP 版本比旧...
2021-11-01 22:09:57
95
原创 history路由模式-熟悉两种路由模式
目标了解两种单页应用的路由模式，清楚它们的区别两种单页应用的路由模式hash模式hash模式 ：使用 URL 的 hash 来模拟一个完整的 URL, 其显示的网络路径中会有 “#” 号hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash后刷新, 也不会有问题hash模式示例: http://localhost:8080/#/home http://localhost:8080/#/user原理： hashChangehistory模
2021-10-28 19:02:30
5496
1
原创 打包优化-整体介绍
项目开发完成打包 ： 用webpack做打包（把.vue, .js, .less ------> .js, .css, .html） 在项目中都会提供命令： npm run build 打包优化: 在保证功能可用的前提下，让我们的文件尽可能小 在保证功能可用的前提下，让我们的页面显示出来的速度更快一些 打包之后，会得到dist目录，如果希望可以双击打开index.html，则需要提前在vue.config.js中配置：vue.config.js中{
2021-10-28 18:59:01
137
原创 数据格式化 (枚举)
怎么把以下数据转换为 {1:'正式'}，{2:'非正式'}呢？const obj = [ { id:1, value:'正式' }, { id:2, value:'非正式' }]// Array.reduce((累加器,每一个值)，初始值)const format = hireType.reduce((newObj, item) => { // item,id 就是 1 // item,value 就...
2021-10-25 22:08:38
112
原创 把excel文件中的日期格式的内容转回成标准时间
// 把excel文件中的日期格式的内容转回成标准时间// https://blog.csdn.net/qq_15054679/article/details/107712966export function formatExcelDate(numb, format = '/') { const time = new Date((numb - 25567) * 24 * 3600000 - 5 * 60 * 1000 - 43 * 1000 - 24 * 3600000 - 8 * 3600000.
2021-10-23 22:29:26
124
原创 把一个对象数组中的每个对象的属性名，从中文改成英文
format(results) { const mapInfo = { '入职日期': 'timeOfEntry', '手机号': 'mobile', '姓名': 'username', '转正日期': 'correctionTime', '工号': 'workNumber', '部门': 'departmentName', '聘用形式': 'formOfEmployment' .
2021-10-23 20:11:04
402
原创 Vue 插槽使用总结
1.为什么使用插槽slot翻译为插槽：在生活中很多地方都用到插槽，电脑的USB插槽，插板有电源插槽。 插槽的目的是让我们原来的设备具有更多的扩展性。 比如电脑的USB我们可以插入U盘、硬盘、手机、音响、键盘、鼠标等等。组件的插槽：组件的插槽也是为了让我们封装的组件更加具有扩展性。 让使用者可以决定组件内部的一些内容到底展示什么。2.插槽的使用如何使用插槽：在子组件中，使用特殊的元素< slot >就可以为子组件开启一个插槽。 该插槽插入什么内容取决于父组件如何使用
2021-10-22 20:54:07
234
原创 Element-ui的表格table翻页如何让序号延续递增
在使用element-ui 的table表格时，都会发现它每一页的序号都会从1开始，那怎么才能让它延续上一页的序号呢？研究 element-ui 文档发现table表格属性中有一个index属性index属性写明了，如果设置了 type=index ，那么可以通过传递 index 属性来自定义索引<el-table-column label="序号" type="index" :index="getIndex" width="50" /> ...
2021-10-21 21:04:09
461
原创 把平铺的数组结构转成树形结构
<script>/*** 把平铺的数组结构转成树形结构*/const arr = [ { 'id': '29', 'pid': '', 'name': '总裁办' }, { 'id': '2c', 'pid': '', 'name': '财务部' }, { 'id': '2d', 'pid': '2c', 'name': '财务核算部'}, { 'id': '2f', 'pid': '2c', 'name': '薪资管理部'}, { 'id': '.
2021-10-20 19:24:59
200
原创 vue watch监听中 immediate, deep, hander的作用
1. immediateimmediate的值默认是false,在第一次进入页面页面时,如果没有发生数据变化watch并不会立即监听只有发生数据改变,hander才会有操作,但是如果将immediate设置为true,在第一次进入页面时就会绑定值.watch: { a: { handler(newVal, oldVal) { console.log(oldVal) console.log(newVal) }, immedi...
2021-10-20 19:23:37
1584
原创 设置tree结构前面的图标
简易效果如图,难点是判断是否展开 来修改加号和减号难点一:如何给没有下属节点的对象加一个头像<svg-icon v-if="data.children.length !== 0" icon-class= 'add' /> <svg-icon v-else icon-class="user1" /> <span>{{ data.name }}</span>判断它是否有children 如果有则隐藏,如果没有则则显...
2021-10-20 19:21:46
516
原创 设置高亮当前菜单项
目标当左侧的某一菜单处于选中状态时，对它高亮显示分析当某个菜单处于选中状态时，el-menu自动会有一个特殊的类.is-active，所以我们补充一个css类就可以了。操作在 src\styles\sidebar.scss文件中， 在el-menu下添加一个is-active类，样式如下.el-menu { // 省略其他 .is-active { background-color: $menuText !important; span{ col
2021-10-18 11:23:03
1024
原创 理解svg-icon的工作原理
目标理解svg-icon组件的工作原理； 并把它用到新项目中。要点 svg-icon是一个全局组件，在src/icons/index.js中定义并注册成立全局组件 在main.js中引入 它额外需要svg-sprite-loader@4.1.3的配合，及对应的vue.config.js中的配置 它的使用格式<svg-icon icon-class="文件名"/> 。这里的文件名就是在src/icons/svg下的文件名 如何在新项目使用svg-ic
2021-10-18 11:21:37
94
原创 reduce 统计每个元素出现的次数 及 数组
// ["b", "c","b", "c","a", "b", "c"] 统计每个元素出现的次数const arr = ["b", "c","b", "c","a", "b", "c"]const obj = arr.reduce((sum,item)=>{ if (item in sum ){ sum[item]++ }else { sum[item] = 1 } return sum},{})console.log(obj); // {b: 3, c:...
2021-10-18 11:17:24
170
原创 .sync和v-model的区别
两者共同点v-model的本质<!--v-model写法--><my-component type="text" v-model="value"><!--展开语法糖后的写法--><my-component type="text" :value="value" @input="value = $event.target.value"><!--默认针对原生组件input事件，但是如果子组件定义了针对事件model: {
2021-10-18 10:40:31
158
原创 $router 和 $route的区别
一、router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。举例：history对象$router.push({path:'home'});本质是向history栈中添加一个路由，在我们看来是切换路由，但本质是在添加一个history记录方法：$router.replace({path:'home'});//替换路由，没有历史记录.
2021-10-16 22:51:15
208
原创 Git 常用命令速查表(图文+表格)
一、 Git 常用命令速查git branch 查看本地所有分支git status 查看当前状态git commit 提交git branch -a 查看所有的分支git branch -r 查看远程所有分支git commit -am "init" 提交并且加注释git remote add origin git@192.168.1.119:ndshowgit push origin master 将文件给推到服务器上git remote show origin 显示远程库origi
2021-10-14 21:04:36
1619
1
原创 当运行vue-admin-template时都加载了什么组件
Vue 组件思维图解项目组件分析 1.程序入口 - 入口html : public/index.html - 入口js脚本：src/main.js - 顶层组件：src/App.vue - 路由：src/router/index.js核心是index.html解析时 src 下的内容动态解析为 app.js原型时 ma...
2021-10-13 18:56:38
132
原创 购物车渲染
// 创建路由import axios from 'axios'const instance = axios.create({ baseURL: 'https://www.fastmock.site/mock/37d3b9f13a48d528a9339fbed1b81bd5/book'})export default instance// 创建获取数据方法import request from '../utils/request'export const getD.
2021-10-02 16:08:08
51
原创 购物车案例
<template> <div> <h1>案例：购物车就算</h1> <ul> <li>手机：价格<input type="text" v-model.number="TelPrice"> 数量<input type="text" v-model.number="TelNum"> 小计： {{telSum}} 元 .
2021-10-02 00:02:13
49
转载 Vue-生命周期8个钩子函数
<body> <div id="app"> <h3 id="h3">{{msg}}</h3> <input type="button" value="修改msg" @click="msg='No'"> </div> <script> var vm = new Vue({ el:'#app', data:{.
2021-09-30 08:46:10
105
原创 vs-code 常用快捷键
快速打开文件「Quick open」Mac:Command+PLinux/Windows：Ctrl+P拆分编辑器「Split Editor」Mac:Command+\或者2,3,4Windows:Shift+Alt+\或者2,3,4Linux:Shift+Alt+\或者2,3,4快速打开和关闭侧边栏「Opening and Closing the Sidebar」Mac:Command+BWindows/Linux:C...
2021-09-29 22:09:04
230
原创 数组的常用方法
// 前、后添加，前、后删除push() // 后添加，返回值是新数组的长度pop() // 后删除，返回值是删除的那个值shift() // 前删除，返回值是删除的那个值unshift() // 前添加，返回值是新数组的长度// 索引find() // 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefinedfindIndex() // 返回数组中满足、的第一个元素的索引。若没有找到对应元素则返.
2021-09-29 21:59:58
34
原创 Vuex 的5个要点及辅助函数 map
Vuex 的使用impore Vue from "vue"impore Vuex from 'vuex'Vue.use('Vuex')export default new Vuex.store({ state:{}, mutations:{}, getters:{} actions:{}, modules:{}})// 在 main.js 在挂载// ...其他省略import stote from './store'new Vue({ store, .
2021-09-29 19:52:08
80
原创 vuex课上笔记及作业
vuex课上笔记vuex 是什么？ 独立于组件体系之外的状态管理模式，采用集中式存储，响应式， 使用场景：大项目Vuex的学习内容 state:统一定义公共数据（类似于 data） ---保存公共数据 mutations:使用它来修改数据（类似于methods） --- 修改数据 getters: 类似于computed(计算属性，对现有的状态进行计算得到新的数据) ---计算数据 actions:发起异步请求 ---发起请求 module
2021-09-28 21:42:26
215
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人