- 博客(60)
- 收藏
- 关注
原创 vue3+Ts+element-plus 项目中element-plus icon全局注册 动态生成
全局注册element plus icon 注册 动态展示
2023-03-01 10:21:34
837
1
原创 数组或数组对象去重(添加的情况)
数组去重for循环去重判断一个数组里面是否有重复的function distinct(arr) { for (let i=0, len=arr.length; i<len; i++) { for (let j=i+1; j<len; j++) { if (arr[i] == arr[j]) { arr.splice(j, 1); // splice 会改变数组长度,所以要将数组长
2022-05-12 09:30:20
1150
原创 数组嵌套对象 对象里面嵌套数组 合 添加的数组(数组对象) 判断重复 并添加 ------项目中的遇到情况
涉及的情况这种情况 是确保添加的数据和 原数组中结构是//这里的结构就是实际结构//这是往里面添加的结构的结构data:{ item:[{ mag:[{},{},....], title:'' }, { mag:[{},{},....], title:'' },.......]}//添加的按数据结构data:[{},{}]1.借助子组件传值 情况 (弹框是子组
2022-05-10 16:42:51
1554
原创 获取实时星期和年月日
获取年月日 let date = new Date(); let year = date.getFullYear(); let month = date.getMonth() + 1; let day = date.getDate(); if (month < 10) { month = "0" + month; } if (day < 10) { day = "0" + day; } this.nowDat
2022-04-20 08:32:23
184
原创 微信小程序地址栏url 地址传参有对象的参数 地址中包含、&特殊字符问题解决
若对象的参数或数组的元素中遇到地址,地址中包括、&这些特殊符号时,对象/数组先要通过JSON.stringify转化为字符串再通过encodeURIComponent编码,接收时,先通过decodeURIComponent解码再通过JSON.parse转换为JSON格式的对象/数组出现:Error in onLoad hook: “SyntaxError: Unexpected end of JSON input” 问题可以按照下面2步新增页面 点击跳转页面 传参 这里是(item
2022-04-02 17:08:41
2586
原创 自己总结的git用法
总结的git用法做项目前 拉取(克隆)代码一、创建分支二、为了不影响 主分支 (`master`)1.在`master` 主分支的基础之上 创建 `devMaster` 分支2.在`devMaster` 分支的基础之上再创建 自己要写代码的分支 `自定名(比如:cfw 分支)`三、提交自己分支上的代码 (`cfw 分支`)步骤做项目前 拉取(克隆)代码1.克隆远端数据仓库到本地:git clone 仓库地址2.拉取远程仓库中最新的版本:git pull 远程仓库地址 分支名称一、创建分支gi
2021-08-15 10:54:54
152
原创 如何将字符串转化为对象
如何将字符串转化为对象//获取对应的数据 将数据拿到const drugNames = row.preventDrug function getNum(drugNames) { return drugNames.split(',') } const newName = getNum(drugNames) for (let i = 0; i < newName.length; i++) { //data里面的数据
2021-08-11 10:56:25
1051
原创 Vue的双向数据绑定原理
Vue双向数据绑定vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。具体步骤:第一步: 需要observer(观察者)对数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化第二步: compile(模板解析器)解析模板指令,将模板中的变
2021-06-20 16:41:41
235
原创 vue中虚拟dom和diff算法
想要理解虚拟dom首先要知道什么是虚拟dom?虚拟dom可以简单的用一句话概括,就是根据模板(真实的dom)生成的一个js对象,因为不是真实DOM,所以称之为虚拟DOM。虚拟dom是相对于浏览器所渲染出来的真实dom而言的,在react,vue等技术出现之前,我们要改变页面展示的内容,只能通过遍历查询dom树的方式,找到需要修改的dom,然后修改样式行为或者结构,来达到更新视图的目的。创建真实DOM成本比较高,如果用js对象来描述一个dom节点,成本比较低,另外我们在频繁操作dom是一种比较大的开销。
2021-06-20 16:19:54
187
原创 防抖和节流
防抖和节流使用防抖和节流是为了性能优化在vue中的使用在公共方法中(如 untils.js 中),加入函数防抖和节流方法// 防抖export function _debounce(fn, delay) { var delay = delay || 200; var timer; return function () { var th = this; var args = arguments; if (timer) {
2021-06-17 21:47:15
158
原创 项目中如何修改element-ui的默认样式 (去除scoped,样式穿透 >>> , less/sass : /deep/)
项目中如何修改element-ui的默认样式 1.去除组件样式的scoped2.给input加类名3.可以使用 >>> 来深度修改样式4./deep/实现1.去除组件样式的scoped2.给input加类名3.可以使用 >>> 来深度修改样式<style scoped> .a >>> .b { /* ... */ }</style>4./deep/实现找到需要修改的 ElementUI 标签的类名,然后在
2021-06-10 21:52:56
512
原创 elemeng-ui中el-form 表单如何校验
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档elemeng-ui中表单如何校验安装elemeng-ui在main.js中引入安装elemeng-uinpm i element-ui -S在main.js中引入查看官网import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.v
2021-06-10 21:45:03
260
原创 ngnix服务器配置
下载1.下载2.2、启动我们把下载好的压缩包解压到一个文件中,然后到这个文件中使用命令面板(1)start nginx 开启nginx服务(2)nginx.exe -s stop 关闭nginx服务,快速停止nginx,可能并不保存相关信息(3)nginx.exe -s quit 关闭nginx服务,完整有序的停止nginx,并保存相关信息(4) nginx.exe -s reload 重载nginx服务,当你改变了nginx配置信息并需要重新载入这些配置时可以使用此命令重载nginx(5
2021-06-10 21:38:02
160
原创 webpack打包优化
webpack打包优化路由懒加载关闭生产环境下的SourceMap映射文件使用CDN加速优化去除console.log()打印以及注释路由懒加载在配置我们路由时,我们可以使用路由懒加载,当我们切换到这个路由时,才会加载这个页面。{ path: '/', // 路由 name: 'Home', // 路由名称 component: () => import("@/views/Home.vue") // 使用这种方式来实现路由懒加载 }关闭生
2021-06-10 21:25:45
416
原创 vant-ui的按需引入
vant-ui的按需引入1.安装插件babel-plugin-import2.在根目录下创建`.babelrc`文件3.在src目录下创建plugins文件 里面是vant.js4.在main.js中引入5.直接使用vant1.安装插件babel-plugin-importcnpm i babel-plugin-import -D2.在根目录下创建.babelrc文件{ "plugins": [ ["import", { "libraryName": "v
2021-06-04 07:33:02
137
原创 axios封装api接口管理
axios封装api接口管理axios封装1.首先安装axios2.创建目录3.环境切换4.请求头设置5.请求拦截6.响应拦截4.api接口统一管理axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护。axios封装1.首先安装axios npm install axios -S; // 安装axios复制代码2.创建目录一般在src目录下创建一个http文件夹 里面创建 一个是http.js 一个是app.jsapi.js用来统一管理我
2021-06-03 17:00:52
147
原创 vue项目开发过程
vue项目开发过程1.确定项目开发的技术栈2.搭建项目3.从0开始搭建4.使用模板开发项目5.配置路由6.组件化开发6.webpack配置打包优化 (vue.config.js)1.确定项目开发的技术栈vue2.0 + vue-cli3/4 + vue-router + axios + vuex + vant + rem + sass + webpack2.搭建项目使用 npm(cnpm) yarn 包管理工具 安装依赖文件 或 下载插件全局安装axios 两种方式: 1
2021-06-02 09:05:47
531
原创 多环境变量配置
多环境变量配置1.首先根目录下创建 .env.development .env.production .env.staging 文件1.1.env.development文件 本地环境MODE_ENV = 'development'#must start with VUE_APP_VUE_APP_ENV = 'development'1.2.env.production文件 开发环境NODE_ENV = 'production'#must start with VUE_A
2021-06-01 20:42:17
190
原创 transition
transition transition :过渡属性的简写 用于设置4个过渡属性transition-propertytransition-durationtransition-timing-functiontransition-delaytransition-property 规定设置过渡效果的 CSS 属性的名称。transition-duration 规定完成过渡效果需要多少秒或毫秒。transition-timing-function 规定速度效果的速度曲线。transi
2021-06-01 18:53:54
162
原创 keep-alive
keep-alive 概念作用对生命周期的变化缓存整个项目的话只需要用keep-alive 包裹router-view即可概念keep-alive:是vue的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁他们 和 transition 相似,keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中。作用在组件切换过程中,把切换出去的组件保留在内存中,防止重新渲染dom,减少加载时间和性能的消耗,提高用户体验性参数:include 只
2021-06-01 18:42:17
147
原创 事件委托(事件代理)
事件委托事件委托概念:事件委托好处:应用场景 在vue中事件委托事件委托概念:事件委托,又名事件代理。事件委托就是利用事件冒泡,就是把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡,那么委托也就没法实现了。事件委托好处:提高性能,减少了事件绑定,从而减少内存占用案例:需要点击每个a,来。弹出他们的内容<div id="div3"> <a href="#">a1</a><br> <a href="#">a2&
2021-05-28 19:39:29
320
原创 什么是闭包
什么是闭包如何产生闭包什么是闭包闭包的优点闭包的缺点如何产生闭包// 函数作为返回值function create() { const a = 100 return function () { console.log(a) }}const fn = create()const a = 200fn() // 100// 函数作为参数被传递function print(fn) { const a = 200 fn()}cons
2021-05-28 18:50:59
390
1
原创 var let const 的区别
var let const 的区别var let const 的区别var let const 的区别var 声明的是变量 存在变量提升 let const 不存在变量提升console.log(a); // undefined ===> a已声明还没赋值,默认得到undefined值var a = 100;console.log(b); // 报错:b is not defined ===> 找不到b这个变量let b = 10;console.log(c); /
2021-05-28 17:13:44
66
原创 作用域、作用域链、自由变量、变量提升
作用域、作用域链、自由变量、变量提升作用域:作用域链:自由变量:变量提升(预解析):作用域:变量作用域:简单来说:就是一个变量可以使用的范围作用域的种类:全局作用域函数作用域块级作用域js首先最外层的作用域叫全局作用域js通过一个函数创建独立作用域 函数可以嵌套函数 作用域也可以嵌套作用域es6新增块级作用域 大括号 包括if{} for(){} 可以是let作用域链:自由变量向上级作用域一层一层向上级查找 直到找到最顶层的全局作用域 就形成了作用域链自由变量:
2021-05-28 07:33:42
205
原创 原型 原型链
原型 原型链1.prototype每个函数都有一个prototype属性 被称为显示原型2.__proto__每个实例对象都会有一个__proto__属性背称为隐式原型每一个实例对象的隐式原型__proto__属性指向自身构造函数的显示原型prototype3.constructor每个prototype原型都有一个constructor属性,指向它关联的构造函数4.原型链获取对象属性时,如果对象本身没有这个属性,那就会去他的原型_ _proto_ _上去找,如果还查不到,就去找
2021-05-26 19:23:40
69
原创 this指向 call、apply、bind的区别 new的过程
this指向 call、apply、bind的区别this指向this指向在浏览器里,在全局范围内this 指向window对象;在函数中,this永远指向最后调用他的那个对象;构造函数中,this指向new出来的那个新的对象;call、apply、bind中的this被强绑定在指定的那个对象上;箭头函数中this比较特殊,箭头函数this为父作用域的this,不是调用时的this.要知道前四种方式,都是调用时确定,也就是动态的,而箭头函数的this指向是静态的,
2021-05-26 19:07:29
116
原创 arguments详解
arguments详解arguments 是一个类似数组的对象, 对应于传递给函数的参数。有下标 有长度 是一个伪数组arguments对象不是一个 Array 。它类似于数组,但除了 长度之外没有任何数组属性。例如,它没有 pop方法。但是它可以被转换为一个真正的数组::let args = Array.prototype.slice.call(arguments); let args = [].slice.call(arguments);你还可以使用 Array.from()方法
2021-05-25 20:13:47
290
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人