- 博客(54)
- 收藏
- 关注
RSS订阅原创 web前端面试中常问的问题
vue2和vue3的vue-routevue2的中是使用this.$router进行跳转页面，传递参数，使用this.$route来接受参数，而在vue3中时都是写在setup中拿不到this所以需要进行那个单独的引入，从vue-router中引入并解构useroute或userouter并将其执行后的返回值用一个变量接收，那么这个变量就想当于vue2中的this.$toute或this.$touter，其余跳转页面传参或接收参数的方式和vue2一致。vuex因为setup中无法获取this实例
2022-03-02 21:11:27
3389
原创 Vue动态绑定、添加input
这个过程用到了Vue+element-ui（1）首先给el-input加上v-for循环一个数据，并且v-model绑定这个数据中的属性，这样就可以在页面中展示所有的input框了，（2）动态绑定：先模拟一个传过来或者是请求到的数据，循环遍历这个数据，并把每个数据中的属性赋值给之前el-input循环的那个数据中的属性，这里推荐for-of循环。（3）动态添加：每点击一次就往el-input循环的那个数据中添加新的属性<template> <div class=".
2022-03-01 20:30:27
8489
原创 css让元素居中的几种方式
1、水平居中1、水平居中<div style="width:200px;margin:0 auto;background-color: yellow;">水平居中</div>直接设置marign为0，auto2、绝对定位水平垂直居中<div style="position: absolute; width: 500px; height: 300px; margin: auto; top: 0; left:
2022-02-24 18:45:12
2459
转载 微信小程序（uni-app）
页面基本配置backgroundColor 下拉刷新的背景色,下拉刷新的部分才是背景 backgroundTextStyle 小程序的背景文本样式只有light浅色和dark深色两个值 navigationBarBackgroundColor 导航条的背景色 navigationBarTitleText 导航条的标题文本 navigationBarTextStyle 导航条的文本颜色只有black黑色和white白色两个值 onReachBottom..
2022-02-22 16:03:31
834
原创 vue修改数据页面不重新渲染
使用vue，遇到几次修改了对象的属性后，页面并不重新渲染一、直接添加属性的问题<template> <div> <p v-for="(value,key) in item" :key="key"> {{ value }} </p> <button @click="addProperty">动态添加新属性</button> </div></template><scri
2022-02-17 16:28:00
458
原创 element项目打包优化（全是重点）
1.项目优化分为五步走实现步骤：A.生成打包报告，根据报告优化项目B.第三方库启用CDNC.Element-UI组件按需加载D.路由懒加载E.首页内容定制2.添加进度条npm安装 npm install --savenprogress打开main.js，编写如下代码//导入进度条插件import NProgress from 'nprogress'//导入进度条样式import 'nprogress/nprogress.css'........
2022-02-17 15:33:50
2123
原创 js中 “=“ “==“ “===“的区别
=是赋值的意思，是让左边的值等于右边的值，比如：var a=1;那么现在alert(a)就是1，当然右边可以是变量，如：var a=1; var b也是1; ==是判断等于的意思，返回的是一个布尔值，如：alert(1==1);将返回true，因为1等于1，如果 alert(1=='1');也返回true，虽说后面的1是字符串类型，但是==是不判断类型的，所以还是true，如果：alert(1=='2')就是false了，因为1不等于2; 三个===也是判断使用的，但是它要比双==判断的严谨一点，它的判
2022-02-16 15:28:23
378
原创 ECharts
安装npm install echarts @4.6.0 --save 目前推荐使用4.6.0版本，因为其他版本看你数据不太稳定，默认下载的是最新版本；在项目中引入echartsimport * as echarts from 'echarts';// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 绘制图表myChart.setOption({ t..
2022-02-16 10:57:34
283
原创 es6新增语法
一、新的变量声明方式 let/与var不同，新的变量声明方式带来了一些不一样的特性，其中最重要的两个特性就是提供了块级作用域与不再具备变量提升。通过2个简单的例子来说明这两点。{ let a = 20;}console.log(a); // a is not defined而这个简单的例子，会被编译为：{ let _a = 20;}console.log(a); // a is not defined// ES5console.log(a); /
2022-02-15 16:35:34
522
原创 CSS3有哪些新特性
新增选择器p:nth-child（n）{color: rgba（255, 0, 0, 0.75）}弹性盒模型 display: flex;多列布局 column-count: 5;媒体查询 @media （max-width: 480px） {.box: {column-count: 1;}}个性化字体 @font-face{font-family:BorderWeb;src:url（BORDERW0.eot）；}颜色透明度 color: rgba（255, 0, 0, 0.75）；
2022-02-15 16:23:04
105
原创 如何系统的学习前端
目录1.新手入门阶段2.技术突破阶段1、 制定好一下系统的web前端学习规划2、 老师很重要3、 机会都是留给有准备的人4、 多接触项目5、 培养独立解决问题的能力6. 掌握得当的学习方法其实不论是小白程序员还是有了工作经验的成熟程序员，不同阶段的人对前端学习和职业发展总有自己的迷茫，简单汇总了下，发现大家出现的问题主要是 3 种：1、行业竞争变大，初级前端工程师泛滥，发展预冷；2、部分有技术追求和热情的中级工程师，工作了几年也开始接触管理岗，但做了才发现，技术积
2022-02-15 16:17:10
2995
1
原创 介绍下你对html的理解
1.使用正确的标签做正确的事情。2.html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;3. 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO;4.使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。——HTML：超文本标记语言，一种用于创建网页的标准标记语言； ——HTML5：目前最新的HTML标准，包含新的元素、属性、行为，基于它们的功能特征将他们分成不同
2022-02-15 13:43:01
992
原创 vue路由，路由传参（parmas,query）
一、Vue路由基础用法：1 .安装 npm install vue-router --save2 .main.js中//Vue路由：引入import VueRouter from 'vue-router'Vue.use(VueRouter)//Vue路由：引入并创建组件import BYHome from './components/BYHome.vue'import BYNews from './components/BYNews.vue'import HelloWorld fr
2022-02-14 21:15:46
641
原创 重写Router的push方法
vue中，如果跳转同一个页面路由，虽不会影响功能，但是会报错原因：路由的push会向历史记录栈中添加一个记录，同时跳转同一个路由页面，会造成一个重复的添加，导致页面的报错解决方案：在router的index.js中重写vue的路由跳转pushconst originalPush = Router.prototype.pushRouter.prototype.push = function push(location) { return originalPush.call(th.
2022-02-14 18:50:57
1066
原创 MVC/MVVM模式特点及区别
一.概述 MVC,MVP,MVVM是三种常见的前端架构模式(Architectural Pattern),它通过分离关注点来改进代码组织方式。不同于设计模式(Design Pattern),只是为了解决一类问题而总结出的抽象方法，一种架构模式往往能使用多种设计模式。 MVC模式是MVP,MVVM模式的基础，这两种模式更像是MVC模式的优化改良版,他们三个的MV即Model，view相同，不同的是MV之间的纽带部分。本文主要介绍MVC与MVVM的应用与区别，因为MVP好像不是很常用。...
2022-02-13 19:52:19
324
原创 vue自定义过滤器 filter
过滤器就是一个数据经过了这个过滤器之后出来另一样东西。 vue中的过滤器分为两种：局部过滤器和全局过滤器 全局过滤器 // global-filter是过滤器名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值. Vue.filter('global-filter',(val,...args)=>{ console.log(`需要过滤的数据是:${val}`) return val + ' 过滤器追加的数据' }) var a
2022-02-13 18:49:16
329
原创 vue自定义指令的应用场景
使用自定义指令背景目录使用自定义指令背景常用案例1、 输入框自动聚焦2 下拉菜单3. 相对时间转换代码复用和抽象的主要形式是组件。 当需要对普通 DOM 元素进行底层操作，此时就会用到自定义指令 但是，对于大幅度的 DOM 变动，还是应该使用组件常用案例1、 输入框自动聚焦// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时 inserted: function (el
2022-02-13 18:44:45
96
原创 vue中如何自定义指令directive
一、 什么是自定义指令我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能，对普通 DOM元素进行底层操作，这时候就会用到自定义指令。除了核心功能默认内置的指令 (v-model和 v-show)，Vue 也允许注册自定义指令指令使用的几种方式：//会实例化一个指令，但这个指令没有参数 `v-xxx` // -- 将值传到指令中`v-xxx="value"` // -- 将字符串传入到指令中，如`v-html="'<p>内容</.
2022-02-13 18:42:58
284
原创 vue自定义组件
你封装过组件吗？？ 说一下组件封装？？？？ 你在项目中是如何封装组件的？？？？？ …以上问题是面试官，最常问到的问题？那么你应该如何回答呢？答： 我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能
2022-02-11 15:13:28
220
原创 constructor，__proto__，prototype的三角关系
假设有一个构造函数Fn 一个Fn的实例化对象 obj构造函数Fn的prototype属性指向了构造函数的原型对象Fn.prototype实例对象obj的__proto__属性指向了构造函数的原型对象Fn.prototype构造函数的原型对象的constructor属性又指回了构造函数Fn,...
2022-02-11 08:18:00
423
原创 element接口版分页
<template> <div class="shopList"> <!-- 商品列表 --> <el-breadcrumb separator-class="el-icon-arrow-right" class="right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> .
2022-02-07 19:39:11
445
原创 vue知识总结
为何组件的data必须是一个函数一、实例和组件定义data的区别vue实例中的data属性既可以是一个对象，也可以是一个函数const app = new Vue({ el:"#app", // 对象格式 data:{ foo:"foo" }, // 函数格式 data(){ return { foo:"foo" } }组件中定义data属性，只能是一个函数
2022-02-07 16:12:13
1518
原创 js数组排序
1.冒泡排序法将数组中的相邻两个元素进行比较，将比较大（较小）的数通过两两比较移动到数组末尾（开始），执行一遍内层循环，确定一个最大（最小）的数，外层循环从数组末尾（开始）遍历到开始（末尾）2. 插入排序法（插队排序）将要排序的数组分成两部分，每次从后面的部分取出索引最小的元素插入到前一部分的适当位置从第一个元素开始，该元素可以认为已经被排序； 取出下一个元素，在已经排序的元素序列中从后向前扫描； 如果该元素（已排序）大于新元素，将该元素移到下一位置； 重复步骤3，直到找.
2022-01-29 18:19:05
112
原创 js数据类型判断
四种方法typeof、instanceof、constructor、Object.prototype.toString.call()、jquery.type()1 .typeofconsole.log( typeof 100, //"number" typeof 'abc', //"string" typeof false, //"boolean" typeof undefined, //"undefined" typeof null, //"object
2022-01-20 10:52:57
72
原创 递归手写深拷贝
浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。赋值和浅拷贝的区别赋值：把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。浅拷贝：浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基
2022-01-19 17:24:27
116
原创 js基础面试题
js数据类型有哪些基本数据类型（值类型）： Number、String、Boolean、Undefined、Null、Symbol（es6新增独一无二的值） 和 BigInt（es10新增）；引用数据类型: Object。包含Object、Array、 function、Date、RegExp。备注： 基本数据类型，又称值类型。栈堆存储值类型栈存储： 主要针对（Number、String、Boolean）三种数据。直接存储在栈（stack）中，占据空间小、大小固定，属于被频繁使用数据，所以放
2022-01-19 17:22:26
127
原创 用原生js写一个延时器
直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <ti
2022-01-14 15:55:49
534
2
原创 前端js面试题
javascript原型与原型链1. prototype每个函数都有一个prototype属性，被称为显示原型2._ _proto_ _每个实例对象都会有_ _proto_ _属性,其被称为隐式原型每一个实例对象的隐式原型_ _proto_ _属性指向自身构造函数的显式原型prototype3. constructor每个prototype原型都有一个constructor属性，指向它关联的构造函数。4. 原型链获取对象属性时，如果对象本身没有这个属性，那就会去他的原型__pro
2022-01-14 15:33:42
1469
原创 vue-cli4打包优化
项目开始时webpack配置vue-cli3以后，我们修改webpack配置，需要自己在项目根路径下创建vue.config.js文件。一、 配置 proxy 跨域使用vue-cli发开项目，在本地开发环境中，如果遇到跨域的问题。可以通过配置proxy的方式，解决跨域问题：module.exports = { devServer: { open: false, // 自动启动浏览器 host: '0.0.0.0', // localhost port:...
2022-01-13 16:50:19
880
原创 浏览器兼容性问题
Css兼容性问题：目录Css兼容性问题：3.js兼容Css兼容性问题：1.不同浏览器的标签默认的margin和padding不同解决办法：可以通过设置全局样式来解决这个问题，这样所有的样式都会重置，初始值都会相同了。2.css3新属性，加浏览器前缀兼容早期浏览-moz-/ 火狐浏览器 /-webkit-/ Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /-o-/ Opera浏览器(早期) /-ms-/ IE /3.块属性标签float后，又有横...
2022-01-12 16:43:08
118
原创 src与href
1. hrefhref：是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系<link href="common.css" rel="stylesheet"/>当浏览器解析到这一句的时候会识别该文档为css文件，会下载并且不会停止对当前文档的处理，这也是为什么建议使用li..
2022-01-12 16:35:24
393
原创 浏览器兼容性问题
在不同的浏览器中，浏览器的内核都是不相同的，所以各个浏览器对网页的解析存在一定的差异。浏览器内核主要分为两种，一是渲染引擎，另一个是js引擎，所以浏览器的兼容性问题一般是指:css兼容、js兼容Css兼容性问题：1.不同浏览器的标签默认的margin和padding不同解决办法：可以通过设置全局样式来解决这个问题，这样所有的样式都会重置，初始值都会相同了。2.css3新属性，加浏览器前缀兼容早期浏览-moz-/ 火狐浏览器 /-webkit-/ Safari, 谷歌浏览器等使用W..
2022-01-12 16:33:38
3392
原创 css3与H5新特性
目录1.css3新特性选择器2.背景和边框3.文本效果4.2D/3D转换2.html5新特性1. 语义化标签1.css3中新增的一些特性大概可以分为：选择器，背景和边框属性，文本效果，2D/3D转换选择器常规选择器1.标签选择器(如：body,div,p,ul,li)2.类选择器3.ID选择器4.全局选择器(如：*号)5.组合选择器6.继承选择器(如：div p)7.伪类选择器(4种不同的状态：link、visited、act
2022-01-12 16:32:33
175
原创 cssHack
目录1. 什么是CSS Hack？2. 属性Hack | 属性前缀法(即类内部Hack)3. 选择符Hack | 选择器前缀法(即选择器Hack)4. 条件Hack | IE条件注释法(即HTML条件注释Hack)5. 注意：1. 什么是CSS Hack？由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获...
2022-01-12 07:36:59
291
原创 两/三栏布局（圣杯双飞翼）
五、两/三栏布局（圣杯双飞翼）、两栏布局,左边定宽，右边自适应左边左浮动，右边加oveflow:hidden;变成BFC清除左侧浮动元素的影响三栏布局，圣杯布局、双飞翼布局原来我做的主要是后台管理和一些移动端的项目，这两种布局呢是我原来查阅资料时看到的，所以就做了个简单的理解。圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。（中间先加载渲染）首先要给两侧设置padding预留出相应的空间随后
2022-01-11 07:30:20
117
原创 flex布局
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。一、Flex 布局是什么？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex;}行内元素也可以使用 Flex 布局。.box{ display: inline-fl
2022-01-10 07:40:29
70
原创 vuex模块化
怎么分模块1 在vuex的store文件夹里添加一个js文件，内容如下export default { // 代表这是一个命名独立的空间，不会与index.js里的命名冲突与污染namespaced:true, state:{}, mutations:{}, getters:{}, actions:{}, }2 vuex的index.js引入并定义// 引入import son from './son.js' // 在modules里注册expor
2022-01-07 21:13:31
64
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人