前端小白-Mr鹏帅

过去的一段时间，我都认为接口请求封装是前端的必修课。只要是写过生产环境前端代码的人，应该都脱离不了异步接口请求，那么 接口请求 的封装是必经之路。直到前些天，我们屋某个美团写后台的小姑娘问我前端问题时。我才发现她们代码中的接口请求....} else {....}})....})这样写也不是说不好，在某种程度上，这增加了代码的可读性。但是我们大多数页面需要的接口都不止一个，那么我们的组件中极有可能出现数十上百行重复代码。那么随着请求的体量越来越大，我们的项目便越来越难以维护。

inputmode全局属性是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。

在日常开发的过程中,v-model指令是经常用到的,一般来说 v-model 指令在表单及元素上创建双向数据绑定,但 v-model 本质是语法糖。但提到语法糖,这里就不得不提另一个与v-model有相似功能的双向绑定语法糖了,这就是 .sync修饰符。...

Vue3简介面临的问题：随着功能的增长，复杂组件的代码变得难以维护，Vue3就随之而来，TypeScript使用的越来越多，Vue3就是TS写的所以能够更好的支持TypeScript在这里介绍就这么简单vue2的绝大多数的特性 在Vue3都能使用，毕竟Vue是渐进式的响应式原理进行使用Proxy实现，v-model可以传参了等等新特性基础工作使用Vue3的话，那么必须通过使用构建工具创建一个Vue3项目安装 vue-cli#npmnpmi...

问题: 从浏览器地址栏输入url到请求返回发生了什么你一看这种烂掉牙的问题，小case，但996面试大佬由此延展的问题已经远远超越了这个问题本身了，不信你就接着看。我回答了首先会进行 url 解析，根据 dns 系统进行 ip 查找。话音刚落，此时一位喜欢修福报的公司的大佬打断了我，说url为啥要解析，dns查询规则是什么？我一听就心里想，不按套路出牌啊，网上一般都没问这两个问题，心里再一想，俗话说，万事开头难，扛过这一波，答出来，就是阳光明媚，万物骚动的春天！先说为什么url要解析（也就

Promise封装请求大家平时如果使用Promise封装请求，那么当你使用这个请求函数的时候是这样的：//封装请求函数constrequest=(url,params)=>{returnnewPromise((resolve,reject)=>{//...dosomething})}//使用时consthandleLogin=()=>{request('/basic/login',{...

vue组件通信的方式，这是在面试中一个非常高频的问题，我刚开始找实习便经常遇到这个问题，当时只知道回到props和$emit，后来随着学习的深入，才发现vue组件的通信方式竟然有这么多！今天对vue组件通信方式进行一下总结，如写的有疏漏之处还请大家不吝赐教。1. props/$emit 简介props和$emit相信大家十分的熟悉了，这是我们最常用的vue通信方式。props：props可以是数组或对象，用于接收来自父组件通过v-bind传递的数据。当props为数组时，直接接收父组件.

前言由于vue3.2版本的发布，<script setup>的实验性标志已经去掉，这说明这个语法提案已经正式开始使用，并且我个人对这个方案表示非常喜欢，其他的更新[1]请自行了解。到目前为止，我认为 vue3 已经完全可以用于生产环境。在此将我的开发体验，总结至此，分享给大家。我认为前端架构核心工作是定制一套适合当前业务需求的解决方案，从而降低需求的增加而带来的技术实现的复杂度。下面我将从 16 个方向，逐渐带领大家搭建一套属于你自己的脚手架，制定一套合理的解决方案，为项目打下良好...

1.页面最下方，点击纯文本2.出现下拉框可以选择，如：选择html3.就有颜色啦~~~快去试试啦 。。。

俗话说的好“好记性不如烂笔头”，今天秉承着后期复习方便的态度，整理了一份Vuex基础知识点，并以思维导图的方式呈现出来，方便跟老铁们一起查漏补缺。Vuex.png一、基础1.png二、核心概念2.png2.1 State2_1.png2.2 Getter2_2.png2.3 Mutation2_3.png2.4 Action2_4.png2.5 Module2_5.png三、重要API3.png3.

猫咪瀑布流如下动态图，一张张不规则的可爱猫咪照片是否勾起了你的少女心呢？瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。瀑布流实现的方式有很多种，但是原理都是差不多的，本文我们来详细介绍下下面这个猫咪瀑布流是如何实现的。瀑布流原理mao.jpg如上图：第1、2、3、4、5张图排在容器内的第一行，即靠近顶部。我们会发现第6张图并没有排在第1张图的下面，而是排在了第3张图下面。其实这就是瀑布流的关键之处，那么第6张图片是根据什么排列的呢?

Vue Router 过渡是向Vue应用程序添加个性的一种快速简便的方法。它让我们可以在应用程序的不同页面之间添加平滑的动画/过渡效果。如果使用得当，它可以让我们的应用程序更加现代和专业，从而增强用户体验。在今天的文章中，我们介绍使用Vue Router过渡的基础知识，然后再介绍一些基本示例，希望能给大家一些启发和灵感。下面我们要创建的四个过渡页面。将 Vue 路由过渡添加到项目中通常，Vue路由器设置如下所示//defaulttemplate<template&g..

前言最近在整理日常开发中长涉及到的业务需求，正好想到了excel的解析与上传方面的事情，在开发中还是比较常见的，趁着周末做一下整理学习吧基本介绍主要基于Vue+element实现文件的解析与导出，用的的插件是xlsx[1],里面的具体方法，感兴趣的去研究一下，基本的样式，配置就不赘述了，也比较简单，我们直接上主食代码实现基本结构用户点击文件上传，将excel的表格已json的格式显示在页面中，用户进行操作，检查数据后对服务进行提交，上传操作用的的element...

前言由于vue3.2版本的发布，<script setup>的实验性标志已经去掉，这说明这个语法提案已经正式开始使用，并且我个人对这个方案表示非常喜欢，其他的更新[1]请自行了解。到目前为止，我认为 vue3 已经完全可以用于生产环境。在此将我的开发体验，总结至此，分享给大家。我认为前端架构核心工作是定制一套适合当前业务需求的解决方案，从而降低需求的增加而带来的技术实现的复杂度。下面我将从 16 个方向，逐渐带领大家搭建一套属于你自己的脚手架，制定一套合理的解决方案，为项目打下...

CSS3选择器有哪些？答：属性选择器、伪类选择器、伪元素选择器。CSS3新特性有哪些？答：1.颜色：新增RGBA，HSLA模式2. 文字阴影（text-shadow、）3.边框： 圆角（border-radius）边框阴影： box-shadow4. 盒子模型：box-sizing5.背景：background-size 设置背景图片的尺寸background-origin 设置背景图片的原点background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局

1. 起因最近部门在推微前端，需要按功能拆分多个子应用，主应用在加载的过程中经常出现加载失败的问题。因为https地址中，如果加载了http资源，浏览器将认为这是不安全的资源，将会默认阻止。后来在文档中添加了<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">完美解决。此时我才发现自己对meta简直一无所知，本文主要介绍meta，顺带也会提一提head中的其它标签。如有不对请指出，最

这个是商城购物车逻辑思路，做个记录也是乐于分享！大家相互交流学习电子商城加入购物车的设计流程1.判断用户是否登录，如果用户登录采用Db存储商品（即采用数据库的方式存购物车中的商品），如果是用户未登录（即采用Cookie的方式存购物车中的商品，并且采用加密方式）2.用户在点击购买按钮的时候，有可能是买的是单品，也有可能买的是组合套餐。从而得到点击按钮传过来的参数要么是商品的id，要么就是组合套餐的id号，同时带有商品数量。3.对于单品来说，先判断商品此时是否处于促销时间，所以通过id首先得判断是否是促

前言文章目的昭然若揭????‍????，整理汇总 Vue 框架中重要的特性、框架的原理。那 "前车之鉴" 从何而来？是的，我又要讲小故事了，但这次是故事的续集。故事第 1 集：CSS预处理器，你还是只会嵌套么 ？[2]故事第 2 集：【自适应】px 转 rem，你还在手算么？[3]为什么说是续集，因为这些都是同一大佬问的，在此感谢大佬，天降素材????。故事续集大佬：有看过 Vue 源码么？我：嗯嗯，看过。大佬：那大概讲一讲 nextTick 的底层实现 ？我：停顿

本文是作者在真实项目中遇到15 个 ElementUI 问题清单总结，希望对你有帮助，如果有误或还有其他问题欢迎评论区留言！1、form 下面只有一个 input 时回车键刷新页面原因是触发了表单默认的提交行为，给el-form 加上@submit.native.prevent就行了。<el-forminline@submit.native.prevent><el-form-itemlabel="订单号"><el-input...

前言前端开发中，只要涉及到列表渲染，那么无论是 React 还是 Vue 框架，都会提示或要求每个列表项使用唯一的 key，那很多开发者就会直接使用数组的 index 作为 key 的值，而并不知道 key 的原理。那么这篇文章就会讲解 key 的作用以及为什么最好不要使用 index 作为 key 的属性值。key 的作用Vue 中使用虚拟 dom 且根据 diff 算法进行新旧 DOM 对比，从而更新真实 dom ，key 是虚拟 DOM 对象的唯一标识, 在 diff 算法中 key 起着

一、前言有同学问：能否详细说一下 diff 算法。简单说：diff 算法是一种优化手段，将前后两个模块进行差异化比较，修补(更新)差异的过程叫做 patch，也叫打补丁。详细的说，请阅读这篇文章，有疑问的地方欢迎联系「松宝写代码」一起讨论。文章主要解决的问题： 1、为什么要说这个 diff 算法？ 2、虚拟 dom 的 diff 算法 3、为什么使用虚拟 dom？ 4、diff 算法的复杂度和特点？ 5、vue 的模板文件是如何被编译渲染的？

（一）前言Vue 代码中的 slot 是什么，简单来说就是插槽。<slot>元素作为组件模板之中的内容分发插槽，传入内容后<slot>元素自身将被替换。看了上面这句官方解释，可能一样不知道 slot 指的是什么，那么就来看看在 Vue 中，什么时候你需要用到 slot 。举例：一个组件的展示层你需要做到大体结构固定，但其内的部分结构可变，样式表现不固定。例如 Button 中是否显示 icon，或者 Modal 框的中间内容展示区域的变化等，要通过子组件自己实现是不...

Vue 3 的 Template 支持多个根标签，Vue 2 不支持 Vue 3 有 createApp()，而 Vue 2 的是 new Vue() createApp(组件)，newVue({template, render}) v-model代替以前的v-model和.sync vue3中v-model的用法 要求:3.1. props属性名任意，假设为x3.2. 事件名必须为"update:x"效果：<Switch :value="y" @up...

一、Vue3生命周期钩子setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 methodsonBeforeMount() : 组件挂载到节点上之前执行的函数；onMounted() : 组件挂载完成后执行的函数；onBeforeUpdate(): 组件更新之前执行的函数；onUpdated(): 组件更新完成之后执行的函数；onBeforeUnmount(): 组件卸载之前执行的函数；onUnmounted(): 组件卸载完

Vue2 生命周期beforeCreate：创建之前（el、data和message都还是undefined,不可用的）created：创建完毕（能读取到数据data的值,但是DOM还没生成）beforeMount：挂载之前（生成DOM,但此时{{ message }}还没有挂载data中的数据）mounted：挂载完毕（{{ message }}已经成功挂载渲染data的值）beforeUpdate：更新之前updated：更新完毕beforeDestroy：销毁之前destroyed：销

不知道大家在工作中是否遇到需要把一个非移动端的项目快速改造成为移动端适配的需求 此篇以 理论+实战演示 快速分析改造一个项目使其能进行移动端适配 同时对移动端适配方案也进行了总结 妈妈再也不用担心 一套代码兼容不同终端了 哈哈 开始吧❝自适应网站是什么？响应式网站，h5 网站，宽屏网站，这些都可以称为自适应网站，简单的说就是「一个网站可以兼容不同的终端」，比如：电脑、ipad、手机等。不需要为每个设备制作一个版本的网站，网站自动识别、兼容，完成电脑网站，手机网站、微网站。同时电脑网站、手机网站、微..

回复1，加入高级Node交流群作者：Sunshine_Linhttps://juejin.cn/post/6984210440276410399这几天发生了很多事（具体是啥我就不说了），这些事，吓得我把我这些年珍藏的Vue知识点都拿出来整理了一遍，巴不得能多总结出一道是一道，我拿出了我的笔记，并且使劲回忆，终于悟出了这50道知识点（咱不要太俗哈，不叫面试题，咱叫知识点）image.png荣耀黄金1. Vue的优点？Vue的缺点？优点：渐进式，组件化，轻量级，虚拟dom，响