shimeifang11的博客

原创 react router V6

文章目录一. 简介二. 对比V5三. 用法详解1. 一级路由与多级路由2. 路由重定向3. 嵌套路由4. 声明式导航与编程式导航5.动态路由6.路由拦截7.路由模式8.withRouter / 类组件跳转方法9. 路由懒加载10. useRoutes钩子配置路由一. 简介react-router ：核心模块，包含 React 路由大部分的核心功能，包括路由匹配算法和大部分核心组件和钩子。react-router-dom：React应用中用于路由的软件包，包括react-router的所有内容，并添加

原创 基于vite搭建一个vue3

1、安装pnpmnpm install pnpm -g2、开始创建vite项目pnpm create vite按照步骤创建项目名称、选择框架cd vue3-vite-projectvue-routerpnpm install vue-router@4vuexpnpm add vuex@next安装UI库naive-uipnpm add naive-uiNaive UI安装axiospnpm add axios安装 mock 工具.

原创 vue3属性以及新用法

之前零零散散的用vue3写一些案例，一直也没有做过任何总结，这段时间忙里偷闲写点东西吧。vue3新语法统一写在 <script setup lang="ts">，这种组合式API写法，跟vue2完全不一样【vue2采用option api】。1.ref =》基本数据类型响应 定义的数据需要使用value去获取值const iptValue = ref('html')const list = ref(['css', 'js'])console.log(iptValue.v..

原创 实现截图粘贴上传、拖拽上传

之前上传方式是使用element-ui的el-upload,现在需要添加一个需求功能实现截图粘贴也可以上传。直接上代码：<div> <div>附件</div> //为了第一次截屏，粘贴在对应组件上 <div id="editable" contenteditable="true"></div> <el-upload ref="upload

原创 elementUI多级联动el-cascader动态加载数据实现

vue2+elementUI+webpack项目，由于业务需求，需要一个多级联动的省市区的选择搜索项，由此做了一个搜索的通用组件一开始直接引入elementUI的el-cascader动态加载数据实现<el-cascader :props="props"></el-cascader><script> let id = 0; export default { data() { return { props: {

原创 ES6的Map和Object区别

/*Map和Object1、创建方式：map:new Map() ==>[[key,value],[key2,value2]]object:Object.create(),{},new Object()三种方式创建 ==> {key,value}2、键名 keymap的key任意值；object的key基本数据类型，是字符串。对象key：解决同名属性问题；其实map键存的是内存地址堆中，引用...

原创 两个同名class执行顺序

<div class="red blue">123</div><div class="blue red">123</div> .blue { color: blue } .red { color: red }两个DIV的颜色分别是？其实这个跟执行顺序有关：style样式 执行到最后的.red，替换掉前面的.blue类的样式style样式优先级CSS 7 种基础的选择器： ID 选择器， 如 #id{.

原创 2021面试题库整理集

一，html与css1，页面导入样式，使用link与@import有什么区别？(1) 从属关系：link是html标签，@import是css提供的(2) 加载差异：页面加载时，link会同时加载，而@import引入的css会在页面加载完成后加载(3) 兼容性，@import不兼容ie5以下浏览器(4) Link可以通过js操作dom插入link标签改变样式，@import不能2，描述块级元素与行内元素的区别？行内元素与块级元素有哪些？Img是什么元素？如何制定元素以块级元素展示

原创 Promise

// Promise 构造函数包含一个参数和一个带有 resolve（解析）和 reject（拒绝）两个参数的回调。在回调中执行一些操作（例如异步），如果一切都正常，则调用 resolve，否则调用 reject。let p1 = new Promise((resolve, reject) => { setTimeout(() => { // console.log(1) resolve(1) }, 1000)})let p2 = new Prom...

原创 vue组件中刷新数据自动滚动到顶部

项目中有个需求，数据变动时，滚动条自动滚到顶部在监听数据调接口时触发一下置顶方法：this.backTop(); // 置顶 backTop() { let scrollTop = this.$refs.detailDrawer.$refs.drawer.pageYOffset || this.$refs.detailDrawer.$refs.drawer.scrollTop || this.$refs.detailDraw.

原创 VUE单页面引入CSS、JS（CDN链接）

<template> <div class="my-page"> <remote-js cdn="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></remote-js> <remote-css cdn="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">&lt.

原创 微信小程序跳转报错errMsg: “navigateTo:fail webview count limit exceed“

解决方案：wx.navigateTo 换成wx.redirectTo首先我们可以大概理解一下这个错误信息的大致意思：”超出了页面次数限制“于是我去查找关于 wx.navigateTo 的具体说明，发现问题就是出在这里。wx.navigateTo以及 < navigator >组件实现页面跳转，最多只能是五层。当页面路径大于五层，超出了限制，则会报错。解决：可以考虑采用 wx.redirectTo 。 wx.redirectTo的执行行为是：关闭当前所在页面，再跳转到...

原创 微信小程序安装moment报错VM182 WAService.js:2 Error: module “pages/mine/myWish/detail/moment.js“ is not define

安装moment时，执行命令npm install --production moment后项目中报错VM182 WAService.js:2 Error: module "pages/mine/myWish/detail/moment.js" is not define引入包文件找不到解决方案：点击开发者工具中的菜单栏：工具 --> 构建 npm参考链接：npm 支持 | 微信开放文档...

原创 yarn : 无法加载文件 C:\Users\smf\AppData\Roaming\npm\yarn.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsof

在win10 下安装yarn后，在编辑器中检查yarn的安装的时候会出现：解决方法1：搜索powershell，以管理员方式运行powershell2：使用命令更改计算机的执行策略执行： set-ExecutionPolicy RemoteSigned...

原创 npm install 安装失败

npm install 安装失败一出现这个问题是因为npm版本过高导致的解决：回退一下npm版本npm install [email protected] -g

原创 vue内存溢出问题

每次更改.vue文件保存之后自动断开连接并提示：解决方法：

原创 vue使用el-table动态组件-slot自定义组件【插入某列按钮操作】

1、新建一个动态表格组件，CommonDynamicTable.vue代码如下：<template> <div> <el-table :data="tableData" size="mini" fit border highlight-current-row ref="multipleTable" stripe :header-cell-style=" {background:'rgba(24

原创 上传项目到gitee

一、注册gitee仓库gitee官网 创建自己的仓库二、将创建好的仓库pull拉取到本地1、创建一个空文件2、空文件右键点击，打开git bash3、在git bash 中输入：git clone你的仓库地址。克隆到本地git clone https://gitee.com/brittany123/one_day_a_day.git三、将本地项目上传到gitee仓库中1、打开 git bash，输入命令 git init(在本地目录中创建新的 Git 仓库...

原创 git命令整理-第三天

1、添加远程库2、从远程库克隆

原创 git命令整理-第二天

1、版本回退第一天已经学了git add 和 git commit这两个命令，对修改文件提交到git版本库中，执行命令：$ git add readme.txt$ git commit -m "append GPL"[master 1094adb] append GPL 1 file changed, 1 insertion(+), 1 deletion(-)commit 对修改文件保存一个快照【版本记录】，想要恢复某一个快照commit继续工作即版本回退第一：确认要回退到哪个版本，

原创 git命令整理 - 第一天

1、安装git git官网下载安装2、创建版本库版本库：也叫仓库，可以简单理解成一个目录，这个目录里面的所有文件都可以被GIT管理起来，每个文件的修改、删除，gti都能跟踪，以便任何时刻都可以追踪历史，或者在将来某个时刻可以“还原”第一步：创建一个版本库，创建一个空目录：$ mkdir learngit$ cd learngit$ pwd/Users/michael/learngit第二步：$ git init 把这个目录变成git可以管理的仓库$ git init...

原创 JavaScript基础-执行上下文

JavaScript的执行上下文定义简单定义执行上下文是评估和执行JavaScript代码的环境的抽象概念。每当JavaScript代码在运行的时候，它都是在执行上下文中运行。执行上下文的类型全局执行上下文=》默认基础的上下文，任何不在函数内部的代码都在全局上下文中。它会执行两件事：创建一个全局的window对象（浏览器情况下），并且设置this的值等于这个全局对象。一个程序中只会有一个全局执行上下文中。 函数执行上下文 =》每当一个函数被调用时，都会为该函数创建一个新的上下文。每个函数都有它

原创 谈谈我对js继承的几种实现方法

1、原型链继承 =》SubFun.prototype = new SuperFun()首先谈谈原型、构造函数和实例以及三者之间的关系原型：所有对象都有_prop_属性构造函数：其实就是函数，其特点就是函数名首字母大写和得使用new实例对象调用；三者关系：创建构造函数同时会自动创建一个property原型属性，每一个property属性都有constructor属性，这个constructor属性指向得就是构造函数搞清楚上面三者关系，回归正文，原型链继承方法//构造函数实现通用属

原创 持续更新我对算法理解

一、冒泡排序：两两比较，大的放后面，小的放前面；使用两个for循环，一个数就不用比了，所以第一个for循环遍历次数n-1次，第二个for比较次数nfunction sort (arr,n){ let temp for(let i=0;i<n-1;i++){ for (let j=i+1;j<n;j++) { if(arr[i]<arr[j]){ temp = arr[j] .

原创 2020.6面试谈谈闭包理解

闭包基本上面试中都会被问到的一个问题，但是应该怎么回答才能让面试官满意呢，其实这个就看面试官了，这里不多说，先阐述我对闭包的理解。1、首先闭包定义：闭包就是能够读取函数内部的一个变量的函数。创建闭包方式：一个函数内部创建另一个函数；2、变量作用域：全局（函数外部）和局部变量，函数中声明的变量作用域：没有var声明就会变成全局变量；有var就是局部变量；函数可以用来创建函数作用域，函数就像一层半透明玻璃，里面可以看到外面，外面看不到里面的变量3、函数的生存周期全局变量：生存周期是永久的

原创 vue封装一个简单的toast,使用 Vue.extend+$mount

1、首先创建一个组件Toast.vue，代码如下<template> <div class="toast" v-if="show"> <div class="toast_text">{{text}}</div> </div></template><script>export default { data () { return { text:'

原创 Element-ui table表格去掉所有单元格边框

Element-ui table表格去掉所有边框,如下图：// 去掉表格单元格边框.el-table th{ border:none; }.el-table td,.customer-table th.is-leaf { border:none;}// 表格最外边框.el-table--border, .el-table--group{ border: none;...

原创 vue生成二维码的插件

vue生成二维码的两个插件第一种方法 qrcodejs2下载插件qrcodejs2：npm install qrcodejs2 --save<template> <div class="qrcode2"> <!-- 必须是id 和实例化的第一参数对应 --> <div class="qrcode_bg_...

原创 原型prototype使用

原型prototype加粗样式 <script> // 函数：原型 prototype // 每一个构造函数都有一个属性叫做原型(prototype)。这个属性非常有用：为一个特定类声明通用的变量或者函数。 // 在函数内定义的变量和函数如果不对外提供接口，那么外部将无法访问到，也就是变为私...

原创 vue中router在项目中引入跳转

1、多看看官网：https://router.vuejs.org/zh/guide/#htmlHTMLJavaScript// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)// 1. 定义 (路由) 组件。// 可以从其他文件 import 进来const Foo = { template: '<...

原创 vue-cli3.5.5使用AXIOS请求api

1、项目中安装axios：npm install axios2、在main.js中引入import axios from 'axios'import qs from 'qs'// 请求超时axios.defaults.timeout = 10000// baseurlaxios.defaults.baseURL = BASE_URL// post请求头axios...

原创 零基础开始搭建VUE项目

在网上也有很多教程，如何搭建vue项目，但觉得还是记录一下自己搭建的安装全过程吧，略显粗略一、安装1、下载node.js，官网：https://nodejs.org/en/2、cmd运行node -v出现版本号则安装成功。 查看npm版本：npm -v3、安装淘宝镜像（也可不安装，我没用过cnpm命令）：npm install -g cnpm --registry=h...

原创 使用VScode做VUE项目时VScode安装的插件

原创 vue中的v-model绑定数据深层次问题

vue有些赋值方式是非响应式的，页面不会刷新，可以参考下面（百度参考）：Vue 不能检测以下变动的数组：当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue当你修改数组的长度时，例如：vm.items.length = newLength当第一种情况需求时，可以使用this.$set(this.arr,index,newVal)...

原创 vue中el-form验证规则以及el-input输入框自动聚焦

在做项目的时候遇到一些问题，记录一下做个笔记。1、项目中有这样一个需求，打开一个弹框，弹框内容是一个表单的。当弹出一个弹框时会自动聚焦并做校验，此时我并不想弹框一打开就提示我要输入的必填字段，解决方案就是，在el-form加一个属性:validate-on-rule-change="false"，如下：<el-form ref="add_custome_form" :rul...

原创 vue下载，导入、导出excel文件

模板下载：后台给我返回的是url地址1、调接口获取dataUrl，下载模板window.open(dataUrl)downloadTemplateBtn (){api.getCustomerTemplate().then(res=>{console.log(res)if(res.code===20000){let dataUrl = res.data　window...

原创 js数组遍历map,forEach,every,some,filter区别和作用

不管你是一个高级或初级程序员，感觉都应该记录一下自己的学习点滴，也是一个学习过程，以前就是会用从来没总结过，现在有时间来写一下，写的不对的地方可以评论@我。言归正题，看下面总结：/*结论： * map:返回一个新数组，原数组不变，遍历数组每一项值，有三个参数item, index, arr * forEach:无返回值，若返回则值为u...

原创 经典面试变量声明提前-Foo.getName

function Foo() { var getName = function() { console.log(1); }; return this; } Foo.getName = fu...

原创 经典面试题解析-闭包

function fun(n, o) { console.log(o) return { fun: function(m) { return fun(m, n); } };...

原创 移动端web端优化（JavaScript）

一、设备检测// 这段代码引用自：https://github.com/binnng/device.js var WIN = window;var LOC = WIN["location"];var NA = WIN.navigator;var UA = NA.userAgent.toLowerCase();function test(needle) { return n...