- 博客(35)
- 收藏
- 关注
RSS订阅原创 v-model组件传值时,重名了怎么办?
总所周知v-model是一个语法糖,它在子组件的身上绑定了一个value属性子组件在其内部抛出一个input事件,触发父组件的input事件的回调,在这个回调中修改value的值。那么问题来了?子组件在其接受父传递的value属性时,通过prop接收时,子组件的内部有相同的属性了,这时候就需要更改这个value值,可以使用下面这个方法原代码修改代码...
2022-06-29 20:20:55
438
原创 用户代码--常用的代码块
{// Place your snippets for JavaScript here. Each snippet is defined under a snippet name and has a prefix, body and// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible letiables are:// $
2022-06-29 16:08:36
338
原创 如何关掉vue插件Vetur格式化的时候自动添加的样式
刚用Vetur的时候会发现只要格式化就会加什么小括号,冒号之类杂七杂八的标点符号.看着特别别扭,现在手把手教你如何关掉这个功能,傻瓜式教学.专门为小白设计先打开vscode1 点击左下角设置按钮2 点击设置到设置界面3 在搜索栏输入需要查找的配置Vetur › Format › Default Formatter: JS4 点击我们想要修改的配置项5 把默认项prettier修改为vscode-typescript修改完就ok了,快去试试吧...
2022-06-29 14:14:41
974
原创 实现对象中英文键的互转
你是否遇到这种情况?,当我从浏览器端拿到的数据如下图一样,是一个数组包对象的数据,但是我要想把拿到的数据给我的后端兄弟,需要把中文的键转化成英文的键,走出办公室,拿起一根香烟,冷静的想了一想,再我的不断尝试中,终于实现了,对象键的中英文转化(٩(๑>◡中文键思路:这里和上面的中文转英文键有一点不同的是这是转化的是一个二维数组,所以我们在书写逻辑的时候要声明两个数组,一个大数组(外层的),一个小数组(里面的)核心代码...
2022-06-05 21:28:03
250
原创 watch、methods 和 computed 的区别?
1）基本说明 1．computed： 计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。 2．methods： methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。 3．watch： 观察和响应 Vue 实例上的数据变动，一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方名，或者包含选项的对象，Vue 实例将会在实
2022-05-23 08:21:32
278
原创 作为程序员这个vuex的2G包都不知道就太low了吧。
作为程序员这个vuex的2G包都不知道就太low了吧。我相信每一个程序员都会使用localStorage,会存数据,会取数据,因为这和我们前端的工作可以说是必不可少,项目大点的时候几乎每天都要跟它大交道,作为一个有经验的开发人员来说,今天才发现比localStorage存取数据更好用的一个npm的2G背包,必须分享一下~vuex-persistedstate–数据持久化存储(适用于vue2)话不多说,上步骤第一步肯定是下包啦~npm install --save vuex-persisteds
2022-05-18 22:19:16
1005
原创 当面试官问到EventLoop , 你知道是什么吗
什么是 Event Loop?提起EventLoop,就必须知道什么是进程什么是线程,还有事件和循环浏览器本身是一个复杂的系统，它要做的事情非常多，例如： 执行js代码，请求图片资源，解析css，渲染页面，响应鼠标的点击等等。在实现层面，浏览器内部会用不同的功能模块去完成不同的事情。这些不同的模块就体现为进程浏览器进一步把进程进行划分：主进程。用来协调控制其他子进程。GPU进程。用于3D绘制等。渲染进程。就是我们说的浏览器内核，负责具体页面的渲染，脚本执行，事件处理等。浏览器的每个tab页背后
2022-05-18 08:14:20
204
原创 v-model语法糖-你知道是啥吗
语法糖: 对一个更加复杂的操作的封装，讨好vue程序员的。说白了就是把功能做的更好,让更多的程序员使用为什么说 v-model是语法糖呢?每次在使用v-mode的时候,我们只知道v-mode可以用来双向绑定数据,更改数据视图也会同步更新,更改视图,数据也会同步.但是很少人知道,v-mode其实是语法糖,你在代码中可能会这样用<input v-model="xxx" />其实 v-model也可以用在子组件上v-model 在自己定义的组件上使用<My
2022-05-15 20:11:21
329
原创 程序员都知道的vuex的使用小技巧,超好用
当访问某个数据项嵌套太深了，优化一下访问的方式我相信每一个程序员都会使用vuex吧,首先我承认vuex真的超好用,尤其是在项目特别大的时候,代码会看起来非常的简洁,也方便维护,但是项目大了,vuex的公共数据的嵌套也会越来越深,在组件中使用的时候就会像下面这张图一样,我要一直点啊点,才能拿到最里面的数据,项目大了点都要点老半天…在我的不断尝试中,成功的发现了,vuex其实有一个辅助函数map可以解决这个问题,下面就把我总结到的语法分享给大家啦~希望可以帮到你辅助函数map作用：简化使用stat
2022-05-14 20:32:59
191
原创 言简意赅的vue路由简介
路由 路由：就是一一对应关系的集合。文章目录路由前端路由工作原理一、路由-官方路由基本使用步骤二、声明式导航-router-link1. Router-link组件介绍vue路由传参的方式图示-查询字符串图示-params传参vue路由接收参数路由-重定向配置路由路由404三、编程式导航vue路由接收参数三、路由嵌套总结前端路由工作原理前端
2022-05-11 21:50:28
648
1
原创 哇~渲染引擎的重绘与回流还可以这样理解
关于渲染引擎的重绘与回流介绍浏览器渲染解析页面完整流程1.先解析HTML，生成DOM树（重要步骤）2.后解析CSS，生成样式规则3.根据DOM树与样式规则，得到一颗渲染树Render Tree（重要步骤）DOM树：只有结构没有样式渲染数：DOM树 + CSS样式 （可以理解为附加了样式的DOM树）4.渲染引擎开始工作，解析渲染树。这个步骤发生 回流(又称重排) : 计算节点的尺寸、结构、布局5.开始绘制这个步骤发生重绘 : 根据重排结果进行绘制页面
2022-05-10 21:26:54
133
原创 vue中的匿名插槽和具名插槽
vue中的插槽想要彻底搞清楚vue的插槽,首先我们要清楚什么是插槽?为什么要使用插槽?怎么使用插槽?首先插槽可以理解成生活中的相框,和相片的关系要想把一张美丽的照片放入相框,我们需要具备两个条件一个相框: 子组件中用来占位的<slot></slot>,相当于子组件挖了一个坑,这个坑需要父组件传东西过来填充一张照片:父组件传递的内容相信前面的介绍,你大概知道了插槽是什么知道了什么是东西,接下来我们一起来看一下插槽的作用在使用插槽的时候有人会有疑问,为什么不直接
2022-05-09 21:46:02
946
原创 父组件的生命周期和子组件的生命周期谁会先被触发
生命周期:一个组件从 创建 到 销毁 的整个过程就是生命周期生命周期函数(钩子函数)vue 框架内置函数，随着组件的生命周期，自动 按次序 执行作用：特定的时间点，执行某些特定的操作场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据四个阶段:初始化 => 创建组件 => beforeCreate created挂载 => 渲染显示组件 => beforeMount mouted更新
2022-05-08 21:47:47
181
原创 数组的findIdex和indexOf异同点,你知道吗
findIdex方法作用:查找元素的下标数组的findIdex和indexOf异同点:相同点: 功能一致,都是查找元素的下标.有则返回下标,无则返回-1不同点: 应用场景不同indexOf : 查找数组中元素的值类型findIdex : 查找数组/对象中元素的引用类型(根据条件查询数组中满足条件的元素的索引值)特点:a.回调函数执行次数!=数组长度b.回调函数内部的returnreturn true : 循环结束,找到了符合要求的元素,返回该元素的下标return false : 循
2022-05-07 22:48:32
215
原创 偷偷瞄到公司的面试题---dom节点的Attribute和Property有何区别?
1、 什么是Property 每 个DOM节点都是一个object对象，有自己的property和method原则上 property 应该仅供 js 操作，不会出现在 html 中（默认属性除外： id/src/href/className/dir/title/lang等），和其他js object一样，自定义的property也会出现在object的for…in遍历中2、 什么是Attribute attribute出现 在dom中，js提供了getAttribute/setAttribute.
2022-05-06 23:29:50
267
原创 对象和数组的互转,太丝滑了
实现数组转对象思路:1.循环遍历数组2.声明一个空对象3.在循环的时候给空对象赋值效果图 //数组转对象 let arr = [{ name: '李四', age: 12 }, { name: '王五', age: 21 }, { name: '张三', age: 32 }] let obj = {} arr.forEach(el => { // 对象的新增--[]语法 obj[e
2022-05-05 23:07:43
200
原创 浅谈vue的生命周期
生命周期是什么？vue实例从创建到销毁的过程。（vue实例创建，dom树完成渲染）钩子：简单来说就是回调函数。vue生命周期分为4个阶段8个钩子四个阶段：阶段一：创建（创建vue实例）beforeCreate 、 created阶段二：挂载（data数据渲染到el）beforeMound、mounted阶段三：更新（检测data变化并更新el）beforeUpdate、updated阶段四：销毁（解除data与el的绑定关系）beforeDestory、des
2022-05-04 22:09:22
120
原创 什么是渐进增强和优雅降级?它们有什么不同？
优雅降级和渐进增强印象中是随着 CSS3 流出来的一个概念。由于低级浏览器不支持 CSS3，但 CSS3 的效果又太优秀不忍放弃，所以在高级浏览中使用 CSS3 而低级浏览器只保证最基本的功能。关键的区别 是他们所侧重的内容，以及这种不同造成的工作流程的差异举个例子： a {display：block； width：200px； height： 100px；background：aquamarine；/我就是要用这个新 css 属性/ transition：all 1s ease 0s；/可是发现
2022-05-04 20:51:28
291
原创 vue练手项目
案例一 折叠板<template> <div id="app"> <h3>案例：折叠面板</h3> <div> <div class="title"> <h4>芙蓉楼送辛渐</h4> <span class="btn" @click='fn()'> {{ isOK? '收起':'展开' }} <
2022-05-03 22:31:23
2420
原创 前端开发模式之vue练手小demo
今天和同事在一起聊天,突然聊到了前端的开发模式,一推人在一起探讨我们经过讨论后,一致认为前端的开发大致的开发过程跟下面这张图差不多,欢迎大家一起讨论,提出不同的建议. 以下附上一个小demo欢迎大佬前来指导效果图我和我的同事一致认为程序员应该具有开源精神,因为在这里附上源码<template> <div id="app"> <h3>案例：折叠面板</h3> <div> <div class="titl
2022-05-03 20:49:40
912
原创 玩转webpack
提起webpak,首先你需要知道webpack到底是什么?webpack是基于nodejs静态模块化的打包器,除了打包代码还具有翻译和压缩的功能再使用webpack之前要先使用下面代码初始化文件,生成package.json文件-npm init -y现在就可以开始安装webpack了npm i webpack webpack-cli -D前端很多悲惨故事，都是是从版本不一致开始的。采用局部安装的方式来安装它，注意，它只是一个开发依赖，并不是生产依赖，所以在命令行中加上-D。安装成
2022-05-02 20:08:17
468
原创 H5 和C3 的这些新特性.你都知道吗
H5 新特性1、拖拽释放(Drap and drop) API ondrop拖放是一种常见的特性，即抓取对象以后拖到另一个位置在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放2、自定义属性 data-id3、语义化更好的内容标签(header,nav,footer ,aside, article, section)4、音频 ,视频(audio, video) 如果浏览器不支持自动播放怎么办? 在属性中添加 autoplay(谷歌浏览器不支持音频自动播放，但是视频支持静音自动播放)5、画
2022-05-02 14:10:19
583
原创 npm 下载为什么很慢?解决方案来了
修改镜像源下包速度慢的原因：默认情况下，npm 从一个名为 https://registry.npmjs.org/ 的服务器上下包。这个服务器在国外，因此下包速度会非常慢。解决方案：把 npm的下包地址，从国外的服务器切换为国内的服务器。检查当前的下包地址：npm config get registry把下包的地址切换为国内的淘宝服务器npm config set registry=https://registry.npm.taobao.org/...
2022-04-26 16:12:47
9649
1
原创 每天一个面试题---typeof与instanceof的区别是什么？
typeof与instanceof的区别是什么？在JavaScript中，判断一个变量的类型可以用typeof。1、数字类型、typeof返回的值是number。比如说：typeof(1)，返回值是number2、字符串类型，typeof返回的值是string。比如typeof(“123”返回值时string)3、布尔类型，typeof返回的值是boolean。比如typeof(true)返回值时boolean4、对象、数组、null返回的值是object。比如typeof(window)，typ
2022-04-25 20:01:40
1217
原创 防抖和节流
函数的防抖和节流1.函数防抖函数防抖：单位时间内，频繁触发事件，只会触发最后一次函数防抖实际开发应用场景： 实时获取输入框文本2.函数节流函数节流：单位时间内，频繁触发事件，只会触发一次函数节流应用场景 ： 解决高频事件，频繁触发事件浪费性能...
2022-04-25 19:56:59
136
原创 ES6新语法中最常用的几个数组语法
1.map方法作用: 映射数组(遍历数组,修改数组中的每一个元素)特点:a.回调函数执行次数==数组长度b.回调函数内部的returnreturn 新数组的元素没有return 返回值都是undefinedc.map方法的返回值返回映射之后的新数组let arr = [81, 90, 100, 23, 50]//需求：找出偶数的元素 let res = arr.filter(item => item % 2 == 0) console.log(res)
2022-04-23 20:28:34
599
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人