IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 前端面试题6道开胃菜CSS+JS+VUE -> 正文阅读

[JavaScript知识库]前端面试题6道开胃菜CSS+JS+VUE

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()

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-12-28 22:49:56  更:2021-12-28 22:50:00 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 10:23:00-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码