html:常见的块级(div走天下),行内块,行内标签随便能说出几个有代表的,input img a标签单独记忆
css:marigin-padding,font系列,border系列,定位,盒子模型(box-sizing),盒子阴影,flex布局,background系列等
js:数据类型(简单:字符串,数字型等,复杂:数组等);数组常用方法重点记忆,对象字符串常用方法(分es6前后记忆,es6之前的方法,es6后的方法(filter,map,扩展运算符等)),解构赋值;应付面试还需要记一些,原型链,原型对象,对象原型,箭头函数,作用域,let,const,var区别和理解,promise等
ajax:简单理解记忆即可
vue:webpack可以稍微了解下,vue脚手架熟练使用,vue常用指令(v-model,v-for,v-if,v-else,v-on(@),v-bind(:),v-show);vue生命周期;vue的computed,watch,data,methods,props,混入等;vue-router,路由基础和使用(保证手写出简单的路由文件);vuex和路由要求相同,手写出简单的,这些你可以新建一个vue项目,从下载依赖包到写出这两个功能为止;axios的基本使用,$refs等。时间可以看下diff算法
js
(1)cookie、localStorage、sessionStorage的区别和使用?
cookie:是存储在本地的数据,有时候也用cookies,通常经过加密,应用最经典的就是判断注册用户是否已经登录过该网站。 localStorage:仅在客户端保存(即浏览器),不参与和服务器的通信;没有时间限制,即使浏览器关闭,数据依然存在;
共同点:都是保存在浏览器端,且同源(同域名同端口下聚合显示)的。
区别:
cookie数据大小不能超过4K,同时因为每次http请求都会携带cookie,所以cookie只能保存很小的数据。
sessionStorage和localStorage不会自动把数据发给服务器,只在本地保存,虽然也有大小限制,但是要比cookie大得多,可以达到5M或者更大。
数据有效期不同,sessionStorage仅在当前浏览器窗口关闭前有效,不能持久保存;localStorage:始终有效,浏览器窗口关闭也一直保存;cookie:只在cookie设置的过期时间之前保存,即使浏览器窗口关闭。
作用域不同,sessionStorage在不同浏览器窗口的数据不能共享,即使是同一个页面;localStorage在所有的同源窗口中都是共享的;cookie也是在同源窗口中共享的,
(2) JS常用数据类型
简单数据类型:数字型Number,字符串类型String,布尔型Boolean,undefined,null
复杂数据类型(引用类型):对象Object,数组Array。(在存储时仅仅在栈中以地址的形式指向堆)
(3)堆和栈
简单数据类型存储在栈中,复杂数据类型的地址存储在栈中
复杂数据类型存放在堆里面,首先在栈里面存放地址(十六进制表示),地址在指向堆里面的实例,真正的对象实例存放在堆空间中
(4)简单数据类型的相互转换
(1)转换为字符串
①var num = 10;
var str = num.toString();
②String(转换对象);
③利用加号拼接字符串的方法。
num + ” “;
(2)转换为数组
①parseInt和parseFloat,整数型和浮点型的转换。
语法格式:parseInt(转换的对象)
parseInt("") //NaN
转换小数时得到的结果是整数,console.log(parseInt("3.14")); //3取整 console.log(parseInt("120px")); //120会去除px这个单位。从第一个字符开始,找第一个数
字,否则结果时NaN
和parseFloat(转换的对象)
转换可得到小数(浮点数),转换整数时依旧时整数,用法与上面基本相似。
②利用Number(转换的对象)
var str = “123”;console.log(Number(str));
③利用算数运算(隐式转换)- / *(不用加号)
(3)转换为布尔型
①Boolean()函数 ==> Boolean("") //false
②!!
(5)前置运算符和后置运算符的区别
前置运算符返回已经计算出结果的值,即++3在使用的时候代表4
后置运算符返回未经计算的值,即3++在使用的时候表示3
无论前置运算符还是后置运算符,都会使操作的变量产生相应的递增或递减,但对于++a这个式子而言,含义有所不同
(6)逻辑中断
对于&&或者||
&&:前一个条件为假的话,即可判断出逻辑语句的结果,所以此情况下系统会只判断前一个语句,后面的语句属于多余条件,不进行判断所有会造成逻辑中断
||: 前一个条件为真的话,即可判断出逻辑语句的结果,所以此情况下系统会只判断前一个语句,后面的语句属于多余条件,不进行判断所有会造成逻辑中断
(7)continue和break、reaturn关键字的区别
continue立即跳出本次循环,继续下一次循环。在循环中return和continue的用法一值。
break关键字立即退出整个循环。
return在函数中代表函数的结束并返回return后的值为函数的返回值,且不会执行return之后的语句。
(8)原型链
前置知识:
构造函数(类):每一个实例化的类表示对象,而类即是构造函数,例如,一个水果表示一个类,通过水果这个类实例化出一个对象——一个苹果,即苹果就是对象。构造函数是概括了一类事物的集合,通过将集合的各个属性实例化,就可以创造出对象。
class Father {
constructor(uname) {
this.uname= uname
}
}
let obj = new Father("zs") // { uname: "zs" }
原型链:
每一个构造函数都存在一个属性prototype,他也是一个对象,其中存储一些公共方法和属性,即表示存储这个类的一些特征,而实例对象(我们使用中定义的对象)通过构造函数实例化,为了表示他是由哪个类所创建,于是在生成实例对象的时候,会把prototype完全复制到实例对象中,形成__proto__这个属性,两者一模一样,且栈中的地址相同,修改其中一个的属性,另一个会相应变化。而prototype中又有一个属性constructor,他表示类的本身,也就是构造函数本身,所以这三者会形成一种链式结构————————原型链。
由于每一个原型对象, prototype它也是一个对象,他也存在构造函数,所以通过他的__proto__会一直指向最终的构造函数 Object
(9)call,apply,bind三者的区别和联系
(1) call方法 fn.call(被指向的对象,函数参数) 改变函数this的指向
主要作用可以实现继承
(2) apply调用函数,也可以改变函数内部this的指向
- 但是他的参数必须是数组形式(伪数组)apply(被指向的对象,['1','2'])
- apply的主要应用:
- 利用apply借助数学内置对象求最大值等:Math.max.apply(Math, 数组) //指向没有改变,所以只是相当于调用Math.max方法,数组(apply传参方式)为此方法本来需要传递的参数.
(3) bind方法 绑定的意思
fn.bind(被指向的对象)
- 不会调用原来的函数
- 可以改变原来函数内部的this指向
- 返回的是原函数改变this之后产生的新函数,不会改变原函数
如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind
(10)闭包
闭包指可以被另外一个函数访问其变量的函数
函数嵌套函数的时候,内部函数可以访问外部函数的变量
闭包的主要作用,延伸了变量的作用范围
上层作用域的变量,会通过[[Scopes]]属性存在闭包函数中,而这个属性中的 Closure对象就是我们需要的闭包数据,上层作用域里的变量数据,所以,造成内存被占用,一直不释放,也就是内存泄漏.可以实现外部访问闭包函数.一个作用域的变量互通
ajax等知识点
(1)ajax简述
ajax(Asynchronous Javascript And XML)异步JavaScript和XML
使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户核心对XMLHttpRequest。通过这个对象,您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果。
ajax可以视作对js内置XMLHttpRequest对象的优化和封装
(2)XMLHttpRequest对象详解
使用XHR发起GET请求
var xhr = new XMLHttpRequest()
xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks') // 参数通过?xx=ss&ss=ss方式拼接在url后面
xhr.sent()
xhr.onreadystatechange = funciton() {
if(xhr.readyState === 4(请求完成) && xhr.status === 200(请求成功)) { //判断的属性的status是创建对象xhr里的属性,代表服务器响应的状态,不可以更改
console.log(xhr.responseText) //响应回数据中的status,是服务器端返回数据的状态,通过后端可以更改
}
}
使用XHR发起POST请求
var xhr = new XMLHttpRequest()
xhr.open('POST','http://www.liulongbin.top:3006/api/addbook')
xhr.setRequestHeader('Conetnt-Type','application/x-www-form-urlencoded')
xhr.sent('')(提交数据使用字符串格式,多个数据使用&连接,不可以在open中拼接字符串,需要在sent中写入)
xhr.onreadystatechange = funciton() {
if(xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText) //得到的是一个JSON字符串
}
}
xhr对象的readyState属性
(3)常用http状态码
百度
(4)什么是跨域
由浏览器同源策略限制的一类请求场景,当两个不同地址,不同端口,不同协议之间请求就会产生跨域。
(5)防抖和节流
防抖:是当事件被触发后,延迟n秒后再执行回调,如果在n秒内事件又被触发,则重新计时
// html
<button id="button">防抖</button>
// js
let button = document.getElementById("button")
let timer
button.addEventListener('click', function() {
if (timer) { clearTimeout(timer) }
timer = setTimeout(() => {
console.log(11111);
}, 1000)
})
节流:节流策略,顾名思义,可以减少一段时间内事件的触发的频率。
当鼠标连续不断地触发某时间,只在单位时间内触发一次。期间的点击无效
// html
<button id="button">节流</button>
// js
let button = document.getElementById("button")
let flag = false
button.addEventListener('click', function() {
if (!flag) {
flag = true
setTimeout(() => {
flag = false
}, 1000)
console.log(11111);
}
})
(6)git常用命令行
git status // 查看暂存区文件和修改后文件状态
git add . // 将更改文件存入暂存区
git commit -m "xxx" // 将暂存区文件提交在本地git仓库
git checkout xxx // 切换指定分支
git branch // 查看所有分支(当前分支高亮显示)
git clone xxx // 克隆远程分支代码(xxx为远程分支代码)
git checkout -b xxx // 创建并切换为此分支
git pull origin 远程分支:本地分支 // 将远程分支拉取到本地分支,(当本地分支未创建时,自动创建,并合并远程分支到当前分支)
git merge xxx // 将指定分支合并到当前分支
git push origin 本地分支:远程分支 // 将本地分支推到远程分支,(当远程分支未创建时,会自动创建)
(7)webpack相关知识了解一下,有助于理解vue
(8)正则表达式,稍微看一下
vue部分
(1)vue常用指令
v-bind:
目标: 给标签属性设置vue变量的值
v-bind语法和简写
语法:v-bind:属性名="vue变量"
简写: :属性名="vue变量"
v-on:
目标: 给标签绑定事件
语法
v-on: 事件名="要执行的少量代码"
v-on: 事件名=“methods中的函数名"
v-on: 事件名=“methods中的函数名(实参)"
@事件名=...简写形式
方法在methods选项定义
v-model:
value属性和vue数据变量,双向绑定到一起
语法: v-model="Vue数据变量"
双向数据绑定(双向指定的value属性-vue变量,暂时只能用在表单标签,后期可以用在组件中)
变量变化 -> 视图自动同步
视图变化 -> 变量自动同步
vue变量的初始值会影响表单的默认数据
v-model的本质:v-bind(变量改变标签使用的变量跟随变化(属性名)) + v-on(标签事件改变时定义变量跟随改变(事件名))
v-text和v-html
- v-text="Vue数据变量",用的较多
- v-html="Vue数据变量",用的较少,因为有安全风险
v-show和v-if
控制标签的隐藏和出现(true时显示,false隐藏)
show的本质是css display: block; display: none;的封装
if的本质是从节点树中删除和插入
v-if 可以搭配 v-else v-else-if使用和if语句相同
v-for
列表渲染, 所在标签结构, 按照数据数量, 循环生成
语法:
- v-for="(值变量, 索引变量) in 目标结构"
- v-for="值变量 in 目标结构"
注意:
- 想要谁循环就放在谁身上(根据遍历到的数据动态生成标签)
- 目标结构可以是数组/对象/字符串(可遍历结构)
- 循环都是独立执行的
- v-for的临时变量名只能用在v-for范围内
(2)动态class动态style
语法 :class="{类名: 布尔值}";语法 :style="{css属性名: 值}"
(3)过滤器
转换格式,过滤器就是一个函数,传入值返回处理后的值
过滤器只能用在,插值表达式和v-bind动态属性里
语法:
- Vue.filter("过滤器名", (值) => {return "返回处理后的值"}) // 全局过滤器,可以生效在所有的vue文件中
- filters: {过滤器名字: (值) => {return "返回处理后的值"}} // 局部过滤器,只在当前vue文件中生效
使用: 变量名 | 过滤器名
(4)计算属性 computed
一个变量的值,依赖另外一些数据计算而来的结果
语法: computed: {
计算属性名 () {
return "值"
}
}
注意: 计算属性也是vue数据变量, 所以不要和data里重名, 用法和data相同,不需要调用,使用的时候和变量一致
使用this.计算属性名也可以使用该变量
计算属性将基于它们的响应依赖关系缓存。计算属性只会在相关响应式依赖发生改变时重新求值。这就意味着只要计算属性依赖值(非响应式数据获得的计算属性值将永远不发生改变)还没有发生改变,多次访问时计算属性会立即返回之前的计算结果,而不必再次执行函数。(当有需求实时的获取值得时候可以采用函数调用的形式得到值)
计算属性的完整写法:
// 给计算属性赋值触发set方法
// 使用计算属性的值,触发get方法
computed: {
"属性名": {
set(值) {
},
get() {
return "值"
}
}
}
(5)侦听器watch
可以侦听data/computed属性值的改变
语法1:
watch: {
"被侦听的属性名" (newVal, oldVal) {
}
}
高级语法:
watch: {
"要侦听的属性名": {
immediate: true, // 立即执行
deep: true, // 深度侦听复杂数据类型内变化
handler (newVal, oldVal) {}
}
}
(6)组件的概念和理解
每一个.vue文件都是一个组件
- 组件是可复用的 Vue 实例, 封装标签, 样式和JS代码
- 组件化 :封装的思想,把页面上 `可重用的部分` 封装为 `组件`,从而方便项目的开发 和 维护
- 一个页面, 可以拆分成一个个组件,一个组件就是一个整体, 每个组件可以有自己独立的结构 样式 和 行为(html, css和js)
- 各自独立,互不影响
每个组件都是一个独立的个体, 代码里体现为一个独立的.vue文件
- 创建组件, 封装要复用的标签, 样式, JS代码
- 注册组件(使用前需要引入)
- 全局注册 – main.js中 – 语法如图
- 局部注册 – 某.vue文件内 – 语法如图
- 使用组件(组件名当template标签使用,组件对象代表引入时命名的对象)
(7)组件通信:父子
父向子传值:在父组件中的template里使用时,通过属性名="值"的形式传给子组件
子组件内通过props接受
props: [] // 简单写法
props: { 属性名: { type: 类型, default: 默认值 } } // 复杂数据类型的返回值使用函数的形式返回 () => { return {} }
子向父传值:
子组件触发父自定义事件方法
前置补充, 父->索引->子组件(用于区分是哪个子组件)
- 父组件内,绑定自定义事件和事件处理函数
- 语法: @自定义事件名="父methods里函数名"
- 子组件内,恰当的时机,触发父给我绑的自定义事件,导致父methods里事件处理函数执行
- this.$emit(自定义事件名, 参数/传递的值)
(8)mixins混入
通过组件内script标签内通过mixins对象混入。混入对象为一个js文件,通过export default 暴露内容,语法格式与vue组件相同
格式为: mixins: [obj, obj2]
使用场景:在多个页面中使用同一个变量或方法时,可以定义混入组件,在main.js中引入
Vue.mixin({
methods: {
...具体方法
}
})
(9)依赖注入
通过provide和inject实例对象可以实现父组件给所有子组件传值
在父组件中声明provide对象,以函数的形式返回一个对象中需要传递的数据,在子组件中使用inject接收(使用方式和props类似)
(10)vue生命周期
百度(vue3.0有变化)
(11)$refs和$nextTick使用
通过ref属性获取组件对象
this.$nextTick(函数体)(一般情况下写的箭头函数,因为箭头函数没有this指向,使其this指向vue实例对象)
(12)vue动态组件(vue-router前身)
多个组件使用同一个挂载点,并动态切换
方法: 设置挂载点<component>,使用is属性来设置要显示哪个组件
<component :is="要显示的动态组件名"></component>
(13)组件插槽(需要着重理解)
(14)vue-router模块
(15)vuex
vue用来存储数据的插件
是一个js文件
import Vue from 'vue'
import Vuex from 'vuex'
import user from '@/store/modules/user.js'
Vue.use(Vuex)
export default new Vuex.Store({
namespaced: true,
state: {
userData: {},
},
actions: {
// 异步处理state数据
},
mutations: {
setData(state, data) {
state.userData = data
},
getters: {
// vuex state变量快速访问,类似computed
},
modules: {
// 与vuex语法类似,小的vuex
}
}
})