- 博客(67)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 vue3 +Vite 解决项目中每个页面都引入生命周期函数
Vue3项目中，使用生命周期函数、ref等，在setup语法糖中，在每一个页面中都要引入一次，如果不引入就会报错。插件，在vite.config.js文件中进行配置，就不用每次在页面中使用时引入。
2025-02-18 14:50:51
127
原创 vue2 面试题
处理异步，当触发事件的时候，会通过dispatch来访问actions中的方法，actions中的commit会触发mutations中的方法从而修改state里的值，通过getter把数据更新到视图。vuex的state是响应式的，借助的就是vue的data，把state存到vue实例组件的data中。3.操作不同：vue进行了dom操作，我们只需关注数据即可，jq先获取dom对象，然后赋值，事件绑定等；4.子组件修改好数据，要把数据传递给父组件，可以用emit()方法；容器组件管数据，展示组件管视图；
2024-05-27 17:46:43
434
原创 vue3 项目中 前端实现下载模板 csv文件
做项目时遇到让前端实现模板下载功能，第一次碰到这种需求，记录一下。项目是使用的vue3，模板文件是放在public文件里的。
2024-05-16 12:02:39
427
原创 CSS 2022 增加的特性
1、容器查询@container：容器查询依据的是元素的父元素或者祖先祖先元素的大小。容器查询的属性有三个，分别是：使用浏览器，需要手动在页面开启设置。级联层：适用场景当我们需要覆盖组件原来的样式来应用我们自己的样式时，以前一般会用优先级更高的样式名覆盖，或者ID选择器或者嵌套多层或者!important来实现，而级联层可以很好的解决这个问题，如下：多个级联层的优先级顺序为越写在后面的优先级越高。2、伪类选择器:has() ：也可以叫做父类选择器，接受一个选择器组作为参数，通过它可以
2022-07-07 10:45:06
398
原创 Angular 启动项目报错
Angular 在webstorm中启动项目报错，如下：删除node_modules文件夹，重新安装依赖包，启动成功即可。再启动项目，报如下错误： 意思是JavaScript栈内存不够用，达到堆限制分配失败-JavaScript堆内存不足，执行如下命令即可：然后启动项目，启动成功。...
2022-07-05 14:29:11
1389
原创 Git 将本地代码上传到码云上
1.在码云上创建一个仓库；2.在本地创建一个文件夹，右键打开git bash here;3.然后输入 git init，主要用来初始化一个空的git本地仓库。执行完该命令后，当前目录下会有.git文件夹，该文件夹是git版本仓库；4.git remote add origin XXXX,XXX是码云地址，这个命令是将本地仓库与码云远程仓库进行关联。5.git add . ,将本地文件加下的所有内容添加至暂存区；6.git commit -m '初始化代码',创建提交备注信息;7.gi
2022-04-24 16:29:37
685
原创 【无标题】vue 项目中下载文档
下载文档，方式一：超链接alet aLink = document.createElement('a');aLink.href = res.data;aLink.style.display = 'none';aLink.target = '_blank';document.body.appendChild(aLink);aLink.setAttribute('dowload',"");aLink.click();
2021-12-16 18:16:51
242
原创 xslider 多张轮播图播放效果
<div class="scrolllist" id="s1"> <a class="abtn aleft" href="#left" title="左移"></a> <div class="imglist_w"> <ul class="imglist"> <li> <a href="#"><img src="images/t1.png"/><span>下载</span&.
2021-12-16 14:42:22
295
原创 element ui 表格中，使用length判断报错
控制台报这个错的话，先排查html代码中是否使用了xxx.length，代码中是这样写的，<el-table> <el-table-column label="操作" align="center" width="330"> <template slot-scope="scope"> <el-button v-show="scope.row.children.length>0" size="mini" ...
2021-12-06 11:45:01
1435
1
原创 CSS 元素的单位
rem:相对于父元素的字体大小；px:相对于屏幕分辨率；%:相对于父元素；cm:即厘米；mm:即毫米；in:即英寸；pt:1/72英寸；pc:1/21
2021-10-28 10:17:20
141
原创 element ui表单验证，验证通过但是不进if(valid){}步骤
表单自定义验证，如图：data中定义的验证规则： var validatePass = (rule, value, callback) => { if (value === '') { return callback(new Error('请输入密码')); } else { if (this.ruleForm.checkPass !== '') { this.$refs.ru...
2021-10-19 17:38:04
1672
原创 vue element UI 实现表格的导出（下载）功能
方法一：1.安装两个依赖： npm install -S file-saver xlsx npm install -D script-loader2.项目中新建一个文件夹（名字自起）：里面放置两个文件Blob.js和 Export2Excel.js，3.在.vue文件中 写这两个方法：其中list是表格的数据export2Excel() { require.ensure([], () => { cons
2021-09-07 17:03:56
2174
原创 element ui checkbox-group多选框怎么选中id值
在项目开发中，使用多选框组，选中时想要取到该项的id而不是label值：checkbox-group：Element ui 中的组件，只需要在 Group 中使用v-model绑定Array类型的变量即可,并且绑定change实践，el-checkbox 的 label属性是该 checkbox 对应的值，所以只要label绑定id就可以了，显示的话使用label； 看代码 <el-checkbox-group v-model="checked" @change="test"> .
2021-09-01 17:22:14
5314
3
原创 Installer，Binary，source的区别
我们在下载安装包的时候，会遇到同版本的不同类型下载版本，这不同版本应该怎么选择呢，我有遇到这种情况，因此记录下来：
2021-06-16 10:19:23
634
原创 vue v-if和v-for不能同时使用
草稿1.永远不要把 v-if 和 v-for 同时用在同一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）如果避免出现这种情况，则在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环<template v-if="isShow"><p v-for="item in items"></template>如果条件出现在循环内部，可通过计算属性computed提前过滤掉那些..
2021-06-16 10:11:17
345
原创 CSS3 选择器
基础选择器标签选择器、类选择器、ID选择器、通配选择器属性选择器[attr]：指定属性的元素；[attr=val]：属性等于指定值的元素；[attr*=val]：属性包含指定值的元素；[attr^=val]：属性以指定值开头的元素；[attr$=val]：属性以指定值结尾的元素；[attr~=val]：属性包含指定值（完整单词）的元素（不推荐使用）；[attr|=val]：属性以指定值（完整单词）的元素（不推荐使用）；组合选择器相邻兄弟选择器：A+B；普通兄弟
2021-05-21 15:32:34
221
原创 HTTP 各种请求方式的使用场景
GET：获取服务器资源 POST：提交信息给服务器 PUT：传输文件 HEAD：和GET方法一样，但是只返回响应头部，作用是确定URL的有效性和资源更新的时间 DELETE：删除指定的资源 OPTIONS：查询请求服务器指定的资源所支持的方法 TRACE：用来确认连接过程中发生的一些操作 CONNECT：建立连接渠道，用于代理服务器...
2021-04-22 10:12:34
998
原创 element ui 的输入框el-input输入一个字后失去焦点，需重新点击下才能继续输入内容
该问题场景是，在el-dialog框中，嵌套了表单，在表单中使用el-input输入框时，发现输入一个字符后失去焦点不能在继续输入，需要重新点击输入框才能输入内容。部分代码如下：<el-form-item v-for="(item,index) in data" :key="item.label" :label="'名称'+index" :value="item.label" > <el-input v-model="item.labe
2021-04-13 20:05:23
9515
2
原创 修改浏览器的滚动条自带的样式
1.修改谷歌浏览器滚动条的样式：包含7个属性：::-webkit-scrollbar滚动条整体部分，可以设置宽度啥的 ::-webkit-scrollbar-button滚动条两端的按钮 ::-webkit-scrollbar-track外层轨道 ::-webkit-scrollbar-track-piece内层滚动槽 ::-webkit-scrollbar-thumb滚动的滑块 ::-webkit-scrollbar-corner边角 ::-webkit-resizer...
2021-03-22 10:32:29
778
1
原创 原生 js 鼠标点击时Tab页的切换显示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原生JavaScript封装选项卡插件</title> <style> * { m
2021-03-22 10:10:23
251
原创 下拉框联动-小demo
<div> <select id="first" onchange="setSecond(this)"> <option value="en">en</option> <option value="zh">zh</option> &l
2021-03-22 10:09:50
148
原创 2019前端面试题
最近总结了有关前端面试的相关试题，废话不多说，大家对照着把每个点的相关知识理解下，面试基本没问题：CSS盒模型flex布局 CSS单位 CSS选择器 bfc清除浮动 层叠上下文 常见页面布局 响应式布局 CSS预处理，后处理 CSS3新特性（animation和transition的相关属性，animate和translate） display有哪些取值 相邻的两个...
2021-03-22 10:09:14
112
原创 vue知识点
vue父子组件通信props，$ emit , vuex , provide/inject , $ attrs/$ listeners，$root , $parent, $refs, eventBusvue为什么不兼容ie8因为ie8没有实现Object.defineProperty()input的input事件会自带event参数，如何同时绑定其他参数@input="(event)=>{handleInput(event,‘加参数’)}"js实现简单的双向绑定<b
2021-03-22 10:07:32
105
原创 常用的正则验证表达式
VSCode的应用商店搜索any-rule，安装成功后按下F1（Mac下fn+F1），输入关键词搜索，如“手机”，会有正则表达式喔。更加详细的可点链接https://any86.github.io/any-rule/火车车次/^[GCDZTSPKXLY1-9]\d{1,4}$/手机机身码（IMEI）/^\d{15,17}$/必须带端口的网址/^((ht|f)tps?:\/\/)?[\w-]+(\.[\w-]+)+:\d{1,5}\/?$/网址（URL，支持端口和".
2021-03-22 10:06:07
259
原创 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! node-sass@4.14.1 postinstall: `node scripts/build
1.使用npm run dev 启动项目时，报错： ERROR Failed to compile with 19 errors 9:48:05 ├F10: ...
2020-08-27 10:20:18
9098
原创 Vue WEBPACK配置BABEL时候报错ERROR IN ./SRC/MAIN.JS MODULE BUILD FAILED (FROM ./NODE_MODULES/BABEL-LOADE
之前的项目，隔了一段时间没有再改，今天因要移代码，启动了下代码，报如下错误：因之前代码一直没有问题，上网搜了下有两种方法：1. 回退低版本npm install -D babel-loader@7 babel-core babel-preset-env2.更新到最高版本:npm install -D babel-loader @babel/core @babel/preset-env webpack最终，选第二种方法经测验可行，项目正常运行，猜想是一些依赖更新了...
2020-08-26 15:35:59
3391
原创 css 背景图片和渐变色并存
.login-container { background: url(/static/img/pic.e0485801.png) 200px no-repeat,linear-gradient(90deg, #10ad89 0%, #1ca4be 100%);}在做登录页面时，UI给的背景图是分为背景渐变 和背景图片，在一个元素标签上展示，实践过以上写法可以实现。从网上搜索时，搜到的结果是，1.渐变属性与图片属性中间用逗号隔开； 2.渐变属性要在图...
2020-07-24 16:26:26
8814
1
原创 JavaScript 判断对象是否包含某个属性名
判断对象中是否包含某个属性名1.indexOf 可以判断数组是否包含某个值，返回该值对应的下标；对于不存在的值，返回-1；ES6还提供了其他几种判断对象是否包含属性名的方法：2.in：属性名 in 对象（判断属性名是否存在对象中存在，返回一个布尔值）；var obj = { name:'张三', age:22, sex:'male' };console.log('name' in obj); /trueconsole.log('p
2020-07-20 10:58:14
5527
原创 VSCode 中添加代码注释
首先打开VSCode,按快捷键 Ctrl+shift+p ;输入snippets 点击回车，选择新建代码片段，点击回车然后选择需要在那种文件类型下可以使用你的注释片段代码。"zhushi": { "prefix": "ldj", "body": [ "/*", "* 代码注释", "* 说明：", "* 模块：", "* 作者：李德军", ...
2020-07-20 10:57:34
4233
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人