![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端
文章平均质量分 60
web前端博客,包括HTML,CSS,Javascript,vue,React的知识点和解决方案
web青梅煮码
专注科技领域与IT圈内动态,致力于免费分享有价值的东西!
展开
-
2021年web前端面试集锦
一. HTML、CSS相关HTML5新特性、语义化语义化标签 : header nav main article section aside footer语义化意味着顾名思义,HTML5的语义化指的是合理正确的使用语义化的标签来创建页面结构,如 header,footer,nav,从标签上即可以直观的知道这个标签的作用,而不是滥用div。语义化的优点有:代码结构清晰,易于阅读,利于开发和维护方便其他设备解析(如屏幕阅读器)根据语义渲染网页。有利于搜索引擎优化(SEO),搜索引擎爬虫会根原创 2021-08-01 10:49:57 · 492 阅读 · 1 评论 -
Vue style里面使用@import引入外部css, 作用域是全局的解决方案
问题描述使用@import引入外部css,作用域却是全局的<template> </template> <script> export default { name: "user" };</script> <!-- Add "scoped" attribu...原创 2020-06-23 06:56:09 · 1803 阅读 · 0 评论 -
详讲H5-拖放(原生js将图片拖放另外一个元素里)
1:什么是拖放?1:拖放是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放2:元素的可拖放2:draggable 属性设置为 true <img draggable="true">3:元素中的拖放事件3:通过拖放事件,可以控制拖放相关的各个方面。其中最关...原创 2020-06-20 23:40:37 · 536 阅读 · 0 评论 -
JS实现div块的拖放,调换位置
主要是HTML5 的拖放(Drag 和 Drop)例子(不需要对div设置ID):<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function allowDrop(ev) { ev.preventDe...原创 2020-06-20 23:05:34 · 159 阅读 · 0 评论 -
VUE.DRAGGABLE实现从左到右拖拽功能
功能描述:1、左边【一级、二级、三级】字样是不能拖拽的,【item1、item2...】可以拖拽2、左边items位置固定,只能向右拖拽,不能上下拖拽,如:item7从左边拖到右边,左边的item7消失,右边增加item73、右边items可以自由拖拽,但不能向左拖拽4、右边items可以删除,如:点击item7的“×”,右边item7消...原创 2020-06-20 14:24:46 · 1119 阅读 · 1 评论 -
Vue项目骨架屏注入实践
相比于早些年前后端代码紧密耦合、后端工程师还得写前端代码的时代,如今已发展到前后端分离,这种开发方式大大提升了前后端项目的可维护性与开发效率,让前后端工程师关注于自己的主业。然而在带来便利的同时,也带来了一些弊端,比如首屏渲染时间(FCP)因为首屏需要请求更多内容,比原来多了更多HTTP的往返时间(RTT),这造成了白屏,如果白屏时间过长,用户体验会大打折扣,如果用户网...原创 2020-06-24 03:20:40 · 205 阅读 · 0 评论 -
“router-link”各种属性解释
在vue1.0版本的超链接标签还是原来的a标签,链接地址由v-link属性控制而vue2.0版本里超链接标签由a标签被替换成了router-link标签,但最终在页面还是会被渲染成a标签的至于为什么要把a换成router-link原因还是有的,比如我们之前一直惯用的nav导航里面结构是(ul>li>a),router-link可以渲染为任何元...原创 2020-06-24 00:38:12 · 331 阅读 · 0 评论 -
Element ui: form表单使用
form 表单赋值/取值取值:获取 form 表单的每个表单项的值:this.formName.property,比如:this.ruleForm.username,this.ruleForm.psw赋值:大部分都是下面这种方式赋值格式(property: value),一般的 input ,赋值和显示的事一致的,而有些则不一定。比如下拉选择列表 select ...原创 2020-06-20 13:56:40 · 839 阅读 · 0 评论 -
前端开发:如何写一手漂亮的 Vue
前几日听到一句生猛与激励并存,可怕与尴尬同在,最无奈也无解的话:“90后,你的中年危机已经杀到”。这令我很受触动。显然,这有些夸张了,但就目前这日复一日的庸碌下去,眨眼的功夫,那情形就会在这骨感的现实面前,悄然的被显现。所以,越发体验到,当必要有计划的去做,去写,去玩,去嗨,利用好这荷尔蒙分泌还算旺盛的时光,去厚积去博取,去发现去折腾;让自己的生命不在仅是工作与惆怅,还...原创 2020-06-07 05:29:23 · 176 阅读 · 0 评论 -
伪元素的妙用–单标签之美
:before和::before的区别在介绍具体用法之前,简单介绍下伪类和伪元素。伪类大家听的多了,伪元素可能听到的不是那么频繁,其实 CSS 对这两个是有区分的。CSS2及CSS3伪类区分CSS3伪元素单双冒号区分有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目...原创 2020-06-07 17:57:23 · 160 阅读 · 0 评论 -
CSS新特性的知识
CSS初学感觉很简单,但随着学习的深入才感觉CSS的水由多深,平常总会遇到各种坑,先总结一些经常遇到的坑大小写不敏感虽然我们平时在写CSS的时候都是用小写,但其实CSS并不是大小写敏感的.test{ background-COLOR:#a00; width:100px; height: 100px;}虽然...原创 2020-06-07 14:30:16 · 88 阅读 · 0 评论 -
Vue-travel学习笔记
vue去哪网跟学笔记记录学习点滴1. 初始化项目1.1 手机显示配适minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"阻止用户手滑发大缩小页面1.2 初始化样式 -->引入reset.css1.3 移动端多倍屏边框不准的问题 --> 引入 border....原创 2020-06-07 08:58:50 · 422 阅读 · 0 评论 -
理解 CSS 模块化
在瞬息万变的前端开发世界中,很难找到一个真正有意义的概念,并且将其清晰明了的向广大人民群众普及。把目光投向CSS,一个重大转折就是CSS预处理器的出现(在工具方面来看),其中,Sass应该是最为著名的一个。此外,还有 PostCSS,它和Sass略有不同,但是殊途同归——都是用浏览器不能解析的语法编写,并且最终编译成浏览器能够理解的语法。现在,又有一位新...原创 2020-06-07 05:46:46 · 141 阅读 · 0 评论 -
解决华为手机用rem单位,内容超出屏幕宽度问题
在h5手机页面上,用rem单位布局,配合js计算出一个根节点的font-size(原理是屏幕宽度乘以一个固定比例,如1/100),之后页面中所有的px全都换算成了rem单位来写,优点是能适配各种不同屏幕尺寸的手机,不需要写媒体查询!例如:设计稿是640px,用js计算出来的根节点font-size是100px(证明此时屏幕宽度是640px),那最外层的容器宽度就写成6.4rem(计算成像素也是640),正常情况下是内容宽度就会和屏幕宽度一样。然而某款华为手机、自带的浏览器下,最外层的容器宽度就会比屏幕宽转载 2020-06-07 09:01:18 · 2147 阅读 · 2 评论 -
scss,less,stylus这些css处理器该怎么选择
css作为前端三剑客,从诞生以来很少变化,css3都已经诞生了20年,和js的框架层出不穷相比,似乎css就不需要框架,就不需要更优化的写法。然而在追求极致的程序员面前,代码的可维护性,代码的优雅性有迫切希望改进css代码的编写,于是css预处理器诞生了css预处理器由于浏览器只能理解和识别纯CSS语法,因此不能简单地用全新的语言代替它。但是,目前的css确实有一些局限性,这在小型项目中可能并不重要,但是在处理庞大的样式表时确实会付出巨大的代价。要变通解决此问题,开发人员发明了CSS预处理器。本质上转载 2020-06-07 08:59:01 · 551 阅读 · 0 评论 -
Vuex中调用state数据
第一种:直接访问 <h1>姓名:{{$store.state.msg}}</h1>第二种:利用计算属性将想要用到的全局state数据,防止到组件的computed内部使用,v-model的内容将其获取和设置分开即可 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 .转载 2020-06-07 08:54:15 · 2486 阅读 · 0 评论 -
vue路由守卫(路由事件)的两种方式
第一种:写在router的js文件中第二种:写在组件文件中Go: 一点博客-青梅煮码转载 2020-06-07 08:51:12 · 545 阅读 · 0 评论 -
前端开发者常用的网站
1.npmNPM是随同NODEjs一起安装的包管理工具,能解决nodejs代码部署上的很多问题,常见的使用场景有以下几种:允许用户从NPM服务器下载别人编写的第三方包到本地使用允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用界面如下:2.Expressexpress基于 Node.js 平台,快速、开放、极简的 Web 开发框架关于Express的介绍可参考:当面试官问你关于Node.js的开发框转载 2020-06-07 08:45:38 · 290 阅读 · 0 评论 -
小程序里面的双向绑定和vue中的双向绑定有什么区别?
小程序中的数据双向绑定 . 首先通过 bindinput 绑定文本框的输入事件 . 在 data 中声明一个变量 content ,将其动态绑定成文本框的 value 值 . 在 bindinput 事件中通过事件参数 e.detail.value 可以获取到文本框中最新的 value 值 . 通过 this.setData 将文本框最新的 value 值 赋值给 动态绑定的value值 content 即可实现数据的双向绑定vue中的数据双向绑定 . 首先为文本框绑定...原创 2021-03-20 11:13:25 · 3493 阅读 · 0 评论 -
vuex最简单、最详细的入门文档
我在使用基于 vue.js 2.0 的UI框架ElementUI开发网站的时候 , 就遇到了这种问题 : 一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 但是表单 ( 子组件 ) 里的数据和页面 ( 父组件 ) 按钮交互的时候 , 它们之间的通讯很麻烦 :<!--父组件中引入子组件--><template> <div> <a href="javascript:;" @click="show = true">点击</a&..原创 2021-03-20 11:07:19 · 150 阅读 · 0 评论 -
vuex的mutation和action的区别和使用
mutation更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:this.$store.commit(“mutation函数名”,发送到mutation中的数据)Actionactions函数接受一个与 store 实例具有相原创 2021-03-20 11:05:38 · 2024 阅读 · 0 评论 -
vue组件中的data为什么是一个函数
一、总结1.vue中组件是用来复用的,为了防止data复用,将其定义为函数。2.vue组件中的data数据都应该是相互隔离,互不影响的,组件每复用一次,data数据就应该被复制一次,之后,当某一处复用的地方组件内data数据被改变时,其他复用地方组件的data数据不受影响,就需要通过data函数返回一个对象作为组件的状态。3.当我们将组件中的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data,拥有自己的作用域,类似于给每个组件实例创建一个私有的数据空间,原创 2021-03-20 11:04:14 · 10616 阅读 · 0 评论 -
Vue 组件间通信六种方式
前言组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。一般来说,组件可以有以下几种关系: 如上图所示,A 和 B、B 和 C、B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代)。针对不同的使用场景,如何选择行之有效的通信方式?这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式,如props、$emit/$on、vuex、$parent / $children、$attrs/$list.原创 2021-03-20 10:58:59 · 161 阅读 · 3 评论 -
delete和Vue.delete的区别
delete 只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变,length长度不会改变。Vue.delete 直接删除了数组 改变了数组的键值。 length长度改变了代码片段:<script> var a=[1,2,3,4] var obj=[1,2,3,4] delete a[1] console.log(a) vue.delete(obj,1) cons...原创 2021-03-20 10:57:23 · 2122 阅读 · 0 评论 -
vue是如何获取元素节点 ?
Js中:用document.getElement之类的语句来操作dom;vue:使用vue提供的api,用 ref 来获取节点;首先先用ref在元素上面做一个标记,然后用this.$refs.标记名来获取元素代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>document</title> <script src="https原创 2021-03-20 10:55:58 · 6040 阅读 · 1 评论 -
Vue项目优化首页加载速度
一、路由懒加载{ path: '/index', component: () => import('@/views/index'), //懒加载-访问该页面才加载 }这一步之后,打包后会发现很大的chunk-vendors.xxxxxxx.js不见了,其实是分成了不同的js文件二、使用CDN引入<script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>原创 2021-03-20 10:53:31 · 271 阅读 · 0 评论 -
vue中 不更新视图的处理办法?
方案一:利用Vue.set(object,key,val)例:Vue.set(vm.obj,'key','value')方案二:利用this.$set(this.obj,key,val)例:this.$set(this.obj,'key','value')方案三:利用Object.assign({},this.obj)创建新对象Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。Object.assign(target, ...so原创 2021-03-20 10:49:57 · 125 阅读 · 0 评论 -
vue实现路由懒加载几种方式
一、为什么需要路由懒加载vue在项目打包之后,会生成一个dist文件夹。在dist文件夹里面又有一个js/app.js文件,这里主要存放的是整个项目的业务逻辑代码。随着项目不断的开发迭代,业务逻辑越来越多,app.js文件也会越来越大。在线上就会容易出现进入首页时所需时间过长或者出现白屏的问题。使用路由懒加载可以分割代码,提高初始页的加载效率。**二、路由懒加载的方式1、使用ES6的import ( ) --推荐使用**const 组件名 = ( ) => import(‘组件路径’)(下原创 2021-03-20 10:46:15 · 1057 阅读 · 0 评论 -
支持web端和移动端的拖拽排序插件 dragula
Dragula是一款支持移动触摸屏设备的纯js元素拖放插件。这个元素拖放插件使用简单,浏览器兼容性好,能够实现通过鼠标或在移动设备中通过手指来拖动DOM元素的位置。代码演示:<script src="dist/dragula.js"></script><link rel="stylesheet" href="dist/drag...原创 2020-06-29 03:16:30 · 510 阅读 · 1 评论 -
touch.js – 移动设备上的手势识别与事件库
Touch.js是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具。Touch.js手势库专为移动设备设计。Touch.js对于网页设计师来说,是一款不错的辅助工具,可以减少很多写框架控制器的时间。网页合理使用Touch.js不但能增加网页的美观感,而且在节约时间,减少人力投入也有极大的帮助。Touch.js官网: ...原创 2020-06-29 20:43:20 · 403 阅读 · 0 评论 -
移动端实现拖拽的两种方法
移动端的项目经常会引入手势库来实现拖拽不过如果只是一两个页面用到拖拽,再引入一个手势库就很不划算最近的项目中就有这么一个需求:因为就这一个地方需要拖拽,所以我就没有引入第三方库移动端的拖拽有两种主流的实现方案:1. 将元素设置为固定定位,然后在拖拽的时候修改其定位,实现拖拽的效果;2. 使用 transform 中的平移tra...原创 2020-06-29 12:12:01 · 1528 阅读 · 0 评论 -
vue 中基于html5 drag drap的拖放
事情是这样的,右边有各种控件,可以拖动到右边自由区,在自由区内可以随意拖动。案例一:开始的我,so easy! 通过绑定元素的mousedown 事件,监听鼠标的mousemove,和mouseup 事件,于是我轻松实现了同一区域内元素可以拖着跑,上代码!move (e) { let odiv = e.target // 获取目标元...原创 2020-06-29 18:21:39 · 252 阅读 · 0 评论 -
vue2.0生命周期详解
生命周期图示生命周期详解周期名称内容beforeCreate(创建前)在数据观测和初始化事件还未开始created(创建后)完成数据观测,属性和方法的运算,初始化事件,$el属性未见beforeMount(载入前)在挂载开始之前被调用。相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此...原创 2020-06-24 20:51:16 · 136 阅读 · 1 评论