目录
1.HTML有哪些语义化标签?为什么要语义化?
h1~h6
header
footer
title
nav
main:主要内容,一个页面只能使用一次。
ul
li
em
strong
HTML结构清晰,代码可读性高,便于维护,可根据标签确定上下文和权重问题。
2.css选择器,权重
CSS选择器 | 表示 |
---|---|
ID选择器 | #id |
class选择器 | .class |
标签选择器 | p、a等 |
通配符选择器 | *(表示选择所有的标签元素) |
属性选择器 | [type=‘text’] |
伪类选择器 | :hover |
伪元素选择器 | ::first-line |
其他选择器 | 子选择器、相邻选择器 |
权重
类型 | 权重 |
---|---|
! important | 无穷 |
内联样式(如style=“color:red”) | 1000 |
ID选择器 | 100 |
class/属性/伪类选择器 | 10 |
标签/伪元素选择器 | 1 |
通配符 | 0 |
3.js闭包
闭包概念
能够读取其他函数内部变量的函数。
简单来说,就是在一个函数内部的函数,内部函数持有外部函数内变量的引用。
闭包有3个特性:
①函数嵌套函数
②函数内部可以引用函数外部的参数和变量
③参数和变量不会被垃圾回收机制回收
什么情况下使用闭包?定时器。
4.js原型
obj.a,a就是obj的私有属性
obj.prototype.b,b是obj的共有属性。
即通过new obj出来的实例,均拥有obj的共有属性。
5.css盒子垂直居中
1.子绝父相后,上下左右设置为0,margin:auto
2.子绝父相后,top:50%;left:50%
transform:translate(-50%,-50%)
3.子绝父相后,top:50%;left:50%
将margin-top和margin-left设置为负的盒子自身宽高的一半
4.flex布局,垂直align-item:center;水平justify-content:center
6.flex布局有哪些属性
垂直align-item:center;
水平justify-content:center
主轴flex-direction:row | row-reverse | column | column-reverse
换行flex-wrap:nowrap | wrap | wrap-reverse(换行,第一行在下方)
放大:flex-grow:nums
缩小:flex-shrink:nums
7.vue生命周期,$nexttick
我的理解是生命周期是vue实例从创建到毁灭的过程,一般在项目中多使用的是created和mounted。
他们两个的区别在于:
created:在模板渲染成html前调用,即通常发起请求初始化某些属性值,然后再渲染成视图。一般不可直接操作dom元素,因为未编译。
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
注: mounted在整个实例中执行一次。
$nexttick()
下一次DOM更新完成时进行的回调。
this.$nextTick()
方法主要是用在数据改变。vue中数据和dom渲染由于是异步的,所以,要让dom结构随数据改变这样的操作都应该放进this.$nextTick()
的回调函数中。created()中使用的方法时,dom还没有渲染,如果此时在此处进行dom赋值数据(或者其它dom操作)时无异于徒劳,所以,此时this.$nextTick()
就发挥作用了,而与created()对应的是mounted()则是在dom完全渲染后才开始渲染数据,所以在mounted()中操作dom基本不会存在渲染问题。
(可以引申出事件循环)
computer和watch去区别?
computer时计算属性,依赖其他属性值,且具有缓存,只当依赖值发生改变,下一次获取computer的值才会重新计算。一个数据受多个数据影响。
watch更多的是观察作用,监听某个数据发生改变然后执行回调或者执行异步操作。一个数据影响多个数据。
8.vue组件通信
9.vuex
10.vue-router钩子函数
beforeEach
afterEach
路由改变前后触发。
参数to、form、next()
11.跨域,同源策略
12.ajax原理
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
下面是使用Ajax可以完成的功能:
动态更新购物车的物品总数,无需用户单击Update并等待服务器重新发送整个页面。提升站点的性能,这是通过减少从服务器下载的数据量而实现的。
13.MVVM与MVC的缺点、区别
MVVM主要解决了MVC中大量的DOM操作使页面渲染性能降低,加载速度变慢,影响用户体验。利用MVVM可以使我们的代码更加专注于处理业务逻辑而不是去关心DOM操作。
MVVM设计模式的缺点
-
数据绑定也使得bug很难被调试。比如你看到页面异常了,有可能是你的View的代码有bug,也可能是你的model的代码有问题。数据绑定使得一个位置的Bug被快速传递到别的位置,要定位原始出问题的地方就变得不那么容易了。
-
数据双向绑定不利于代码重用。客户端开发最常用的是View,但是数据双向绑定技术,让你在一个View都绑定了一个model,不同的模块model都不同。那就不能简单重用view了
-
一个大的模块中model也会很大,虽然使用方便了也很容易保证数据的一致性,但是长期持有,不释放内存就可能花费更多的内存。
14.vue的data为什么一定是函数
javascipt只有函数构成作用域(注意理解作用域,只有函数的{}构成作用域,对象的{}以及 if(){}都不构成作用域),data是一个函数时,每个组件实例都有自己的作用域,每个实例相互独立,不会相互影响。
如果不用function 返回,每个组件的data 就应该是用对象类型,那这样所有组件的data都是内存的同一个地址,一个数据改变了其他也改变了。