写法vue2 vue js
js的十种设计模式
01.Abstract Factory Abstract Factory创建由共同主题相关的对象。在面向对象编程中，工厂是创建其他对象的对象。抽象工厂抽象出新创建的对象共享的主题。 02.Builder Builder 模式允许客户端仅通过指定类型和内容来构建复杂对象，细节完全对客户隐藏。 03、F ......
vue 父子组件生命周期执行顺序
挂载阶段执行顺序为：父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted 更新阶段执行顺序为：父beforeUpdate -> 子b ......
vue3+element-plus Calendar 日历组件添加农历、节假日
创建一个vue文件 <script setup lang='ts'> import { ref } from "vue"; import calendar from "./lunarDay";//引入农历、节假日计算方法 defineOptions({ name:'CusCalendar' }) c ......
js深拷贝
js深拷贝 在JavaScript中，有多种方法可以实现对象的深拷贝，下面介绍几种常用的方式： 手动遍历对象进行复制 function deepCopy(obj) { if (typeof obj !== 'object' || obj null) { return obj; } let newOb ......
vue请求后端数据和跨域问题
最近遇到的一个问题 后端写好的接口，前端怎么获取数据 这是我后端的接口：GET 接口 这是我前端运行的项目地址： 简单使用： 咱门前端使用 颇受好评的 axios 来发起请求 这是它的官网：https://www.axios-http.cn/ 不过要在vue中使用它，就需要先安装 打开终端 输入一下 ......
vue8小时带刻度的时间轴，根据当前时间实时定位
效果图： 需求： 1 开始时间、结束时间可配置2 时差固定8小时3 根据当前时间初始化位置4 每隔5s刷新位置5 超过结束时间停止刷新 HTML: <div class="time-axis"> <div class="startTime">{{start_time}}</div> <div cla ......
常用JS
替换html str.replace(/<[^>]+>/g, '') 正则替换ALL str.replace(/ /g, '') 正则替换所有空位 str.split(/[\t\r\f\n\s]*/g).join('') ......
webstorm配置了vite.config.js还是识别不了
不是webpack，而是vite 1.根目录新建tsconfig.json，或者jsconfig.json 2.复制代码 { "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["./src/*"] } } } ......
vue3+ swiper8
swiper是一个非常好用的图片切换组件，但是vue3 + swiper8 版本的文档看上去会有点懵逼（一部分是因为版本太多了，一部分是因为很少用） 此处记录下我的使用方法： 安装： npm i swiper 按照官网来使用： html部分：（基本上常用的也就这些啦，在复杂的就真的要去啃书啦） <s ......
vue实现下拉懒加载
<template> <div class="ele-body infinite-wrapper" style="height: calc(100vh - 235px); overflow: auto" > <div class="columns" v-loading="loading"> <div ......
html绑定事件写法
1. 无参绑定 <div onclick="onClick()" ></div> 2. 传入源dom对象 <div onclick="onClick(this)" ></div> 3. 传入事件对象 <div onclick="onClick(event)" ></div> ......
Vue 前端开发团队风格指南（史上最全）
Vue官网的风格指南按照优先级（依次为必要、强烈推荐、推荐、谨慎使用）分类，本文根据项目实际情况整理了一份适用于团队开发的vue风格指南，供大家参考。 ......
VUE ELEMENT-UI无法用右上角的“X”关闭，取消按钮可用
VUE ELEMENT-UI无法用右上角的“X”关闭，取消按钮可用 原因：清空方式有问题 我定义的要打开的表单： addElementForm: { title: "配置产品要素", dialogFormVisible: false, prod_name: [], prod_code: [], us ......
pom非常好用的写法，统一管理springboot有关依赖的版本
相信大家使用maven的时候，每引用一个依赖都要写一遍版本号，当然这是必要的，现在springboot非常的主流，每个springboot有关的依赖的版本又是一至的 我们大家就不需要重新去再写一遍了，可以引入依赖 spring-boot-dependencies，这样后面所有的有关springboo ......
实现一个js平滑滚动到顶部的小功能
// 平滑滚动到顶部 // scrollDom 出现滚动条，要滚动的元素 // speed 平滑滚动的速度 number类型 const scrollToTopSmooth = (scrollDom, speed) => { let scrollTop = scrollDom.scrollTop f ......
vue3拾遗（不定期更新）
props传参 会自动跳过key/ref/...等本身就有特殊意义的属性名 路由跳转 当路由到同一个路由组件时，会依次触发onBeforeUpdate、onUpdated生命周期钩子 ......
nginx部署vue项目显示空白页
报错提示: index-fbb90c85.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". ......
页面上的元素无法定位时可以引用js语法
display='block'：显示 display='none'：隐藏 js = "document.getElementsByClassName(\"del-icon el-icon-delete\")[0].style.display='block';"#调用js脚本self.driver.e ......
解决vue中路径中的多一个#
本文要解决的问题是在vue项目中，主路径和vue路径中多一个# 这个东西只需要改一个这个就行 vue-router的mode: ‘history’ const router = new VueRouter({ mode: 'history', routes: [...] }) ......
C#设计模式18——迭代器模式的写法
是什么： 迭代器模式是一种行为型设计模式，它允许客户端通过一种统一的方式遍历集合对象中的元素，而无需暴露集合对象的内部结构。 为什么： 使用迭代器模式可以使得客户端程序与集合对象解耦，从而可以更加灵活地对集合对象进行遍历操作。此外，迭代器模式还可以提高代码的复用性，简化客户端程序的代码量，使得代码更 ......
C#设计模式17——责任链模式的写法
是什么： 责任链模式是一种行为型设计模式，它允许对象组成一个链并依次检查另一个对象是否可以处理请求。如果一个对象可以处理请求，它处理请求，并且负责将请求传递给下一个对象，直到请求被处理为止。 为什么： 责任链模式可以降低系统中对象之间的耦合度，并提高系统的灵活性和可维护性。同时，它还可以减少了客户端 ......
C#设计模式16——中介者模式的写法
是什么： 中介者模式是一种行为型设计模式，它定义了一个中介者对象来封装一系列对象之间的交互。中介者模式可以使得对象间的交互更加松耦合，避免了对象之间的直接依赖，从而使系统更加灵活、易于扩展和维护。 为什么： 中介者模式可以将系统中的对象之间的交互行为进行抽象，从而可以提高系统的可拓展性、可维护性和可 ......
C#设计模式15——观察者模式的写法
是什么： 观察者模式是一种设计模式，它定义了对象之间的一种一对多的依赖关系，使得当一个对象状态发生改变时，它的所有依赖者都能够得到相应的通知并作出相应的反应。观察者模式也被称为发布-订阅模式。 为什么： 观察者模式可以实现对象之间的松耦合，从而使得对象更容易扩展和维护。同时，它也可以帮助我们实现一些 ......
C#设计模式14——模板方法的写法
模板方法（Template Method）是一种设计模式，它定义了一个操作中的算法的骨架，将某些步骤推迟到子类中实现，从而使得子类可以在不改变算法骨架的情况下重新定义算法的某些步骤。 作用： 使用模板方法可以使得代码的重复度降低，同时也能够避免由于算法中某个特定步骤的改变导致整体算法需要改变的情况。 ......
用print-js实现打印功能时element table组件打印不全的问题
插件下载： npm install --save print-js 解决方案，修改print.js里面的 getHtml // 打印类属性、方法定义 /* eslint-disable */ const Print = function (dom, options) { if (!(this ins ......
C#设计模式13——建造者模式的写法
1. 什么是建造者模式？ 建造者模式是一种创建型设计模式，它通过将一个复杂的对象分解为多个简单的对象并按照一定的顺序进行组装而创建出一个复杂的对象。这样可以使得构造过程更加灵活，同时也可以隐藏创建过程的复杂性。 2. 建造者模式的使用场景？ 建造者模式适用于以下场景： (1) 当需要创建的对象非常复 ......
C#设计模式11——代理模式的写法
1. 什么是代理模式？ 代理模式是一种结构型设计模式，它允许通过代理对象来控制对真实对象的访问，以提供额外的功能或控制访问权限。 2. 代理模式的作用是什么？ 代理模式可以为对象提供保护代理、远程代理、虚拟代理和智能引用四种不同的实现方式，以适应不同的应用场景。代理模式还可以用于延迟对象的创建和初始 ......
C#设计模式10——享元模式的写法
1. 什么是享元模式？ 享元模式是一种结构型设计模式，目的是通过共享对象来尽量减少内存使用和对象数量。它通过将对象分为可共享的和不可共享的来实现这一目的。 2. 为什么要使用享元模式？ 使用享元模式可以大大减少系统中对象的数量，从而减少了内存的使用。在对象数量较大，且需要相同状态的对象在内存中存在多 ......
vue移动端实现调用相机扫描二维码或条形码
一、首先下载需要的插件 npm install @zxing/library --save 二、假设场景：页面上有个按钮，点击触发扫码功能 @click='scanCode()'，在 methods 写入该方法。 scanCode() { console.log('浏览器信息', navigator ......