- 博客(35)
- 收藏
- 关注
RSS订阅原创 Vue-treeselect实现手动输入标签及回显
需求：根据后端返回的字典树供客户选择，还得让客户可以自定义输入名称这是使用Vue-treeselect的异步搜索实现的，官方文档参考文章这里分享主要代码 <treeselect ref="cbTreeselect" v-model="rdResultObj.reportingDwCode" :multiple="false" :normalizer="normal
2021-04-08 16:13:25
3820
原创 vue中使用使用阿里云的iconfont
①创建阿里云账号②在阿里云iconfont中搜索自己喜欢的icon③加入购物车，添加至项目④下载到本地，主要是下载fontclass的，至于三者的区别，大家可以上网搜搜看⑤在项目目录src/assets下创建iconfont文件夹，将刚刚加载好的东西复制到iconfont文件下⑥在main.js中引入import './assets/iconfont/iconfont.css'⑦使用class名可以在刚刚复制的文件中的iconfont.css文件里面找到，注意前面一定要加多一个i
2021-02-21 22:22:26
650
原创 vue项目安装sass
npm安装sasscnpm install node-sass --save-dev //安装node-sasscnpm install sass-loader --save-dev //安装依赖包sass-loadercnpm install style-loader --save-dev //安装style-loader安装完依赖后需要去到bulid目录下的webpack.base.conf.js文件里的module 的rules下添加{ test:
2021-02-21 11:36:56
776
原创 前端命名规范
该文章将列举前端编辑代码时变量及方法的命名规范命名模式A/HC/LC模式nameprefixAHCLCgetUserUsergetUserMessagegetUserMessagehandlerClickOutsidehandleClickOutsideshouldDisplayMessageshouldDisplayMessage动作类型函数名称的动词部分，是描述函数作用的最重要的部分，如：getXXX，表示获取
2021-02-18 14:04:45
107
原创 $attrs与$listeners使用
在vue中使用父子组件通信的的时候，人们肯定会想到props,$emit假如有A组件B组件和C组件关系为：A组件是B组件的父组件，B组件是C组件的父组件，如果A组件要跟C组件通信，可能的操作是，A往B传值，B再往A传值；C往B传值，B再往A传值都得通过B这一程，这样子做也不是不行，但是耦合度太高了，不便于维护，代码可读性也不好。我们可以$attrs与$listeners来解决这个问题A组件<template> <div class="hello"> A组件:
2021-02-07 11:52:17
292
原创 面试
如何让谷歌浏览器字体小于12pxtransform：scale（）对对该标签就行缩放 span{ font-size: 10px; -webkit-transform: scale(0.8); transform: scale(0.8); display: block; }
2021-02-07 10:27:50
98
原创 开发中对象Object常用方法
entries(） 对键值对遍历,返回的是一个键值对数组 Object.entries(obj) let obj = { name: 'kaolin', age: 18, birthday: '1998-05-20' } console.log(Object.entries(obj));keys() 对键名遍历，返回的是一个key组成的数组 Object.keys（obj）values() 对键值遍历，返回的是一个键值组成的数组 Object.val
2021-02-05 16:00:35
169
原创 组件动态样式
子组件该组件有的props有三个属性，并且样式是用变量绑定的，css引入是通过变量引入的，比变量前面需要加上–两个字符<template> <div class="box" :style="styleStr">子组件的框框</div></template><script> export default { name: "ComponentStyle.vue", props:{
2021-01-09 16:24:03
205
原创 数组扁平化
reduce方法let arr = [1,[2,3,2],[1,6,4,3],[[1,4],[7,[4,8,10,[10,12]]]]] let resultArr = [] function flatten(arr){ //扁平，利用递归 let result = arr.reduce((result,item)=>{ return result.concat(Array.isArray(item)?
2020-12-23 18:10:53
67
原创 函数的防抖和节流
区别函数防抖，指的是事件触发n秒后再执行回调，如果在n秒期间又被触发，则重新计时函数节流， 指的是事件触发n秒后再执行回调，再n秒内又被触发，不会执行， 在n秒内触发无效（可以理解为在这n秒内只能执行一次）需要用到的防抖或者节流的情况防抖应用场景鼠标：mousemove,mouseover,input输入框的keypress验证规则：手机号码，邮箱验证浏览器：resize节流应用场景鼠标：mousemove,mouseover搜索框的联想功能滚动加载scro
2020-12-23 11:45:13
90
原创 express+vue跨域问题
新建文件夹express_vue分别新建两个子文件夹：server与web存放后端与前端项目一、在server文件夹下执行express-generator npm install express-generator -g全局安装脚手架express --version 来检测一下是否安装成功执行express express_server创建一个文件夹名为express_server的express项目进入express_server文件夹下执行npm install安装相关依赖执行npm
2020-12-21 16:07:19
469
原创 BFC
简介我们常说的文档流其实分为定位流、浮动流、普通流三种。而普通流其实就是指BFC中的FC。FC(Formatting Context)，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。常见的FC有BFC、IFC，还有GFC和FFC。BFC(块格式化上下文)，是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。如何创建BFC：根元素（）浮动元素（元素的 float 不是 n
2020-12-08 11:50:58
66
原创 bind、call、apply区别
bind语法function.bind(thisArg[, arg1[, arg2[, ...]]])参数thisArg必填,arg1,arg2,arg3…callapply
2020-12-07 14:44:01
149
原创 迭代器模式和生成器模式
迭代器模式(Interator)作用是为各种数据结构，提供一个统一的、简便的访问接口；是使得数据结构的成员能够按某种次序排列；是 ES6 创造了一种新的遍历命令for...of循环，Iterator 接口主要供for...of消费。默认已经实现iterable接口的类型：字符串数组映射集合arguments对象NodeList等DOM集合类型可迭代对象的原生语言特性包括：for-of循环数组解构扩展操作符Array.from()创建集合创建映射Promise.
2020-12-03 15:59:38
131
原创 Map与Set
Map键值存储的集合类型创建map集合let m = new Map()let m1 = new Map([["m1","1"],["m2","2"],["m3","3"]]) //带有初始值，必须为二维数组Map的方法方法描述返回值set（“key”，“value”）添加键/值对返回更新后的map集合get（“key”）获取键值对对应的键的值has（“key”）查询键值对booleansize（）获取Map长度，及键值对数量长度d
2020-12-03 11:22:49
61
原创 vscode之设置console.log快捷键
1.文件->首选项->用户代码2.输入javascript3.点击进入javascript.json，修改成如图所示，以后打cl回车就可以啦
2020-12-02 23:28:35
1176
1
原创 Object.defineProperty理解
对象属性的定义与赋值语法Object.defineProperty(target,property,descriptor)target:目标对象property:引用的目标对象上的字符串属性descriptor：用于描述属性， 包含可选的enumerable（设置属性是否可遍历）,configurable（设置属性是否可被修改或删除）,writable（设置属性是否可写）,value(属性值),get和set定义的对象描述属性默认值属性名默认值enumerablefal
2020-12-02 18:12:51
123
原创 JS设计模式——单例模式
理解：单例即只能实例一个对象，无论new多少次，new出来的都是同一个对象这里用了闭包保存了instance变量，用于判断是否已经创建了实例，创建了则直接返回，否则new一个实例返回 //单例模式 const Grilfriend=(function(){ //构造函数 function Grilfriend(name){ this.name='name' }
2020-12-01 09:45:10
146
原创 vue-draggable使用
安装npm install vuedraggable引入import draggable from 'vuedraggable'模板使用<draggable v-model="dataList" class="main"> <div class="dragItem" v-for="element in dataList" :key="element.id"> {{element.value}} </div> &
2020-11-23 21:39:03
1508
原创 Node.js-swig前端模板引擎
①安装swignpm install swig//引入express框架var express = require("express")var app = express()var port = 8081//引入前端模板引擎var swig = require("swig")//设置页面不缓存swig.setDefaults({cache: false})app.set('view cache',false)//定义当前应用所使用的的模板引擎//第一个参数表示模板引擎的名称，同时也
2020-11-20 11:04:57
274
原创 vue数据渲染延迟问题
在使用html引入vue做项目的时候，会发现我们的数据经常会出现以下的情况，才会显示我们想要的数据.解决方法 <style> [v-cloak]{ display: none !important; } </style><div id="app" v-cloak> {{num}}</div>v-cloak这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-c
2020-11-15 09:41:47
5268
原创 浏览器对get请求缓存问题
这两天学习缓存接触到才知道有部分浏览器会对get请求进行缓存的，小编试了一下谷歌跟火狐不会对get请求进行缓存，到那时ie会对get请求进行缓存客户端①在发送get请求的时候，加上一个时间轴或者随机数②在发送请求的时候设置if-Modifed-Since服务端客户端跟服务端通信有个跨域的问题，不会的可以看一下我之前的一篇关于跨域的文章const http = require('http')const port = 3000const server = http.createServer
2020-11-10 00:12:18
2422
1
原创 HTTP缓存机制
缓存的作用提高资源加载速度减少网络请求，提高页面渲染速度缓存的分类前端缓存主要包括http缓存，浏览器缓存HTTP缓存常见的 HTTP 缓存只能存储 GET 响应，对于其他类型的响应则无能为力。浏览器在每次GET URL时都会先检查URL对应的缓存，除非你指定不使用缓存（强制刷新或者在控制台勾选Disable Cache等）HTTP缓存流程图强缓存不请求服务器，直接用，返回状态码200Pragma包括实现特定的指令，它可应用到响应链上的的任何接收方no-cache指定不缓
2020-11-08 18:36:47
115
转载 http请求头及响应头字段含义
http请求头有哪些? 今天我们来总结一下http请求头。在这之前，看到请求头信息那么多，看着都很让人发愁啊，所以在这里做了一些总结，什么时候忘记了，可以来这里翻一翻！首先说一下http请求头怎么组成吧 HTTP请求头提供了关于请求，响应或者其他的发送实体的信息。HTTP的头信息包括通用头、请求头、响应头和实体头四个部分。每个头域由一个域名，冒号（:）和域值三部分组成。来解释一下这四部分是什么意思吧 通用头标：即可用于请求，也可用于响应，是作为一个整体而不是特定资源与事务相关
2020-11-08 11:08:54
2489
1
原创 js数组（三）
js数组之1.concat()语法array1.concat(array2,array3,...,arrayX)参数参数可以是具体值也可以是数组对象，可以是任意多个返回值返回的是一个新的数组实例操作 let arr =[1,2,3,4] let arr1 = [5,6,7,8] let str ='name' console.log(arr.concat(arr1)) console.log(arr.concat(str))2.copyWithin(
2020-11-08 00:25:51
220
原创 js数组方法(二)
参考链接：MDN Web文档js数组方法之——遍历操作1.forEach()语法arr.forEach(callback(currentValue [, index [, array]])[, thisArg])参数callback为数组中每个元素执行的函数，该函数接收一至三个参数：currentValue数组中正在处理的当前元素。index 可选数组中正在处理的当前元素的索引。array 可选forEach() 方法正在操作的数组。thisArg 可选可选参数。当执行回调
2020-11-06 18:09:02
152
原创 js数组方法(一）
参考链接：MDN Web文档1.Array.from（）语法：Array.from(arrayLike [, mapFn [, thisArg]])参数：arrayLike类数组或可迭代对象，可转换为数组。mapFn 可选的映射函数调用数组的每个元素。（比如：Array.from(arrayLike,item=item+1)将一个类数组活则可迭代对象转换成数组的时候，对每一个元素都加1，item代表当前元素）thisArg 可选的this执行时用作的值mapFn。返回值一个新A
2020-11-06 11:00:19
215
原创 js全局作用域与函数作用域
在es6之前，js是只有全局作用域与函数作用域 var n=2 function fn() { console.log(n) a=1 console.log(a) var b=10 console.log(b) } fn() // 2, 1, 10 console.log(n)//2 console.log
2020-11-03 18:13:10
302
原创 treeSelect树形选择器使用
vue-treeselect树形选择器treeSelect是Vue的一个插件，用于进行一个树形选择的场景，这个组件可以满足大部分场合的使用。官方文档1.安装npm install --save @riophae/vue-treeselect安装完成之后可以在package.json文件中看到2.引用，在需要使用的组件上引用3使用关于组件属性，大家可以去官方文档看一下，这里着重说一下normailzer，normailzer的意思就是是规范化，意思就是使你的数据格式规范化treese
2020-11-02 23:50:38
30084
5
原创 mongodb下载安装及Mongo Management Studio视图工具安装
下载可以到官网下载https://www.mongodb.com/try/download/community由于是外网，下载可能会慢点，耐心等到就可以了。①下载完成后双击mis文件②选择custom选项自定义安装，如果选择complete则会默认安装到C盘上的③点击next就好了④不要勾选这个“install MongoDB Compass”,这个是按照图形化管理的意思，这个会安装很久的，可以之后再到官网下载安装比较快点⑤一路next，最后安装完成，点击finish就好了...
2020-10-31 18:04:04
4262
原创 8种数组去重方法
需要去重的数组var arr= [2,4,5,2,3,4,2,4,4,5,6,7,2,8];1.js第三方库https://underscorejs.net/这是小编用的比较好用的js第三方库，大家可以看一下，也还有很多第三方库可以实现数组去重，有兴趣了解的可以百度 //1.调用第三方库 function getUniqueArray() { var result = _.uniq(arr) console.log(result) }2.利
2020-10-29 22:05:56
586
原创 jsonp，cors，nginx跨域
前端跨域JSONPCORSnginxJSOP浏览器端 <script> function foo(data){ console.log(data) } </script> <script src="http://localhost:8080/jsonp?callback=foo"></script>服务器端let http = require('http')let
2020-10-28 22:06:33
91
原创 前端面试常见问题——css布局
css布局题目：假设高度已知，请写出三栏布局，其中左栏，右栏高度各为300px，中间自适应①浮动方式（优点：兼容性好，缺点：清楚浮动脱离文档流）<!-- //浮动方法 --> <section class="layout float"> <style media="screen"> .layout.float .left{ float: left;; width
2020-07-24 11:32:22
127
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人