-
2021年web前端面试集锦
一. HTML、CSS相关 html5新特性、语义化 语义化标签 ： header nav main article section aside footer 语义化意味着顾名思义，HTML5的语义化指的是合理正确的使用语义化的标签来创建页面结构，如 header,footer,nav，从标签上即可以直观的知道这个标签的作用，而不是滥用div。 语义化的优点有: 代码结构清晰，易于阅读，利于开发和…- 1.1k
- 0
-
mvc 和 mvvm 的区别和应用场景？
1. MVC MVC 是 Model View Controller 的缩写 Model：模型层，是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。 View：视图层，用户界面渲染逻辑，通常视图是依据模型数据创建的。 Controller：控制器，数据模型和视图之间通信的桥梁，通常控制器负责从事图读取数据，控制用户输入，并向模型发送数据。 MVC的思想：Control…- 1.3k
- 0
-
call、apply、bind的应用和区别
1. call( ) 面试中常问的Js中关于call、apply、bind的问题，比如： 怎么利用call、apply来求一个数组中最大或者最小值 如何利用call、apply来做继承 apply、call、bind的区别和主要应用场景 首先，要明白这三个函数的存在意义是什么？答案是改变函数执行时的上下文，再具体一点就是改变函数运行时的this指向。有了这个认识，接下来我们来看一下,怎么使用这三个…- 852
- 0
-
Vue项目优化首页加载速度
一、路由懒加载 { path: '/index', component: () => import('@/views/index'), //懒加载-访问该页面才加载 } 这一步之后，打包后会发现很大的chunk-vendors.xxxxxxx.js不见了，其实是分成了不同的js文件 二、使用CDN引入 <script src="http…- 832
- 0
-
vue是如何获取元素节点 ？
Js中：用document.getElement之类的语句来操作dom; vue：使用vue提供的api，用 ref 来获取节点； 首先先用ref在元素上面做一个标记，然后用this.$refs.标记名来获取元素 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l…- 764
- 0
-
vuex最简单、最详细的入门文档
我在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 但是表单 ( 子组件 ) 里的数据和页面 ( 父组件 ) 按钮交互的时候 , 它们之间的通讯很麻烦 : <!--父组件中引入子组件--> <template> <div> <a href=…- 697
- 0
-
2021 年你应该尝试的 8 个 React 库
1. react-select 一个厉害的，强大的表单下拉选择框的库 代表了一种开发功能强大的 react.js 组件的全新方式，这些组件在完全可定制的同时开箱即用。 突出的功能特性 灵活的数据处理方法，具有可定制的功能。 灵活结合 emotion 这个库(一个 css in js 的强大的库 ). 组件注入API，用于完全控制UI行为。 选项组、portal 支持、动画等。 安装: npm i …- 989
- 0
-
微信 8.0 「裂开」「炸弹」的特效代码来了
微信 8.0 更新的一大特色就是支持动画表情，如果发送的消息只有一个内置的表情图标，这个表情会有一段简单的动画，一些特殊的表情还有全屏特效，例如烟花表情有全屏放烟花的特效，炸弹表情有爆炸动画并且消息和头像也会随之震动。本着作为前端工程师的职业精神，我就想看看能不能实现一个类似的特效。折腾许久之后，做出来的效果如下： 项目的核心是使用到了 lottie 动画库。Lottie 是 Airbnb 出品的…- 999
- 0
-
日常开发中px单位自动转换为rem的方法
开发工具： vscodecss预处理器： less 1. vscode安装cssrem插件 2. 修改css插件的默认配置 其默认转换px为16px, 需要改为当前项目设计的1rem所对应的px，vscode插件的默认安装目录一般为 C:Users用户名.vscodeextensions；找到 cipchk.cssrem-0.0.3 插件，打开package.json, 修改其默认…- 972
- 0
-
整理vue + element-ui常用的功能及代码片段
目录： 1 常用表头搜索：input+select+daterange 2 表格中对【上下架】、【排序】、【选择】进行编辑 3 使用vue-clipboard2实现复制链接的功能 4 使用vue-quill-editor实现富文本编辑 5 解决el-input类型为 type='number' 不显示上下箭头 6 解决当el-select选中值绑定为对象时处理 7 使用uplo…- 1k
- 0
-
自定义Toast函数
功能需求：有的toast不好用或者不符合产品样式，可以自定义一个toast函数，里面样式可以自己定义 /* Toast自定义函数 */ function Toast(msg, duration) { duration = isNaN(duration) ? 1500 : duration; var m = document.createElement('div'); m.inn…- 794
- 0
-
JS常用功能代码片段
1字符串操作 var a="aaabbbccc"; var b="la,la,la"; var concat=a.concat(b); //将a,b合并成同一个字符串 var split=b.split(','); //将b切割成数组 var index=a.indexOf('b'); //第一个b在数组中的位置 va…- 729
- 0
-
vue中父子组件通过ref传值「dialog组件」
前言 一个基于Vue的项目，有可能会很多的组件，组件之间难免需要进行数据的传递，比如: 父组件 传数据 给子组件；子组件传数据给父组件等，需要用到组件之间的通信处理方式。 项目中经常用到element中的dialog组件，现记录父子组件通过ref传值。 操作流程： 1.父组件中点击按钮吊起子组件模态框dialog进行内容设置，并给子组件传递id this.$nextTick(() => { …- 1.4k
- 0
-
富文本vue-quill-editor结合el-element实现自定义上传组件
需求一 图片上传 就是要一个富文本编辑器，然后有图片上传功能，因为vue-quill-editor是将图片转为base64编码，所以当图片比较大时，提交后台时参数过长，导致提交失败。 解决思路 将图片先上传至服务器，再将图片链接插入到富文本中 图片上传的话可以使用element或者iview，这里我以iview举例 图片上传区域要隐藏，自定义vue-quill-editor的图片上传，点击图片上传…- 811
- 0
-
Element UI 中国省市区级联数据
使用方法 1.安装 npm安装 npm install element-china-area-data -S 或者yarn安装 yarn add element-china-area-data 2.使用页面引入 import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText,…- 891
- 0
-
移动端常见问题解决方案
一、特殊样式 css3盒子模型 box-sizing:border-box; -webkit-box-sizing:border-boxx 清除点击高亮，设置transparent 完成透明 -webkit-tap-highlight-color:transparent; 取消ios里Button、Input上的默认样式 -webkit-appearance:none; 禁用长按页面时的弹出菜单 …- 935
- 0
-
移动端H5通过flexible.js+rem自适应适配方案
一、 rem实际开发适配方案 (1)按照设计稿与设备宽度的比例,动态计算并设置html根标签的font-size大小; (2)CSS中,设计稿元素的宽、高、相对位置等取值,按照同等比例换算为rem为单位的值; 技术方案1 技术方案2 媒体查询 flexible.js rem rem less vscode插件cssrem 总结:两种方案都可以，一般推荐第二种方案，更简单操作 二、简洁高效的rem配…- 1.1k
- 0
-
Promise解决回调嵌套问题及终极解决方案async 和 await
一、Promise 1.异步函数 与 回调函数的说明 回调函数: 把一个函数当成参数传递, 将来特定的时机调用, 这个函数就叫回调函数 什么时候会用到回调函数, 异步的时候 延时器 setTimeout ajax (传入函数, 作为回调, 将来在特定时机调用) console.log(1) setTimeout(function() { console.log(2) setTimeout(func…- 965
- 0
-
Vue.js快速入门-Vue实例详解与生命周期
Vue的实例是Vue框架的入口，其实也就是前端的ViewModel，它包含了页面中的业务逻辑处理、数据模型等，当然它也有自己的一系列的生命周期的事件钩子，辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。 1.1. Vue实例初始化的选项配置对象详解 前面我们已经用了很多次 new Vue({...})的代码，而且Vue初始化的选项都已经用了data、methods、el、co…- 735
- 0
-
touch.js的使用总结
Touch 手机端的操作 基本事件： touchstart //手指刚接触屏幕时触发 touchmove //手指在屏幕上移动时触发 touchend //手指从屏幕上移开时触发 touchcancel //触摸过程被系统取消时触发（少用） 一、事件绑定 touch.on(element,types,callback); 参数描述： element element或strin…- 885
- 0
-
Touch 移动设备上的 手势识别 与 Js事件库
Touch.js 是移动设备上的手势识别与事件库, 由百度云Clouda团队维护，也是在百度内部广泛使用的开发工具。 Touch.js手势库专为移动设备设计。 Touch.js对于网页设计师来说，是一款不错的辅助工具，可以减少很多写框架控制器的时间。 网页合理使用Touch.js不但能增加网页的美观感，而且在节约时间，减少人力投入也有极大的帮助。 Touch.js官网： https://www.a…- 2.1k
- 0
-
vue 中基于html5 drag drap的拖放
事情是这样的，右边有各种控件，可以拖动到右边自由区，在自由区内可以随意拖动。 案例一： 开始的我，so easy！ 通过绑定元素的mousedown 事件，监听鼠标的mousemove，和mouseup 事件，于是我轻松实现了同一区域内元素可以拖着跑，上代码！ move (e) { let odiv = e.target // 获取目标元素 // 算出鼠标相对元素的位置 let disX = e…- 942
- 0
-
dragula插件web端和移动端的拖拽排序
Dragula简介 Dragula是一款支持移动触摸屏设备的纯js元素拖放插件。这个元素拖放插件使用简单，浏览器兼容性好，能够实现通过鼠标或在移动设备中通过手指来拖动DOM元素的位置。 代码演示： <script src="dist/dragula.js"></script> <link rel="stylesheet" hre…- 1k
- 0
-
移动端实现拖拽的两种方法
移动端的项目经常会引入手势库来实现拖拽 不过如果只是一两个页面用到拖拽，再引入一个手势库就很不划算 最近的项目中就有这么一个需求： 因为就这一个地方需要拖拽，所以我就没有引入第三方库 移动端的拖拽有两种主流的实现方案： 1. 将元素设置为固定定位，然后在拖拽的时候修改其定位，实现拖拽的效果； 2. 使用 transform 中的平移 translate 属性实现拖拽。 方案一：固定定位 fixed…- 1.1k
- 0
-
￥优惠劵使用时效：无法使用使用时效：
之前
使用时效：永久有效优惠劵ID：×