、
1. 什么是路由,如何实现路由
不同的 url 或地址加载不同的页面
路由实现有两种:hash 模式和 history 模式两种
hash 模式: 1. url 路径会出现 # 字符 2. hash 值不包括在 HTTP 请求中,它是交由前端路由处理,所以改变 hash 值时不会刷新页面,也不会向服务器发送请求 3. hash 值的改变会触发 hashchange 事件
history模式:
1. 整个地址重新加载,可以保存历史记录,方便前进后退
2. 使用 HTML5 API(旧浏览器不支持)和 HTTP服务端配置,没有后台配置的话,页面刷新时会出现404
2. 怎么用 web 前端技术开发移动端应用
媒体查询响应式设计,flex 弹性盒子布局,流式布局,rem 自适应布局
3. flutter 和其他移动端框架的区别
本质上是一套跨平台的 UI 框架,实现了一套代码跨多端运行
4. 前端代码为什么要打包
模块化开发中,我们会编写大量模块,如果不打包就进行上线,那么页面加载或交互时,将会发起大量的请求。为了性能优化,需要使用 webpack 这样的打包器对模块进行打包整合,以减少请求数
5. 什么是 nodejs,怎么实现一台电脑里有多个 nodejs 版本
Node.js 只是一个让 JavaScript 运行在浏览器之外的平台
nvm,nvm 则是提供切换 node 版本的工具。
6. 响应式布局应该注意的点
头部添加 meta:
头部添加 link,不同屏幕分辨率使用不同的 css 样式:
各个模块尺寸尽量使用百分比。
(1)设置 viewport 元标签
(2)避免使用绝对单位(px),用相对单位代替(%、auto、em 等)
(3)使用流式定位:float
(4)图片大小实现自适应:
img { max-width: 100%; }
会随着容器的改变而改变,且不会超过图片自身原始大小,防止失真。
(5)根据浏览器屏幕的特征,有选择性的执行某些 CSS 样式——CSS3 媒体查询技术(Media Query)
7. 对象解构赋值和数组解构赋值
对象展开运算符
let obj = {
hello: 'hello',
world: 'world',
name: 'Tim',
age: 18
}
let {hello, world, ...hi} = obj;
console.log(hello) => hello
console.log(world) => world
console.log(hi) => {name: 'Tim', age: 18}
数组使用扩展运算符解构
function f () {
return ['hello', 'world', 'my', 'name', 'is Lilei'];
}
let [hello, world, ...who] = f()
console.log(hello) => hello
console.log(world) => world
console.log(who) => ['my', 'name', 'is Lilei']
8. v-if 和 v-show 的异同点 1.相同点 :v-if 和 v-show 都可以动态控制 DOM 元素的显示隐藏。 2.不同点:v-if 是动态地向 DOM 树中添加或删除 DOM 元素节点;v-show 是通过向 DOM 元素设置样式 display 属性值控制显示隐藏。
9. vue 父子组件传值如何操作
通过 props 和 v-bind
子组件内, props 定义变量, 在子组件使用变量
父组件内, 使用子组件, 属性方式给 props 变量传值
子向父传值
通过$emit
父组件内, 给组件@自定义事件="父methods函数"
子组件内, 恰当时机this.$emit('自定义事件名', 值)
10. vue 中如何正确使用定时器
在 data 中声明一个变量,定时器绑定到变量中,然后在 beforeDestory 中销毁这个定时器
export default {
data() {
return {
timer: null // 定时器名称
};
},
mounted() { // 定时器一般写 mounted() 生命周期内
this.timer = (() => {
// 某些操作
console.log(1);
}, 1000) // 1000 毫秒
},
// 最后在 beforeDestroy()生命周期内清除定时器:
beforeDestroy() {
clearInterval(this.timer);
this.timer = null;
}
};
11. img 标签中 alt 和 title 属性的区别
title:通常当鼠标滑动到元素上的时候显示
alt:alt 是 img 标签的特有属性,是图片内容的等价描述,用于图片无法正常加载时显示
12. CSS 选择符、优先级算法以及内联和 important 哪个优先级高?
css 继承特性主要是指文本方面的继承,盒模型相关的属性基本没有继承特性。
所有元素可继承:
visibility 和 cursor
块级元素可继承
text-indent 和 text-align
内联元素可继承的:
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
优先级为!important > [ id > class > tag ]
!Important 比 内联优先级高
13. link 和@import 的区别是?
区别 1:link 是 XHTML 标签,除了加载 CSS 外,还可以定义 RSS 等其他事务;@import 属于 CSS 范畴,只能加载 CSS。
区别 2:link 引用 CSS 时,在页面载入时同时加载;@import 需要页面网页完全载入以后加载。
区别 3:link 是 XHTML 标签,无兼容问题;@import 兼容 IE5 以上
区别 4:link 支持使用 Javascript 控制 DOM 去改变样式;而@import 不支持改变样
14. axios 怎么解决跨域的
使用 axios 直接进行跨域访问不可行,我们就需要配置代理了
proxyTable: {
'/api': {
target:'http://api.douban.com/v2', // 你请求的第三方接口
changeOrigin:true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite:{ // 路径重写,
'^/api': '' // 替换 target 中的请求地址,也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
}
}
},
15. vue 两大核心
数据驱动和组件系统
16. v-on 可以监听多个方法吗?如何写?|| vue 如何一个元素绑定多个事件
17. vue 如何跨组件传值
provide 和 inject
父组件中通过 provide 来提供变量,然后在子组件中通过 inject 来注入变量。不论子组件有多深,只要调用了 inject,那么就可以注入 provide 中的数据。
18. vue 路由有几种实现方式?异同
一种是哈希模式,还有一种是 history 模式
hash 模式: 1. url 路径会出现 # 字符 2. hash 值不包括在 HTTP 请求中,它是交由前端路由处理,所以改变 hash 值时不会刷新页面,也不会向服务器发送请求 3. hash 值的改变会触发 hashchange 事件
history 模式: 1. 整个地址重新加载,可以保存历史记录,方便前进后退 2. 使用 HTML5 API(旧浏览器不支持)和 HTTP 服务端配置,没有后台配置的话,页面刷新时会出现 404
19. tcp 三次握手是什么
第一次握手:客户端发送一个数据包给服务端,当服务端接收到这个数据后,服务端可知客户端是想要建立连接;
第二次握手:服务端要对客户端的联机请求进行确认,向客户端发送应答号 ACK=1、SYN=1 确认号 Ack=J+1,此值是客户端的序列号加 1,还会产生一个随机的序列号 Seq=K,这样就告诉客户端可以进行连接;
第三次握手:客户端收到数据后检查 Ack 是否为 J+1,以及标志位 ACK 的值是否为 1,若为 1,则会发送 ACK=1、确认号码 Ack=K+1,告诉服务端,你的请求连接被确认,连接可以建立
20. DOCTYPE 作用?严格模式混杂模式的区别?有什么意义?
如果在文档开始处没有发现文档类型声明,则所有浏览器都会默认开启混杂模式。
1.声名位于文档的最前面,在 标签的前面,告知浏览器以何种模式来渲染文档。 2.严格模式的排版和 JS 运作模式都是以浏览器支持的最高的标准运行。按照 W3C 的标准来解析代码。 3.混杂模式是以宽松的,向后兼容的方式来解析代码。是指浏览器用自己的方式解析代码,模拟老式浏览器的行为以防止网站停止工作。 4.若 DOCTYPE 为声名或格式不正确,页面将会以怪异模式的方式解析。
5.Doctype 标签可声明三种 DLD 类型,分别是严格型,过渡型,框架型。
21. 如何居中一个浮动元素
用定位 position
22. box-sizing 常用属性有那些,分别有什么作用
box-sizing : content-box || border-box || inherit
1、content-box:此值为其默认值,其让元素维持 W3C 的标准 Box Model,也就是说元素的宽度/高度(width/height)等于元素边框宽度(border)加上元素内边距(padding)加上元素内容宽度/高度