初级前端面试总结-3
文章目录
- 初级前端面试总结-3
- 面试题汇总
- css
- 如何让文字居中。分辨率较大的话,如何让图片清晰居中显示。
- 如何居中div?如何实现居中一个浮动元素?如果让绝对定位的div居中?
- 如何水平居中一个div?
- 如何居中一个浮动元素?
- 如何让绝对定位的div居中
- 用纯CSS创建一个三角形的原理是什么?
- 清除浮动的方法?
- 实现预加载一张图片,加载完成后显示在网页中并设定其高度为50px?
- html
- HTML中那些标签是 块级标签,那些是 行内标签,空标签
- js
- jQuery获取dom元素的方式
- js的数据类型
- 声明函数和异名函数的区别
- js中全局变量和局部变量
- js中那些是存储在站里面,那些是存储在 队里面
- 闭包
- 特点
- 作用
- 函数里面的this含义?什么情况下,怎么用?
- 实现一个倒计时功能?
- 网络/安全
- IOS七层模型
- HTTP/TCP的区别
- HTTP的优点
- TCP连接——三次握手
- 常见的web攻击有哪些?如何防范?
- 1.xss跨站脚本攻击
- 2.CSRF攻击流程
- 3.SQL注入,关键是通过用sql语句伪造参数发出攻击
- 4.DDOS攻击(关键是通过手段发出大量请求,最后令服务器崩溃)
- 5.DNS劫持:
- 存储
- 请谈谈cookie的区别?
- 请求
- ajax同步请求/同时并发请求
- vue
- VUE中的MVVM的理解?
- vue生命周期的作用是什么?
- vue生命周期总共有几个阶段?
- 第一次加载页面会触发那几个钩子?
- DOM渲染在哪个周期中就已经完成了?
- 父组件与子组件自己传值,兄弟组件传值?
- vue与react的区别?
- vue与angular的区别?
- v-if 与 v-show的区别?
- $route 与 $router的区别?
- vue.js 的两个核心是什么?
- vue常见的指令?
- v-on可以绑定多个方法吗?
- 怎么定义vue-router的动态路由?如何获取传递过来的值?
- vue-router的作用
- 在vue中v-for为何要使用 :key
- 其他
- 前端页面由那三层构成?分别是什么?作用是什么?
- 列举IE与其他浏览器不同的特性?
- 请说出三种减少页面加载时间的方法?
- 参考文献
今年2月份,裸辞来到成都,经过2个月的漫长的找工作道路,最终拿到5个offer,于是总结在面试过程中,面试问题,后续带更新中……
面试题汇总
- css
- 如何让文字居中。分辨率较大的话,如何让图片清晰居中显示。
- 如何居中div?如何实现居中一个浮动元素?如果让绝对定位的div居中?
- 用纯CSS创建一个三角形的原理是什么?
- 清除浮动的方法?
- 实现预加载一张图片,加载完成后显示在网页中并设定其高度为50px?
- html
- HTML中那些标签是 块级标签,那些是 行内标签,空标签
- js
- jQuery、js、vue取dom元素的方式
- js的数据类型
- js中全局变量和局部变量
- js中那些是存储在站里面,那些是存储在 队里面
- 声明函数和异名函数的区别
- 闭包
- 函数里面的this含义?什么情况下,怎么用?
- 实现一个倒计时功能?
- 网络/安全
- IOS七层模型、TCP和IP所在的层次(七层)
- HTTP/TCP的区别
- 常见的web攻击有哪些?如何防范?
- 存储
- 请谈谈cookie的区别?
- 请求
- ajax同步请求
- vue
- VUE中的MVVM的理解?
- vue生命周期的作用是什么?
- vue生命周期总共有几个阶段?
- 第一次加载页面会触发那几个钩子?
- DOM渲染在哪个周期中就已经完成了?
- 父组件与子组件自己传值,兄弟组件传值?
- vue与react的区别?
- vue与angular的区别?
- v-if 与 v-show的区别?
- $route 与 $router的区别?
- vue.js 的两个核心是什么?
- vue常见的指令?
- v-on可以绑定多个方法吗?
- 怎么定义vue-router的动态路由?如何获取传递过来的值?
- vue-router的作用
- 在vue中v-for为何要使用 :key
- 其他
- 前端页面由那三层构成?分别是什么?作用是什么?
- 列举IE与其他浏览器不同的特性?
- 请说出三种减少页面加载时间的方法?
css
如何让文字居中。分辨率较大的话,如何让图片清晰居中显示。
将图片设置为背景图
width:100%;
height:100%;
background:url(demo.jpg) no-repeat center center;
如何居中div?如何实现居中一个浮动元素?如果让绝对定位的div居中?
参考文档:
如何水平居中一个div?
1.不需要知道宽高
css:
#wrap{
width: 200px;
height: 200px;
background: orange;
position: absolute/fixed;
top:0;bottom:0;left: 0;right: 0;margin:auto;
}
html:
<div id="wrap"</div>
2.知道宽高
css:
#wrap{
width: 200px;
height: 200px;
background: orange;
position: absolute;
top:50%;left: 50%;margin-top:-100px;margin-left: -100px;
}
html:
<div id="wrap"</div>
3.弹性盒
css:
*{margin:0;padding: 0;}
html,body{
height: 100%;
}
body{
display: flex;
justify-content: center;
align-items: center;
}
#wrap{
width: 200px;
height: 200px;
background: orange;
}
html:
<div id="wrap"</div>
如何居中一个浮动元素?
css:
.outerbox {
float: left;
position: relative;
left: 50%;
}
.innerbox {
float: left;
position: relative;
right: 50%;
}
html:
<div class="outerbox">
<div class="innerbox">我是浮动的</div>
</div>
如何让绝对定位的div居中
css:
.center{
position: absolute; /*绝对定位*/
width: 500px;
height:300px;
background: red;
margin: 0 auto; /*水平居中*/
left: 0; /*此处不能省略,且为0*/
right: 0; /*此处不能省略,且为0*/
}
html:
<div class="center"></div>
用纯CSS创建一个三角形的原理是什么?
新增一个正方形或者长方形,给对应的边框设置为 透明色(transparent)
核心就是给块级元素设置宽高为0,设置边框的宽度,不需要显示的边框使用透明色;
<style>
.box {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
清除浮动的方法?
具体代码参考:
- 采用 clear:both方式
- 采用float清除浮动
- 采用伪元素 :after 清除互动
- before和after双伪元素清除浮动
实现预加载一张图片,加载完成后显示在网页中并设定其高度为50px?
预加载事件为onload,加载成功后为图片设置样式。
var imgObj = document.getElementById('imgObg');
addImg('5.png');
function addImg(isrc) {
imgObj1 = new Image();
imgObj1.src = isrc;
imgObj1.onload = function() {
imgObj.src = this.src;
imgObj.height = 50;
imgObj.width = 50;
}
}
html
HTML中那些标签是 块级标签,那些是 行内标签,空标签
参考文献:
块级元素:块级大多为结构性标记
<address>...</adderss>
<center>...</center> 地址文字
<h1>...</h1> 标题一级
<h2>...</h2> 标题二级
<h3>...</h3> 标题三级
<h4>...</h4> 标题四级
<h5>...</h5> 标题五级
<h6>...</h6> 标题六级
<hr> 水平分割线
<p>...</p> 段落
<pre>...</pre> 预格式化
<blockquote>...</blockquote> 段落缩进 前后5个字符
<marquee>...</marquee> 滚动文本
<ul>...</ul> 无序列表
<ol>...</ol> 有序列表
<dl>...</dl> 定义列表
<table>...</table> 表格
<form>...</form> 表单
<div>...</div>
·块级元素
1.总是从新的一行开始
2.高度、宽度都是可控的
3.宽度没有设置时,默认为100%
4.块级元素中可以包含块级元素和行内元素
5.都有align属性
6.dispay都是block
行内元素:行内大多为描述性标记
<span>...</span>
<a>...</a> 链接
<br> 换行
<b>...</b> 加粗
<strong>...</strong> 加粗
<img > 图片
<sup>...</sup> 上标
<sub>...</sub> 下标
<i>...</i> 斜体
<em>...</em> 斜体
<del>...</del> 删除线
<u>...</u> 下划线
<input>...</input> 文本框
<textarea>...</textarea> 多行文本
<select>...</select> 下拉列表
·行内元素
1.和其他元素都在一行
2.高度、宽度以及内边距都是不可控的
3.宽高就是内容的高度,不可以改变
4.行内元素只能行内元素,不能包含块级元素
5.没有align属性
6.display都是inline
空标签
<br/> //换行
<hr> //分隔线
<input> //文本框等
<img> //图片
<link> //链接
<meta> //媒体
js
jQuery获取dom元素的方式
参考文档:
jQuery获取dom元素
DOM对象转jQuery对象:例子: $(DOM对象)
jQuery对象转DOM对象:例子: $(’#btn’)[0]或者: $(’#btn’).get(0);
JS获取DOM元素的方法(8种)
- 通过ID获取(getElementById)
- 通过name属性(getElementsByName)
- 通过标签名(getElementsByTagName)
- 通过类名(getElementsByClassName)
- 获取html的方法(document.documentElement)
- 获取body的方法(document.body)
- 通过选择器获取一个元素(querySelector)
- 通过选择器获取一组元素(querySelectorAll)
vue获取DOM元素的方法
在标签中加上ref=‘dom’,然后在代码中this.$refs.dom这样就拿到了页面元素了。
例如:<div class='wrap' ref='box'>Hello world!</div>
让Hello world!的颜色显示为红色:
this.$refs.box.style.color = "red"
js的数据类型
Number、undefined、string、null、symbol、bigint、boolean、object
JS数据类型:Object 中包含了哪几种类型?
其中包含了Data、function、Array等。这三种是常规用的。
更多详情参考:
声明函数和异名函数的区别
有名函数和无名函数的区别是:有名函数可以先调用,再定义,而无名函数就需要先定义再使用
js中全局变量和局部变量
- 全局变量
- 采用var来定义的变量,是挂载到window对象里面,所以被称为 全局变量
- 局部变量
- 采用let 或者 const 在局部中定义的 变量,被称为 局部变量,局部变量只能在 该范围内才可以调用,否则调用会报错。
js中那些是存储在站里面,那些是存储在 队里面
闭包
参考文献:https://baike.baidu.com/item/%E9%97%AD%E5%8C%85/10908873?fr=aladdin
闭包的概念就是:函数A中包含函数B,函数B可以调用函数A的中变量,那么函数B则称为闭包。
闭包就是能够读取其他函数内部变量的函数。例如在javascript中,只有函数内部的子函数才能读取局部变量,所以闭包可以理解成“定义在一个函数内部的函数“。在本质上,闭包是将函数内部和函数外部连接起来的桥梁。 [1]
例如:
function a(){
var i=0;
function b(){
alert(++i);
}
return b;
}
var c=a();
c();
特点
这段代码有两个特点:
1、函数b嵌套在函数a内部;
2、函数a返回函数b。
这样在执行完var c=a( )后,变量c实际上是指向了函数b,再执行c( )后就会弹出一个窗口显示i的值(第一次为1)。这段代码其实就创建了一个闭包,这是因为函数a外的变量c引用了函数a内的函数b。也就是说,当函数a的内部函数b被函数a外的一个变量引用的时候,就创建了一个闭包。
作用
简而言之,闭包的作用就是在a执行完并返回后,闭包使得Javascript的垃圾回收机制不会收回a所占用的资源,因为a的内部函数b的执行需要依赖a中的变量。
在上面的例子中,由于闭包的存在使得函数a返回后,a中的i始终存在,这样每次执行c(),i都是自加1后alert出i的值。
那 么我们来想象另一种情况,如果a返回的不是函数b,情况就完全不同了。因为a执行完后,b没有被返回给a的外界,只是被a所引用,而此时a也只会被b引 用,因此函数a和b互相引用但又不被外界打扰(被外界引用),函数a和b就会被回收。
函数里面的this含义?什么情况下,怎么用?
实现一个倒计时功能?
<div class="time">
<span id="showTime"></span>
</div>
<script>
function countDown(time,id){
var startTime = new Date();
var endTime = new Date(time);
var distance = endTime.getTime() - startTime.getTime();
var day = 0;
var hour = 0;
var minute = 0;
var second =0;
if(distance>=0){
day = Math.floor(distance/1000/60/60/24);
hour = Math.floor(distance/1000/60/60%24);
minute = Math.floor(distance/1000/60%60);
second = Math.floor(distance/1000%60);
}else{
alert("倒计时活动已结束");
}
document.getElementById(id).innerHTML = day + "天" + hour + "时" + minute + "分" + second + "秒";
}
// countDown('2019/07/25 19:15:00','showInterval');
setInterval(function(){countDown('2019/07/26 12:00:00','showTime');},0);
<script>
网络/安全
IOS七层模型
参考文献:
[百度文科](https://baike.baidu.com/item/%E4%B8%83%E5%B1%82%E6%A8%A1%E5%9E%8B/1441391?fr=aladdin)
iOS七层模型分别是:物理层、数据链路层、网络层、传输层、表示层、会话层、应用层
- 应用层
网络服务与最终用户的一个接口。
协议有:HTTP FTP TFTP SMTP SNMP DNS TELNET HTTPS POP3 DHCP
- 表示层
数据的表示、安全、压缩。(在五层模型里面已经合并到了应用层)
格式有,JPEG、ASCll、EBCDIC、加密格式等 [2]
- 会话层
建立、管理、终止会话。(在五层模型里面已经合并到了应用层)
对应主机进程,指本地主机与远程主机正在进行的会话
- 传输层
定义传输数据的协议端口号,以及流控和差错校验。
协议有:TCP UDP,数据包一旦离开网卡即进入网络传输层
- 网络层
进行逻辑地址寻址,实现不同网络之间的路径选择。
协议有:ICMP IGMP IP(IPV4 IPV6) - 数据链路层
建立逻辑连接、进行硬件地址寻址、差错校验 [3] 等功能。(由底层网络定义协议)
将比特组合成字节进而组合成帧,用MAC地址访问介质,错误发现但不能纠正。 - 物理层
建立、维护、断开物理连接。(由底层网络定义协议)
HTTP/TCP的区别
参考文献:
HTTP:超文本传输协议,位于七层模型中的 应用层,默认HTTP的端口为80;HTTPS的端口号为443。
TCP:位于七层模型中的 传输层。三次握手,四次挥手
HTTP的优点
- 简单快捷。HTTP协议简单、通信速度很快
- 灵活。HTTP协议允许传输任意类型的数据
- 短连接。HTTP协议限制每次连接只处理一个请求,服务器对客户端的请求作出响应后,马上断开连接。这种传输方式可以节省传输时间。
TCP连接——三次握手
- 建立一个TCP连接需要经过“三次握手”。TCP三次握手具体过程如下:
- 第一次握手:客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态。等待服务器确认。
- 第二次握手:服务器收到syn包,必须确认客户的SYN(ack=j+1),同时自己也发送一个SYN包(syn=k),即SYN+ACK包,此时服务器进入SYN_RECV状态。
- 第三次握手:客户端接收到服务器的SYN_ACK包,向服务器发送确认包ACK(ack=k+1),包发送完毕,客户端和服务器进入ESTABLISHED状态,完成三次握手。
常见的web攻击有哪些?如何防范?
参考文档:
1.xss跨站脚本攻击
比如在表单Input框里面输入一段js代码
"/><script>alert("xss")</script><
就会执行这一段脚本,弹出窗口
如何防范XSS攻击
前端,服务端需同时对HTML标签做转义处理。将其中的”<”,”>”等特殊字符进行转义编码。
2.CSRF攻击流程
- 用户登录受信任网站A;
- 在不退出网站A的情况下,访问危险网站B(攻击者网站或攻击者挂马的网站)。
例如:
如何防范CSRF攻击
- token机制
在HTTP请求中进行token验证,如果请求中没有token或者token内容不正确,则认为CSRF攻击而拒绝该请求。
- referer检测
在HTTP Header中有一个字段Referer,它记录了HTTP请求的来源地址,如果Referer是其他网站,就有可能是CSRF攻击,则拒绝该请求。
但是,服务器并非都能取到Referer。很多用户出于隐私保护的考虑,限制了Referer的发送。在某些情况下,浏览器也不会发送Referer,例如HTTPS跳转到HTTP。
3.SQL注入,关键是通过用sql语句伪造参数发出攻击
4.DDOS攻击(关键是通过手段发出大量请求,最后令服务器崩溃)
5.DNS劫持:
通过某些手段获得某域名的解析控制权,修改此域名的解析结果,导致对该
域名的访问由原 ip 地址转入到修改后的指定 ip。其结果是对特定的网址不能访问或访问的
是假网址。
存储
请谈谈cookie的区别?
阅读文档:
请求
ajax同步请求/同时并发请求
ajax同步请求:采用 async:false(同步请求),默认为 true异步请求
当async属性的值为false时是同步的,Ajax请求将整个浏览器锁死,只有ajax请求返回结果后,才执行ajax后面的alert语句。
当async属性的值为true时是异步的,即不会等待ajax请求返回的结果,会直接执行ajax后面的alert语句。
同时并发请求
$.Deferred();
更多详细说明:
vue
vue官网:https://cn.vuejs.org/
VUE中的MVVM的理解?
参考文献:
MVVM 是 Model-View-ViewModel 的缩写。
Model代表数据模型,也可以在Model中定义操作数据变化的业务逻辑;
View 代表UI视图,它负责将数据模型转化成UI 展现出来;
ViewModel 监听Model中数据的改变和控制View层的展现;
在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上;
ViewModel通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。
相当于就是 数据驱动视图、视图驱动数据,从而实现数据的双向绑定
vue生命周期的作用是什么?
参考文献:
beforeCreate
:实例创建前被调用;
created
:实例创建后被调用,完成数据观测,属性和方法的运算,watch/event事件回调,模板渲染成html前(vm.$el未定义)故数据初始化最好在这阶段完成;
beforeMount
:在$el
挂载前被调用,相关的 render 函数首次被调用,期间将模块渲染成html,此时vm.$el
还是未定义;
mounted
:在$el
挂载后被调用,此时vm.$el
可以调用,不能保证所有的子组件都挂载,要等视图全部更新完毕用vm.$nextTick()
;
beforeUpdate
:数据更新时调用;
updated
:数据更新后调用;
activated
:<keep-alive/>
包裹的组件激活时调用;
deactivated
:<keep-alive/>
包裹的组件离开时调用;
beforeDestroy
:实例销毁之前调用,此时实例仍然完全可用;
destroyed
:实例销毁之后调用,此时实例的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
vue生命周期总共有几个阶段?
vue生命周期一共有8个阶段,分别是:
创建前/后、载入前/后、更新前/后、销毁前/后
-
beforeCreate
:实例创建前被调用; -
created
:实例创建后被调用,完成数据观测,属性和方法的运算,watch/event事件回调,模板渲染成html前(vm.$el未定义)故数据初始化最好在这阶段完成; -
beforeMount
:在$el
挂载前被调用,相关的 render 函数首次被调用,期间将模块渲染成html,此时vm.$el
还是未定义 -
mounted
:在$el
挂载后被调用,此时vm.$el
可以调用,不能保证所有的子组件都挂载,要等视图全部更新完毕用vm.$nextTick()
; -
beforeUpdate
:数据更新时调用; -
updated
:数据更新后调用; -
beforeDestroy
:实例销毁之前调用,此时实例仍然完全可用; -
destroyed
:实例销毁之后调用,此时实例的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
第一次加载页面会触发那几个钩子?
第一加载页面是会触发:beforecreate、created、beforemount、mount
DOM渲染在哪个周期中就已经完成了?
在 mount钩子就已经创建完成。
父组件与子组件自己传值,兄弟组件传值?
props/refs/ref(父子通信)
parent(父子通信)
listeners(父子通信、跨级通信)
provide/inject(父子通信、跨级通信)
eventBus(父子通信、跨级通信、兄弟通信)
vuex(父子通信、跨级通信、兄弟通信、路由视图级别通信)
localStorage/sessionStorage等基于浏览器客户端的存储(父子通信、跨级通信、兄弟通信、路由
视图级别通信)
vue与react的区别?
参考文献:
React 和Vue是现在主流的两个框架(相对来说angular用的已经少了)
两者的区别体现在以下方面
相同点:
1、react和vue都支持服务端渲染
2、都有虚拟DOM,组件化开发,通过props传参进行父子组件数据的传递
3、都是数据驱动视图
4、都有支持native的方案(react的react native,vue的weex)
5、都有状态管理(react有redux,vue有vuex)
不同点:
1、react严格上只能算是MVC的view层,vue则是MVVM模式
2、虚拟DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树
而对于react而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
3、组件写法不一样,react推荐的做法是JSX+inline style,也就是把HTML和CSS全都写进javaScript了
4、数据绑定:vue实现了数据的双向绑定,react数据流动是单向的
5、state对象在react应用中是不可变的,需要使用setState方法更新状态
在vue中,state对象不是必须的,数据有data属性在vue对象中管理
vue与angular的区别?
参考文档:
相同:
1.数据绑定:vue和angular绑定都可以用
{{ }}
2.都支持内置指令和自定义指令
3.都支持内置过滤器和自定义过滤器。
区别:
1.学习成本和API 设计:vue相比于angular来说更加的简单
angular:学习成本比较高,比如增加了dependency injiction特性。Angular 尽管学习曲线较为陡峭,但却是构建完整复杂应用的好选择。
vue:本身提供的API都比较简单、直观。Vue.js 是轻量级的开发框架,很适合开发小规模灵活的 Web 应用程序;
在 API 与设计两方面上 vue比 angular 简单得多,因此你可以快速地掌握它的全部特性并投入开发。
- 性能上:
angular:依赖对数据做脏检测,所以watcher越来越多;
vue:使用基于依赖追踪的观察,并且使用异步队列更新,所有的数据都是独立触发的。
.vue的双向绑定是基于ES5 的 getter/setter来实现的,而angular而是由自己实现一套模版编译规则,需要进行所谓的“脏”检查,vue则不需要。
因此,vue在性能上更高效,但是代价是对于ie9以下的浏览器无法支持。
3.运行速度:vue相当于angular要变得小巧很多,运行速度比angular快.
4.指令:vue指令用v-xxx,angular用ng-xxx
angular用的指令是ng-前缀的,而vue是v-
5.组件:vue有组件化概念,angular中没有
6.数据存放位置: vue中数据放在data对象里面,angular数据绑定在$scope上面。
7.挂载数据方式:
angular挂载数据的方法
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.list = [{},{},{}];
$scope.method = function(){
console.log("angular");
}
})
vue挂载数据的方法
var V = new Vue({
el:"#app",
data:{
list:[{},{},{}]
},
methods:{
method:function(){
console.log("vue");
}
}
})
可以看出angular所有的数据和方法都是挂载在$scope上,
而vue的数据和方法都是挂载在vue上,只是数据挂载在vue的data,方法挂载在vue的methods上。
8.数据绑定
Angular 1 使用双向绑定,
Vue 在不同组件间强制使用单向数据流。这使应用中的数据流更加清晰易懂。
10.总结:Vue.js 有更好的性能,并且非常非常容易优化,因为它不使用脏检查。Angular,当 watcher 越来越多时会变得越来越慢,因为作用域内的每一次变化,所有 watcher 都要重新计算。并且,如果一些 watcher 触发另一个更新,脏检查循环(digest cycle)可能要运行多次。 Angular 用户常常要使用深奥的技术,以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。Vue.js 则根本没有这个问题,因为它使用基于依赖追踪的观察系统并且异步列队更新,所有的数据变化都是独立地触发,除非它们之间有明确的依赖关系。唯一需要做的优化是在 v-for 上使用 track-by。
v-if 与 v-show的区别?
v-show
,切换元素的display属性,来控制元素显示隐藏,初始化会渲染,适用频繁显示隐藏的元素,不能用在<template/>
上;
v-if
,通过销毁并重建组件,来控制组件显示隐藏,初始化不会渲染,不适用频繁显示隐藏的组件,可以用在<template/>
上。
$route 与 $router的区别?
参考文献:
$router
1.router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了许多关键的对象和属性。
举例:history对象
$router.push({path:‘home’});本质是向history栈中添加一个路由,在我们看来是 切换路由,但本质是在添加一个history记录.
方法:
$router.replace({path:‘home’});//替换路由,没有历史记录
$route
2.route是一个跳转的路由对象,每一个路由都会有一个route对象,是一个局部的对象,可以获取对应的name,path,params,query等
我们可以从vue devtools中看到每个路由对象的不同
这两个不同的结构可以看出两者的区别,他们的一些属性是不同的。
- $route.path
字符串,等于当前路由对象的路径,会被解析为绝对路径,如"/home/news"
。 - $route.params
对象,包含路由中的动态片段和全匹配片段的键值对 - route.query.favorite == ‘yes’` 。
- $route.router
路由规则所属的路由器(以及其所属的组件)。 - $route.matched
数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。 - $route.name
当前路径的名字,如果没有使用具名路径,则名字为空。
$route.path, $route.params, $route.name, $route.query
这几个属性很容易理解,看示例就能知道它们代表的含义
vue.js 的两个核心是什么?
数据驱动、组件系统
**数据驱动:**ViewModel,保证数据和视图的一致性。
**组件系统:**应用类UI可以看作全部是由组件树构成的
vue常见的指令?
参考文档:
v-show
、v-if
、v-else-if
、v-else
、v-for
、v-on
、v-bind
、v-model
、v-once
、v-slot
、v-html
、v-text
。
v-show
,切换元素的display属性,来控制元素显示隐藏,初始化会渲染,适用频繁显示隐藏的元素,不能用在`上;
v-if
,通过销毁并重建组件,来控制组件显示隐藏,初始化不会渲染,不适用频繁显示隐藏的组件,可以用在`上;
v-else-if
,必须和v-if
一起使用;
v-else
,必须和v-if
一起使用;
v-for
,将Array、Object、Number、String数据循环渲染元素或者组件,渲染组件必须带上key,key要为数据中每项特定值比如ID;
<div v-for="(item,index) in Array">{{index}}-{{item}}</div>
<div v-for="(item,key,index) in Object">{{index}}-{{key}}--{{item}}</div>
<div v-for="item in Number">{{item}}</div>
<div v-for="(item,index) in String">{{index}}-{{item}}</div>
<myVue v-for="(item,key,index) in Object" :title="item.title" :key="item.id"></myVue>
v-on,缩写 @,监听事件,如:@click、@submit、@dblclick
- 怎么获取div上点击的鼠标位置
<div @click="a"></div>
<div @click="b(1,2,$event)"></div>
methods:{
a(){
console.log(event.clientX,event.clientY)
},
b(num1,num2,$event){
console.log($event.clientX,$event.clientY)
},
}
- 怎么阻止冒泡,怎么阻止默认事件
//阻止冒泡
<div @click.stop="a"></div>
//阻止默认
<div @click.prevent="b"></div>
//阻止冒泡阻止默认
<div @click.stop.prevent="c"></div>
- 怎么监听组件根元素的原生事件
<myVue @click.native="d"></myVue>
- 怎么监听组件自定义事件
<myVue @diy-event="f"></myVue>
//组件中这样触发
this.$emit('diyEvent',data)
v-bind
,缩写:
,绑定动态属性;
v-model
,限制应用在 <input/> <textarea/> <select/>
、表单 元素和组件上创建双向绑定,修饰符v-model.lazy
懒监听、v-model.number
将值转成有效的数字、v-model.trim
过滤首尾空格;
以上8个非常常用指令没说出来,可以考虑终止面试了
v-text
,<div v-text={{data}}></div>
等同{{data}}
, 如果内容带有HTML标签,也作为普通字符输出。
v-html
,直接输出HTML,不会按Vue模板编译,会有XSS攻击分析,不要用在用户提交内容上;
v-once
,只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过,用于优化更新性能;
v-per
,跳过这个元素和它的子元素的编译过程。可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译;
v-cloak
,防止页面加载时出现 vuejs 的变量名,需要css配合[v-cloak] { display: none }
,几乎没怎么用;
v-slot
,在组件插槽里面详解。
v-on可以绑定多个方法吗?
可以,v-on
后面接一个对象,但是不支持事件修饰符。
<template>
<div v-on:{click:a,dblclick:b}></div>
</template>
<script>
methods:{
a(){
alert(1)
},
b(){
alert(2)
}
}
</script>
怎么定义vue-router的动态路由?如何获取传递过来的值?
定义路由(数组)
const routes = [
{
path: '/foo',
component: Foo
}
];
创建 router 实例
const router = new VueRouter({
routes
});
挂载路由
const app = new Vue({
routes
}).mount('#app');
带参动态路由
动态路由的创建,主要是使用 path 属性过程中,使用动态路径参数,以冒号开头,如:
{
path: /user/:id
component: User
}
获取路由参数
this.$route.params.id
vue-router的作用
vue-router是vue单页面开发的路由,就是决定页面
组件支持用户在具体有路由功能的应用中(点击)导航。通过to属性指定目标地址。
Props 属性
1、to
表示目标路由的链接。当被点击后,内部会立刻把to的值传到router-push()。
<router-link :to="home">Home</router-link>
<router-link :to="{ path: ‘home‘ }">Home</router-link>
//命名路由
<router-link :to="{ name: ‘user‘, params: {userId: 123} }">Home</router-link>
//带查询参数,下面的结果为/register?plan=private-->
<router-link :to="{ path: ‘register‘, query: {plan: ‘private‘}}">Register</router-link>
2、replace
设置replace属性的话,当点击时,会调用roter.replace()而不是router.push(),所以导航后不会留下history记录,也就是不能回退到上一个页面
<router-link :to="{path: ‘/abc‘}" replace>ABC</router-link>
3、append
设置append属性后,则在当前路径前添加基路径,例如,我们从/a导航到一个相对路径b,如果没有配置append,则路径为/b,如果配了,则为/a/b
<router-link to="b" append>Home</router-link>
4、tag
有时候想要渲染成某种标签,例如
- 。于是我们使用tag prop 类指定何种标签,同样它还是会监听点击,触发导航。
<router-link to="/foo" tag="li">FOO</router-link>
// 渲染结果
<li>FOO</li>
5、active-class
设置链接激活时使用的css类名。默认值可以通过路由的构造选项linkActiveClass来全局配置, 默认值为 ‘router-link-active‘
export default New Router({
linkActiveClass: ‘active‘
})
6、exact
“是否激活”,默认是false 。举个粟子,如果当前的路径是/a 开头的,那么 也会被设置css类名
按照这个规则, 将会点亮各个路由!想要链接使用"exact匹配模式",则使用exact属性:
// 这个链接只会在地址为 / 的时候被激活
<router-link to="/" exact>Home</router-link>
<router-link to="/user">USER</router-link>
<router-link to="/user/userinfo">USER-info</router-link>
// 如果不设置exact,则当路由到了/user/userinfo 页面时,USER也是被设置了router-link-active样式的!
7、events
声明可以用来触发导航的事件(默认是‘click‘)。可以是一个字符串或者是一个包含字符串的数组
8、将"激活时的css类名"应用在外层元素
有时候我们要让"激活的css类名"应用在外层元素,而不是标签本身,那么可以用渲染外层元素,包裹着内层的原生标签
<router-link tag="li" to="/foo">
<a>/foo</a>
</router-link>
//在这种情况下,<a>将作为真实的链接(能获取到正确的href的),而"激活时的css类名"则设置到外层的<li>
9、方法
router-link默认是触发router.push(location),如果设置的replace 则触发router.replace(location),这有啥区别呢?
router.push() :导航跑到不同的URL,这个方法会向history栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的url.
router.replace(): 跟router.push作用是一样的,但是,它不会向history添加新记录,而是跟它的方法名一样替换掉当前的history记录.
router.go(n): 这个方法的参数是一个整数,意思是在history记录中向前或者后退多少步,类似window.history.Go(n)
在vue中v-for为何要使用 :key
主要用于 动态为input中复选框、单选框 添加数组值,选中的属性还是处于选中状态,而不是新增的值。
为了能把F节点放在准确位置,我们给F节点添加一个key值来作为唯一标识。有了key,Diff算法就可以正确识别F节点并把它插入正确的位置。
更多详情参考:https://www.jianshu.com/p/a228e2247649
其他
前端页面由那三层构成?分别是什么?作用是什么?
- 网页的结构层(structural layer) 由HTML或XHTML之类的标记语言负责创建
- 标记语言也就是指网页的标签,标签只对网页内容的语义和含义做出描述,不包含任何关于如何显示内容的信息。
- 网页的**表示层(resentation layer)**由CSS负责创建。
- 作用是对内容如何显示做一定的控制。
- 网页的**行为层(behavior layer)**由JavaScript语言和DOM创建。
- 作用是控制用户做出一个事件该如何显示。例如:用户悬浮在某个元素上,弹出一个显示元素标题内容的提示框。
列举IE与其他浏览器不同的特性?
参考文献:
1)IE支持currentStyle,Firefox使用getComputStyle;
2)IE使用innerText,FireFox使用textContent;
3)滤镜方面:IE:filter:alpha(opacity= num);Firefox:-moz-opacity:num;
4)事件方面:IE:attachEvent:火狐是addEventListener;
5)鼠标位置:IE是event.clientX;火狐是event.pageX;
6)IE使用event.srcElement;Firefox使用event.target;
7)IE中消除list的原点仅需margin:0即可达到最终效果;FIrefox需要设置margin:0;padding:0以及list-style:none;
请说出三种减少页面加载时间的方法?
参考文献:
1.优化图片
2.图像格式的选择(GIF:提供的颜色较少,可用在一些对颜色要求不高的地方)
3.优化CSS(压缩合并css,如margin-top,margin-left…)
4.网址后加斜杠(如www.campr.com/目录,会判断这个“目录是什么文件类型,或者是目录。)
5.标明高度和宽度(如果浏览器没有找到这两个参数,它需要一边下载图片一边计算大小,如果图片很多,浏览器需要不断地调整页面。这不但影响速度,也影响浏览体验。 当浏览器知道了高度和宽度参数后,即使图片暂时无法显示,页面上也会腾出图片的空位,然后继续加载后面的内容。从而加载时间快了,浏览体验也更好了。)
6.减少http请求(合并文件,合并图片)