- 博客(58)
- 收藏
- 关注
RSS订阅
原创 闭包是如何形成的，以及如何避免产生闭包导致内存泄漏
什么是闭包？闭包（Closure） 是 JavaScript 中的一个重要概念，指的是一个函数能够记住并访问它的词法作用域（Lexical Scope），即使这个函数在其词法作用域之外被调用。简单来说，闭包就是函数和对其周围状态（词法环境/作用域）的引用组合在一起的结果。
2025-02-11 09:30:25
747
原创 构造函数与普通函数有什么区别（原型链）
如果你需要创建多个类似的对象，构造函数是一个很好的选择；• 构造函数：在构造函数中，this 指向新创建的对象实例。使用 new 关键字时，JavaScript 会自动创建一个空对象，并将该对象绑定到 this 上。• 普通函数：可以显式地返回任何类型的值，包括基本类型、对象等。如果没有显式返回值，默认返回。虽然在语法上看起来相似，但它们的用途和行为有着显著的区别。• 如果返回的是一个原始类型（如字符串、数字等），则忽略返回值，仍然返回新创建的对象实例。• 如果返回的是一个对象，则返回该对象。
2025-01-10 17:18:31
340
原创 使用new Vue创建Vue 实例并使用$mount挂载到元素上(包括el选项和$mount区别)
方法：$mount() 提供了更多的灵活性，允许你在创建 Vue 实例后延迟挂载，或者挂载到脱离文档流的元素上。场景 2：延迟挂载有时候你可能希望延迟挂载 Vue 实例，直到某个条件满足。}).$mount() 的写法，可以在 Vue 3 中使用。场景 3：挂载到脱离文档流的元素如果你不想立即将组件插入到 DOM 中，可以使用。创建一个脱离文档流的元素，稍后再将其插入到 DOM 中。是 Vue 实例的根元素，你可以稍后将其插入到任何地方。在这个例子中，Vue 实例在 2 秒后才被挂载到。
2025-01-08 11:21:51
644
原创 面试题集锦
1、hash和history的区别https://blog.youkuaiyun.com/z591102/article/details/106613284https://blog.youkuaiyun.com/lk19910323/article/details/124339381
2022-05-25 17:14:47
135
原创 在运行vue项目时，遇到Use // eslint-disable-next-line to ignore the next line.
在vue.config.js中添加配置，再重新启动，完美解决 lintOnSave: false, devServer: { overlay: { warning: false, errors: false } },
2021-08-30 13:37:00
954
原创 2021-08-27openlayers加载动态地图服务
先看下官网，需要加的参数如下。方法源代码如下 function loadDynamicLayer(url, layerId, zIndex, vls, token) { const showLayers = 'show:'.concat(vls) const layer = new ol.layer.Image({ source: new ol.source.ImageArcGISRest({ url: url,//token不能放在url后面，必须放在参
2021-08-27 09:21:28
414
原创 vuex的使用
本片博文用于自学，摘抄至官网。（一）取出store中存储的数据1、第一种方法template: `<div>{{ count }}</div>`, computed: { count () { return this.$store.state.count } }2、第二种方法，使用mapState辅助函数，用于获取多个数据computed:{ mapState([ // 映射 this.count 为 store.state.c
2021-08-19 15:39:32
138
原创 水平居中块级元素如div
一、水平居中块级元素：margin:auto;二、水平居中元素中中的文本：text-align:center;三、图片居中对齐：display:block;margin:0 auto;四、div实现右对齐的两种方式：①position:absolute;right:0px;②float:right;(如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 "在父元素上添加 overflow: auto; " 来解决该问题。)五、div中的文本居中line-heigh
2021-06-24 10:19:45
98
原创 vue前端生成二维码列表
<div v-for="(item,idx) in dataList" :key="idx"> <div :id="`qrcode${idx}`"></div><!--id用来标识出div的唯一性 --></div><script>import QRCode from "qrcodejs2"; // 引入qrcodedata(){ return{ dataList:[] }}methods(){
2021-06-23 09:27:44
318
原创 vs code解决浏览器兼容问题
第一步：npm install --save babel-polyfill第二部：在main.js中引用import 'babel-polyfill'注：如果安装报错，可删除node_modules文件夹，然后重新npm install。
2021-04-02 17:09:41
726
原创 比较好用的js写法
一、返回一个所有元素为字符串的数组，其元素来自于从给定的object上面可直接枚举的属性。这些属性的顺序与手动遍历该对象属性时的一致。var arr = ['a', 'b', 'c'];console.log(Object.keys(arr)); // console: ['0', '1', '2']二、Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。const o1 = { a: 1 };const o2 = { b: 2 };
2021-04-02 17:05:29
184
原创 在对象中，key值不相同，value值相同，去重方法
这里打印出来的是对象，格式是key:value，去掉重复的value的方法。方法：图片中打印出来的是this.listlet arr =Object.value(this.list);//把value中的数据全都取出来let set =new Set(arr);//去重this.newList=Array.from(set);//将Set结构的数据转换为真正的数组...
2021-01-29 14:58:54
490
原创 vue按照不同的button切换页面
展示效果图<el-button-group> <el-button type="primary" size="small" :plain="optType==='1'" @click="switchOptType('0')">竹节图</el-button> <el-button type="primary" size="small" :plain="optType==='0'" @click="switchOptType('1')">调度表</
2021-01-14 11:17:33
533
原创 map函数理解
map()方法定义在JavaScript的Array中，它返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。map函数对空数组无效。map函数不会改变原数组。let echartData = [ { name: '工单类型一', finishNum: 23, unfinishNum: 33 }, { name: '工单类型二', finishNum: 10, unfinishNum: 19 }, { name: '工单类型三', finishNum: 40, u
2021-01-12 10:28:19
938
原创 vue使用for循环展示图片列表
<div class="icon-list-container"> <div class="icon-list" v-for="item in items" :key="item.name"> <!--此处是vue加入图片的一种方法 --> <img :img="base64Config[`${item.icon}`]" alt="" /> </div></div>return{ base64Conf
2021-01-12 09:48:22
2887
原创 vue一个页面中分多个模块，使用组件写法
index.vue页面<dataItem v-for="(item,index) in dataItemParams" :key="item.name" :name="item.name" :type="item.type" :iconName="item.iconName" :value="staticIndexData[index]" :unit="item.unit" :settings=“item.setti
2021-01-11 11:02:47
2467
1
原创 vue.js三个同样的div,div里放不同的数据，使用组件的写法
需求：三个同样的div,div里放不同的数据解决方案：组件里面写样式，index页面放数据组件：<div class="data-item-with-icon"> <div class="data-item-with-icon-name">{{name}} </div> <div class="data-item-with-icon-value">{{data}}</div></div>.data-item-with
2021-01-07 10:34:52
792
原创 vue.js修改密码表单
<el-button plain @click="changePassword" size="small">修改密码</el-button><div> <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="500px" top="30vh"> <el-form :model="form" :rules="rules" ref="form"> &l
2021-01-07 09:41:15
808
原创 vue模板开发，for循环里嵌套for循环
<div class="company-item" v-for="(item,index) in companyList"> <el-row type="flex"> <el-col :span="3"> <img :src="base64Config[item.img]" /> </el-col> <el-col :span="7" v-for="(ele,i) in i
2020-12-22 10:28:18
982
原创 vue使用watch监听器
千米与米之间的转换（不能使用箭头函数监听）千米：<el-input type="text" v-model="kilometers"></el-input>米：<el-input type="text" v-model="meters"></el-input>data:{ kilometers, meters }watch:{ kilometers:function(val){ this.meters=val*100
2020-12-21 16:01:38
147
原创 vue中ref的使用方法，ref与prop的区别
1、ref加在普通元素上，使用this.ref.name获取到的是dom元素。2、ref加在子组件上，用this.ref.name获取的是组件实例，可以使用组件的所有方法。例：<busIndustry ref="busIndustry"></busIndustry>import busIndustry from './components/busIndustry'components:{ busIndustry }mouted:{ this.search(
2020-12-21 15:36:42
1083
原创 vue.js使用正则表达式校验填入表单的数据格式
设置数据格式<el-form ref="form" :model="form" :rules="rules" label-width="120px"> <el-form-item prop="telephone" label="联系方式:"> <el-input v-model="form.telephone" placeholder="请输入资源需求方联系人可用11位的固话或手机号码"> </el-form-item></el-form&
2020-12-21 11:10:36
739
原创 es6常用语法: alert、定义对象、拓展运算符(...)、find()函数
alert`hello world!`//等价于alert('hello world!')定义对象const person = {age,name}拓展运算符(…)用于取出参数对象所有可遍历属性然后拷贝到当前对象。let person={name:“Amy”,age:15};let someone={…person};someone;//{name:“Amy”,age:15}find()函数let arr=Array.of(1,2,3,4);console.log(arr.find(
2020-12-16 10:23:40
297
原创 vue使用switch切换审核状态
<el-form-item label="审批状态："> <el-input :value="getStatus(form.applyStatus)" ></el-input> </el-form-item>methods:{ getStatus(code) { let str = '' switch (code) { case '0': str = '申请中...
2020-12-16 10:22:23
892
原创 [Vue]“TypeError: Cannot read property ‘0‘ of undefined“的解决方法
原因：请求不到数据，vue在拿到数据之前就已经渲染完了页面，所以我们采用延迟渲染页面的方法。先获取数据，再渲染页面。解决方法：在mouted中，将要执行的函数使用延时setTimeout()方法包裹 mouted:{ setTimeout(() => { this.showRingChart() }, 1000) }...
2020-12-01 15:53:37
8251
1
原创 vue修改表格头的样式
<el-table :data="tableData" :header-cell-style="rowClass"></el-table>methods:{ rowClass(){ retrun 'background:#ff;color:#333333;font-weight:600' }}
2020-11-27 10:36:59
233
原创 vue整数校验和不能以零开头校验
要求不能有小数点，不能以0开头 <el-form-item label="人数：" prop="num"> <el-input :value="ruleForm.num" type="number" @input="(e) => (ruleForm.num= isnumber(e))"></el-input> 人 </el-form-item>methods:{ isnumber(val) {
2020-11-27 09:56:27
1553
原创 vue使用watch监听查询条件变化，查询结果发生变化
当点击完不同的选项的时候，查询条件会变化。<el-select v-model="search.company"> <el-option label="选项一" value="0"></el-option> <el-option label="选项二" value="1"></el-option></el-select>watch:{ 'search.company':{ handler(){ this.i.
2020-11-26 09:38:03
795
原创 vue.js:router路由跳转页面并且进行带参查询
this.$router.push{ path:'/index' query:{ params:item.id }}
2020-11-16 15:26:23
327
原创 array.slice(0,3)
截取数组中的值array=[1,2,3,4,5,6,7,8,9]array.slice(0,3)//包含1，但是不包含3，所以取的是第0，1，2位数字得到数组[1,2,3]
2020-11-16 15:09:19
1035
原创 使用＜component :is=““＞＜/component＞一个页面，多个相似组件使用方法
<component :is="`zuJian${type}`" :settings="settings"></componen>import Zujian1 from './components/zujian1'import Zujian2 from './components/zujian2'props:['settings']components:{ zujian1, zujian2}
2020-11-16 15:02:59
1565
原创 父子组件之间的传值
父子组件之间的传值子组件：<el-menu @select="selectMenu"> <el-menu-item v-for="item in menuList" :key="item.index" :index="item.index"> <div slot="title">{{ item.title }}</div> </el-menu-item></el-menu>props:{
2020-11-16 13:56:21
154
原创 vue两个子组件之间的传值
两个子组件之间传值，最好使用一个中间桥梁父组件来进行传值。子组件1—>父组件—>子组件2本例想实现的功能：把子组件1中的status传递到子组件2子组件1： <el-table :header-cell-style="{ background: '#3A5FA6', color: '#fff', fontWeight: 'bold' }" :data="tableData" stripe height="770px"
2020-11-16 10:45:21
1650
原创 vue中遇到的indexOf数组索引
数组索引，在数组中找字符串，如果找到，就是>-1,找不到就是-1Array.indexOf('12345')>-1在vue中是否显示某个button的写法<button v-if="buttonRight.indexOf('已审批') > -1"></button>
2020-11-05 15:23:42
1122
原创 关于组件绑定class,点击切换不同的页面
简单的用法：<div><!--相当于给class绑定一个值，动态地决定active是true还是false,从而决定是否显示这个class--> <div :class="{active:isActive}"></div></div><script> data:{isActive:true}</script>稍微复杂一点的用法：重点1：普通的class与绑定的class可以同时存在，class控制布局，
2020-10-30 10:22:33
268
原创 dom的用法，改变页面的元素
例子：<html><div><span id="id1">我是儿子</span><el-button @click="clickMe()">点击我</el-button></div></html><script>methods:{clickMe(){document.getElementById("id1").innerHtml="我是爸爸";}}</script>
2020-10-29 17:41:30
118
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人