前端面试题6道开胃菜css+js+vue(代码片段)

风尚云网 风尚云网     2023-03-07     301

关键词:

css区 


一:BFC的相关:

BFC的概念?

了解:CSS2.1 中只有 BFC 和 IFC css3中还增加了 GFC 和 FFC。

BFC 定义:

BFC(Block formatting context)直译为“块级格式上下文”, 它是一个独立渲染区域,只有BLOCK-LEVEL BOX参与, 他规定内部的BLOCK-LEVEL BOX如何布局, 并与这个区域外部不相干

 如何开启元素的BFC?

1、设置元素浮动 float

2、设置元素绝对定位 position: absolute;

3、设置元素为inline-block

4、将元素的overflow设置为一个非visible的值

 推荐方式:将overflow设置为hidden是副作用最小的开启BFC的方式。

BFC有什么作用呢?当开启元素的BFC以后,元素将会具有那些特性:

1、父元素的垂直外边距不会和子元素重叠

2、开启BFC的元素不会被浮动元素所覆盖

3、开启BFC的元素可以包含浮动的子元素

二:类与ID的区别:

1、使用范围不同:

CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。BODY内的所有元素都有CLASS属性。ID属性的操作类似于CLASS属性,ID属性的值在整篇文档中必须是唯一的。

2、表示方法不同:

CLASS类选择器以标志符(句点)开头,用于指示后面是哪种类型的选择器。对于类选择器,之所以选择句点是因为在很多编程语言中它与术语“类”相关联。翻译成英语,标志符表示“带有类名的元素”。ID选择器的标志符是散列符号(#)。标志符用来提醒浏览器接下来出现的是ID值。

3、用途不同:

可以使用CLASS属性来分类元素。ID属性用来标记文档中唯一元素。


JS区


三:原型,原型链,继承

1.原型:

JavaScript 规定,每一个构造函数都有一个 prototype 属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数所拥有

2.对象原型

      使用构造函数创建出的对象都会有一个属性_proto_,它指向构造函数的 prototype 原型对象。原型对象里面也有一个 constructor 属性 ,它指回构造函数本身。

3.简述原型链原理及作用:

1.当访问一个对象的成员时,首先查找这个对象自身有没有该成员。

2.如果没有就查找它的原型对象

3.如果还没有就查找原型对象的原型(Object的原型对象)。

4.依此类推一直找到 Object 为止(null)。

__proto__对象原型的意义就在于为对象成员查找机制提供一个方向,或者说一条路线,而这条路线就是原型链

4.原型链继承的本质

重写原型对象,代之是一个新类型的实例.

5.继承的方法:

1.原型链继承;2.构造函数继承;3.组合继承; 4.原型式继承; 5.寄生式继承 ;6.寄生组合式继承;

6.继承原理:

通过让子类的原型等于父类的实例,来实现继承。
优点:继承了超类型的构造函数的所有属性和方法。
缺点:1、在创建子类实例时,无法向超类型的构造函数传参,继承单一。
   2、所有新实例都会共享父类实例的属性。

(原型上的属性是共享的,一个实例修改了原型引用类型的属性,另一个实例的原型属性也会被修改!)

四.Ajax的优缺点:

 优点:    减轻服务器的负担,       按需取数据,最大程度的减少冗余请求,

                局部刷新页面,              减少用户心理和实际的等待时间,带来更好的用户体验,

                基于xml标准化,            并被广泛支持,

                不需安装插件等,       进一步促进页面和数据的分离
 缺点:.对搜索引擎支持较弱。

              安全问题较大

              AJAX不能很好支持移动设备。

             客户端复杂,太多客户端代码造成开发上的成本。


 vue区


五:vue常用指令?


v-model 多用于表单元素实现双向数据绑定(同angular中的ng-model)
v-bind 动态绑定 作用: 及时对页面的数据进行更改
v-on:click 给标签绑定函数,可以缩写为@,例如绑定一个点击函数 函数必须写在methods里面
v-for 格式: v-for="字段名 in(of) 数组json" 循环数组或json(同angular中的ng-repeat)
v-show 显示内容 (同angular中的ng-show)
v-hide 隐藏内容(同angular中的ng-hide)
v-if 显示与隐藏 (dom元素的删除添加 同angular中的ng-if 默认值为false)
v-else-if 必须和v-if连用
v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误
v-text 解析文本
v-html 解析html标签
v-bind:class 三种绑定方法 1、对象型 'red:isred' 2、三元型 'isred?"red":"blue"' 3、数组型 '[red:"isred",blue:"isblue"]'
v-once 进入页面时 只渲染一次 不在进行渲染
v-cloak 防止闪烁
v-pre 把标签内部的元素原位输出

六:Vue的基本原理

1、建立虚拟DOM Tree,通过document.createDocumentFragment(),遍历指定根节点内部节点,根据 prop 、v-model等规则进行compile;
2、通过Object.defineProperty()进行数据变化拦截;
3、截取到的数据变化,通过发布者-订阅者模式,触发Watcher,从而改变虚拟DOM中的具体数据;
4、通过改变虚拟DOM元素值,从而改变最后渲染dom树的值,完成双向绑定

完成数据的双向绑定在于Object.defineProperty()

前端面试套餐:vue面试题总结+javascript前端经典面试题+100道css面试题

...你学的怎样。评论我因为学习兴趣浓,从测试到java到前端一路 查看详情

前端经典面试题60道,附答案!(代码片段)

今天分享一篇比较全的面试题,包含JS、CSS、React、网络、浏览器、程序题等。……(以下所有答案仅供参考)简答题1、什么是防抖和节流?有什么区别?如何实现?参考答案防抖触发高频事件后n秒内函数只会执行... 查看详情

前端—每天5道面试题(代码片段)

前端—每天5道面试题(十二)每天进步1%不多就1%一、CSS3新特性有哪些1.颜色:新增RGBA,HSLA模式2.文字阴影(text-shadow、)3.边框:圆角(border-radius)边框阴影:box-shadow4.盒子模型:box- 查看详情

前端经典面试题60道,附答案!(代码片段)

大家好,我是漫步,今天分享一篇比较全的面试题,包含JS、CSS、React、网络、浏览器、程序题等。……(以下所有答案仅供参考)简答题1、什么是防抖和节流?有什么区别?如何实现?参考答案防抖触发高... 查看详情

前端—每天5道面试题(代码片段)

前端—每天5道面试题(十)每天进步1%不多就1%一、用div+css布局的好处?表现和内容相分离将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息。提高搜索引擎对网页的索引效率用只包含... 查看详情

看完这篇文章保你面试稳操胜券——(必考题)javascript篇(代码片段)

...CSS30道基础面试题包含HTML/CSS30道基础面试题✨还包含Git、前端优化、ES6、Axios面试题\\textcolorgreen还包含Git 查看详情

吊打面试官系列-58道vue面试题(代码片段)

1.vue优点?2.vue父组件向子组件传递数据?3.子组件像父组件传递事件?4.v-show和v-if指令的共同点和不同点?5.如何让CSS只在当前组件中起作用?6.的作用是什么?7.如何获取dom?8.说出几种vue当中的指令和它的用法?。9.vue-loader是什么... 查看详情

30道vue面试题,内含详细讲解(代码片段)

copyfrom:https://github.com/fengshi123/blog/issues/14  1、说说你对SPA单页面的理解,它的优缺点分别是什么?SPA(single-pageapplication)仅在Web页面初始化时加载相应的HTML、JavaScript和CSS。一旦页面加载完成,SPA不会因为用... 查看详情

太赞了!华为工程师总结的400道前端面试题和vue笔记资料提供免费下载(代码片段)

10月份很多小伙伴找我要一些前端面试题资料,于是我翻箱倒柜,把这份华为大牛总结的前端开发归纳笔记找出来,同时赠送直播、录播、视频、笔记、源码、软件包和价值1万元VUE笔记资料,免费共享给大家!... 查看详情

朝夕教育2023年03月其他-web前端基础面试题(vue专项_58道)(代码片段)

文章目录一、vue篇1、什么是MVVM2、Vue声明周期3、为什么vue中data必须是一个函数4、vue-router有几种导航钩子5、Vue的v-show和v-if区别6、vue-loader是什么?使用它的用途有哪些7、计算属性和watch的区别8、prop是什么9、vue组件通信10、... 查看详情

leetcode最常见的150道前端面试题(简单题上)(代码片段)

大家好,之前分享 leetcode最常见的150道前端面试题(简单题下)上篇来了。前言本文题目选自 LeetCode精选TOP面试题[1],而这些题在自己和同事亲身经历中,确实遇到的几率在百分之80%以上(成都和北京的... 查看详情

会js你就会node开胃菜(代码片段)

Node.js是什么?Node.js诞生于2009年,由Joyent的员工RyanDahl开发而成,目前官网最新版本已经更新到12.0.0版本,最新稳定的是10.15.3。Node.js不是一门语言也不是框架,它只是基于GoogleV8引擎的JavaScript运行时环境,同时... 查看详情

前端小小白—每日5道面试题打卡(十五)(代码片段)

【前端小小白】—每日5道面试题打卡(十五)每天进步1%不多就1%一、数组的方法有哪些?varlist=[1,2,3];list.pop();//删除数组的最后一个元素varlist=[1,2];list.unshift(0,1);//头部添加varlist=[0,1,1,2,3];list.push(4,5);//尾部添... 查看详情

前端—每天5道面试题(十三)(代码片段)

前端—每天5道面试题(十三)一、display:none;和visibilty:hidden;和opacity:0;和overflow:hidden的区别?display:none;隐藏自己,隐藏后不占据位置visibilty:hidden;隐藏 查看详情

前端—每天5道面试题(代码片段)

前端—每天5道面试题(十一)每天进步1%不多就1%一、简述对Web语义化的理解?就是让浏览器更好的读懂你写的代码,在进行HTML结构、表现、行为设计时,尽量使用语义化的标签,使程序代码简介明了࿰... 查看详情

前端—每天5道面试题(代码片段)

前端—每天5道面试题(九)每天进步1%不多就1%一、overflow有哪些属性值?Visible:默认值,内容不会被修剪,会呈现在元素框之外。Hidden:内容会被修剪,并且其余内容是不可见的。Scroll:内容... 查看详情

前端—每天5道面试题(十四)(代码片段)

前端—每天5道面试题(十四)每天进步1%不多就1%一、JavaScript是一门什么样的语言,它有哪些特点?javaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器... 查看详情

leetcode最常见的150道前端面试题(简单题下)(代码片段)

...#xff0c;确实遇到的几率在百分之80%以上(成都和北京的前端岗位)。本篇是简单题(下)20题左右,上半部分详见 简单题上(22题左右)[2]二叉树(DFS)二叉树前中后遍历 查看详情