liyongchunscr的博客

原创 Vue3状态管理库——Pinia

Vue3状态管理库——Pinia

原创 全局Vue组件定义的三种方式

注意1.如果使用Vue.component定义全局组件的时候，组件名称使用了驼峰命名，则在引用组件的时候，需要把大写的驼峰改为小写的字母，同时，两个单词之前使用-链接；2.不论是哪种方式创建出来的组件,组件的template属性指向的模板内容,必须有且只有唯一的一个根元素。1.2使用Vue.component(‘组件的名称’,创建出来的组件模板对象)第一个参数组件的名称,引用组件的时候,就是一个HTML标签形式来引入的。1.1使用Vue.extend来创建全局的Vue组件。...

原创 v-cloak指令的使用

v-cloak原理是先通过样式隐藏内容，然后在内存中进行值的替换，将替换的内容再反馈给界面，数据渲染完场之后，v-cloak属性会被自动去除。v-cloak指令常常用在插值表达式的标签中，因为它可以解决当网络加载很慢时，或者频繁渲染时候，页面就会显示出源代码的情况。然后，在css中设置v-cloak的属性为display为none。首先，在差值语法所在的标签处加上v-cloak指令。v-cloak的使用场景。...

原创 开机自启动浏览器并全屏打开网站

环境：windows11、chrome、网站地址查看安装路径把目标路径后面加上之后的参数右键桌面chrome快捷方式，修改目标： 用户数据保存目录 终极全屏模式 Alt+F4或者Ctrl+w退出此模式 禁用手指缩放 禁止跳出翻译 需要打开的链接禁用手指拖拽 浏览器地址栏输入： 修改Overscroll history navigation 为 disabled禁止文字选取在网站CSS中加入设置windows自动登录win + r 打开运行窗口，输入;取消选择 “要使用本机，用户

原创 js一些实用的小功能

js一些实用的小功能

转载 什么是跨域 , 跨域解决方法

一、为什么会出现跨域问题出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）二、什么是跨域当一个请求url的协议、域名、端口三者

原创 去除element table表格所有边框

在表格外层包一层自定义的div class="table-wrapper"，利用三箭头深度修改/* *表格背景透明 */ /* //透明化整体 */ .table-wrapper /deep/.el-table,.el-table__expanded-cell { background-color: transparent !important; } /* //透明化行、单元格,删除表头下横线 */ .table-wrapper /deep/ tr, .table-wrapper /.

原创 vue3 权限菜单( 树形菜单)无限循环

在系统开发过程中，最常见的一个需求就是权限控制了，大到整个系统的用户权限的管理，小到某个状态下操作权限的判断。其中最常见的操作就是权限的添加、删除、鉴权等，那么有什么简单的方法可以去控制这些权限呢？这个项目是根据后台返回的用户可访问的id来判断用户是否有权限来更改这个页面首先看一下后台返回的数据格式，一维数组需要我们把数据进行使用递归算法动态渲染不定层级的菜单将一维数组通过递归生成el-tree所需要的树形结构数组。...

原创 vue3，echarts图表的使用

首先是先引入echarts图表第一步： 安装npm install echarts --save在main.js引入import { createApp } from 'vue'import App from './App.vue'import router from './router'import store from './store'import axios from 'axios'import * as echarts from 'echarts' const

原创 vue3 百度地图marker图片引入

动态引入图片require()和import()一、require// html<img :src="imgList[0]" />// xxx.jslet imgList = [ require('../images/a.png'), require('../images/b.jpg')]let imgName = 'a'; let imgAllName = 'a.png';// example 1let imgUrl = require('...

转载 :nth-child和:nth-of-type的区别

nth-of-type与nth-child的区别，对于初学者来说是一个比较头疼的问题，也是一个初级前端常见的面试题，那么nth-of-type与nth-child有什么区别呢？下面带你彻底弄懂它们之间的区别。MDN上的概念：某个元素:nth-of-type(n)这个CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。某个元素:nth-child(n)这个CSS 伪类首先找到所有当前元素的兄弟元素，, 用 n 来筛选出在当前元素的兄弟元素节点的位置。我们可以注意到

原创 html总结常见问题

1. DOCTYPE 的作用是什么？DOCTYPE文档类型声明，位于文档中的第一行，告诉浏览器的解析器 什么文档标准解析这个文档。DOCTYPE不存在或格式不正确，会导致文档以兼容模式呈现。2. 标准模式与兼容模式各有什么区别？标准模式的排版中和JS运作模式都是以该浏览器支持的最高标准运行在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器 的行为以防止站点无法工作3. HTML5 为什么只需要写DOCTYPE ，而不需要引入 DTD？HTML5 不基于 SGML，因此不需要

原创 前端HTML拓展知识点

1. DOCTYPE 的作用是什么？DOCTYPE文档类型声明，位于文档中的第一行，告诉浏览器的解析器 什么文档标准解析这个文档。DOCTYPE不存在或格式不正确，会导致文档以兼容模式呈现。2. 标准模式与兼容模式各有什么区别？标准模式的排版中和JS运作模式都是以该浏览器支持的最高标准运行在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器 的行为以防止站点无法工作3. HTML5 为什么只需要写DOCTYPE ，而不需要引入 DTD？HTML5 不基于 SGML，因此不需要对 DT

转载 前端html、css、js题目，知识点总结

1、以下是HTML5新增的标签是： A、<aside> B、<isindex> C、<samp> D、<s>2、以下不是HTML5的新增的标签是： A、<bdi> B、<xmp> C、<command> D、<dialog>3、以下不是HTML5新增的API是 A、Media API B、Command API C、History AP...

转载 小程序自定义组件

之前做小程序开发的时候，对于开发来说比较头疼的莫过于自定义组件了，当时官方对这方面的文档也只是寥寥几句，一笔带过而已，所以写起来真的是非常非常痛苦！！好在微信小程序的库从 1.6.3 开始，官方对于自定义组件这一块有了比较大的变动，首先比较明显的感觉就是文档比以前全多了，有木有！（小程序文档），现在小程序支持简洁的组件化编程，可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中复用，提高自己代码的可读性，降低自己维护代码的成本！本篇文章就是手把手教你实现小程序中自定义组件，坐稳啦~...

原创 js判断输入数据长度，手机号，邮箱，及其他

js判断汉字字数的//****************************************************************//* 名　　称：DataLength//* 功 能：计算数据的长度//* 入口参数：fData：需要计算的数据//* 出口参数：返回fData的长度(Unicode长度为2，非Unicode长度为1)//***************************************************************...

原创 uni-app获取当前时间日期及之后7天和星期几

获取当前时间：//获取当前年月日var now = new Date();var year = now.getFullYear(); //得到年份var month = now.getMonth()+1;//得到月份var date = now.getDate();//得到日期data = year + "年" + month + "月" + date + "日" ;从当前时间往后7天var check=[];for (let i = 0; i < 7; i++) {.

原创 小程序-调取录音权限/拒绝后提示重新授权

我写在 onLoad中调用, 页面渲染后，直接提示麦克风授权，当全部点取消时，要使用可以直接调用impower()onLoad: function (options){ this.impower()},methods: {//授权impower(){ var t = this; wx.authorize({ scope: 'scope.record', success (res){ console.log("录音授权成功",res); //app.g

原创 uni-app 点击预览图片

uni-app 点击小图，放大预览<template><view class="main-wrap"> <view class="img-wrap"> <image :src="handleClick.imageUrl" @click="TanPreviewImage(handleClick.imageUrl)" mode=""></image> </view></view>

原创 Element-ui（el-table、el-pagination）实现表格分页

<div class="pagination"> <el-pagination background layout="total, sizes, prev, pager, next" :current-page="query.pageIndex" :page-size="query.pageSize" :page-sizes="pageSizes" :total="query.pageTotal" @size-change="handleSizeChange.

原创 Vue中html导出docx文件和table导出excel

html导出docx文件方法一、技术实现：fileSaver.js+html-docx-jshtml-docx.js,这个比较是16年的插件，不适合现在的，主要就是with（obj）{}这个已经不符合规范,有的框架不适用1.npm安装$ npm install --save html-docx-js$ npm install --save file-saver2.引入import htmlDocx from 'html-docx-js/dist/html-docx';imp.

原创 vue3中购物车单选，全选计算总价购买

购物车的全选，单选，计算总价钱先用请求的数据循环输出到页面，在数组中为每条数据input加一个状态在每条数据的input中加点击事件传下标计算方法封装到一个函数中，计算选中状态的商品，在每次使用时调用，点击单个商品卡片的时候传这个当前商品的下标，然后在事件中检查当前信息中存在不存在选中的属性如果不存在则给这个信息中添加这一属性，如果该商品存在这一属性则状态取反循环数组判断为true的数量是否与数组长度相等，是则全选框也为true，当有一个单选为false时全...

原创 vue页面间传递数组参数

原创 Vant组件的基础应用

1.安装1.1通过 npm 安装在现有项目中使用 Vant 时，可以通过npm或yarn进行安装：# Vue 2 项目，安装 Vant 2：npm i vant -S# Vue 3 项目，安装 Vant 3：npm i vant@next -S1.2通过脚手架安装在新项目中使用 Vant 时，推荐使用 Vue 官方提供的脚手架Vue Cli创建项目并安装 Vant。# 安装 Vue Clinpm install -g @vue/cli# 创建一个项...

原创 vue介绍

vue介绍前端三大框架：Angular、React、Vue,目前React最火,Vue和Angular不相上下,但发展趋势vue更大,在大型超大型web应用开发上，看好Angular,小型应用上，看好vue,个性化需求、中型应用，更倾向react 渐进式框架：vue只提供数据驱动和组件开发等核心功能,可以根据需要去安装第三方库实现丰富的功能,比如Vuex、axios、vue-routerVue.js目前最流行的的一个前端框架，三大主流前端框架[1]之一。 AngularJS是Vu...

原创 数组创建和操作数组方法

数组三要素 : 元素 , 下标 , 长度创建数组的基本方式有两种方式一：使用Array()构造函数 语法： var colors=new Array();注：小括号可直写数组的项目数量var colors=new Array(5);或者数组包含的具体值 var colors=new Array(1,2,3,5,0,10);方式二：使用数组字面量表示法 语法： var cols=[10,15,12,3,5,6,1];var cols=[];两种创建数值的方式不同之处在于 : new Array

原创 防抖和节流

什么是防抖(⭐⭐⭐)防抖策略（debounce）是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。防抖的应用场景：如淘宝搜索框，用户在输入框连续搜索一行字的时候可以通过防抖策略，知道用户把搜索内容全部打出才触发执行请求，这样可以有效减少请求的次数，节约请求资源好处：用户在多次触发某事件的情况下只会执行最后一次 步骤： 1. 定义一个防抖动的 timer延时器并置空 2.获取页面中input DOM元素并绑定...

原创 js实现localStorage储存多条数据（对象）

1，先获取到浏览器里面的key值 1 varGame_Data = JSON.parse(localStorage.getItem('loc'))// 之前存储 　2，判断这个值存不存在 1 2 3 4 5 6 7 8 9 10 if(Game_Data ==null) { //不存在就建立一个新的数组（第一次进入浏...

转载 十种常见排序算法

0、算法概述0.1 算法分类十种常见排序算法可以分为两大类：比较类排序：通过比较来决定元素间的相对次序，由于其时间复杂度不能突破O(nlogn)，因此也称为非线性时间比较类排序。 非比较类排序：不通过比较来决定元素间的相对次序，它可以突破基于比较排序的时间下界，以线性时间运行，因此也称为线性时间非比较类排序。0.2 算法复杂度0.3 相关概念稳定：如果a原本在b前面，而a=b，排序之后a仍然在b的前面。 不稳定：如果a原本在b的前面，而a=b，排序之后 a 可能会出现在 .

转载 GET和POST两种基本请求方法的区别

GET和POST是HTTP请求的两种基本方法，要说它们的区别，接触过WEB开发的人都能说出一二。最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。你可能自己写过无数个GET和POST请求，或者已经看过很多权威网站总结出的他们的区别，你非常清楚知道什么时候该用什么。当你在面试中被问到这个问题，你的内心充满了自信和喜悦。你轻轻松松的给出了一个“标准答案”： GET在浏览器回退时是无害的，而POST会再次提交请求。 .

原创 前端面试题

CSS/HTML1.flex布局采用Flex布局的元素，称为Flex容器（flex container)，简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目适用场景：多列盒子浮动时可以采用弹性盒2.grid布局CSS Grid（网格）布局，是一个二维的基于网络的布局系统。Flexbox 的出现很大程度上改善了我们的布局方式，但它的目的是为了解决更简单的一维布局，而不是复杂的二维布局（实际上 Flexbox 和 Grid 能协同工作，而且配合得非常好）。Grid(网格) 布局是

原创 最全的前端程序员常用英语词汇

Aalign 对齐 active 激活 absolute 绝对 alpha 图像通道 animate 动画 animation 动画片 alert 提醒 add 加 append 添加 after 之后Bback 超过范围的三次方缓动 bounce 指数衰减的反弹缓动 before 在...之前 blur 当输入框失焦的时候触发 BOM 全称 Browser Object Model 浏览器对象模型 blur 失焦 bind 绑定 background 背景 b

转载 对Promise的理解

一、Promise是什么？Promise是最早由社区提出和实现的一种解决异步编程的方案，比其他传统的解决方案（回调函数和事件）更合理和更强大。ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。二、Promise是为解决什么问题而产生的？promise是为解决异步处理回调金字塔问题而产生的三、Promise的两个特点1、Promise对象的状态不受外界影响1）pending 初始状态

原创 git版本管理和使用 2

git 命令速查表Git分支几乎所有的版本控制系统都以某种形式支持分支。 使用分支意味着你可以把你的工作从开发主线上分离开来，以免影响开发主线。Git 的master分支并不是一个特殊分支。 它跟其它分支没有区别。 之所以几乎每一个仓库都有 master 分支，是因为git init 命令默认创建它，并且大多数人都懒得去改动它。在本章节我们会学习到关于分支的相关命令，具体如下：查看分支创建分支切换分支推送至远程仓库分支合并分支删除分支查看分支列出所有本地分支...

原创 git版本管理和使用 1

一：安装 Git在使用Git前我们需要先安装 Git。Git 目前支持在 Linux/Unix、Windows，Mac平台上运行。可点击 Git官网 下载安装程序。1：如何在 Windows 上安装 Git第一步：进入官网后，点击 Windows，页面跳转第二步：跳转后如下图所示因为访问的是外网，所以网速会很慢很慢。我下载好的安装包放到了大家都懂的地方，之前保留的 Git-2.21.0 版本被我不小心给删了，这里我重新上传一个 Git-2.23.0-64-bit 版本的..

原创 本地存储localStorage

HTML中可以使用javascript操作window的localStorage对象进行键值对形式的本地数据存储，实现数据共享和数据持久化，localStorage的数据永远不会过期，除非自己删除，这样可以实现在不同html之间进行数据信息传递：1.判断本地存储是否可用：if(window.localStorage) {// localStorge可用}else {// localStorge不可用}2.存储数据：// 获取本地存储对象var localStorage =wi...

原创 简述什么是jquery

1. JavaScript库javaScript库：是一个封装好的特定的集合（方法和函数）在这个库中封装了很多预先定义好的函数在里面，比如动画animate、hide、show、比如获取元素等简单理解：就是一个js文件，里面对我们原生js代码进行了封装，存放到里面，这样我们就可以快速高效的使用这些封装好的功能比如jQuery，就是为了快捷方便的操作DOM，里面基本都是函数（方法）常见的JavaScript库：jQuery、Prototype、YUI、Dojo、ExtJS、移动端的zepto，这些库

原创 this指向详解

this指向详解六月第一篇文章，也是我第一次接触思维脑图，并尝试将它运用到平时的学习中，我们共勉！思考 + 导图 + 示例代码 => 船新版本目录前言+思考题一、this的指向二、call和apply三、模拟实现一个call四、bind五、结尾前言+思考题记得当时找实习的时候，总是会在简历上加上一句——熟悉Js，例如this指向、call、apply等…而每次投递简历时我都会经历如下步骤面试前，去问度娘——this指向可以分为哪几种啊～、call和apply的区别是什么

原创 jquery.ajax()

前置知识：ajax原理，json字符串进行信息传递。Ajax主要的功能是实现了浏览器端 异步 访问服务器：通过浏览器的XMLHttpRequest对象发出小部分数据，与服务端进行交互，服务端返回小部分数据，然后更新客户端的部分页面。json是Ajax发送小部分数据的一种轻量级数据格式，可以简单易懂的给服务器或者浏览器交互数据，包括json对象，json数组对象。一、jquery.ajax()jquery 库中已经封装了ajax请求的方法。jquery.ajax([settings])。发

原创 js按钮确认删除提示

第一种方法：html代码：1 <a href="" οnclick="javascript:return del();">删除</a>js代码：1 function del() {2 var msg = "您真的确定要删除吗？\n\n请确认！";3 if (confirm(msg)==true){4 return true;5 }else{6 return false;7 }8 }第二种方法：1 <input type="