1.boxsizing有哪些值
* content-box 宽度和高度分别应用到元素得内容框,在宽高之外绘制元素得内边距和边框
* border-box 为元素指定得任何内边距和边框都将在设定得宽度和高度内进行绘制。
通过从已设定得宽度和高度分别减去边框和内边距才能得到内容的宽度和高度
* inherit 继承父级的box-sizing
2.绝对定位对父级的要求
要求父级最少拥有定位且不是默认值,最好是相对定位
3.Flex布局默认向哪边,如果要向另一方怎么设置
容器主轴方向(flex-direction)为做左往右 ←
flex-direction有四个值分别是:
*默认值row(左往右)、row-reverse(右往左)
*column(上往下)、column-reverse(下往上)
4.左中右渐变背景色,渐变怎么设置
渐变色主要有俩种方式:线性渐变、径向渐变
线性渐变色主要是 上、下、左、右、对角去渐变:
* 默认为从上到下 background-image: linear-gradient(#333, #ddaacc)
* 从左到右渐变 background-image: linear-gradient(to right,#333, #ddaacc)
* 对角渐变色 background-image: linear-gradient(to bottom right,#333, #ddaacc)
* 也可以使用角度来控制渐变 background-image: linear-gradient(-90deg, red, yellow);
* 多个渐变颜色 background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
* 透明度渐变色 background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
* 重复间变色 background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
* 不写方向属性则是默认上下渐变、写了to 方向则可以控制渐变的方向、对个方向值产生对角则是对角渐变色
如果写得俩个方向是相对或者三个方向则会造成css错误(不显示效果)
径向渐变则是 由中心定义
* 一层一层的渐变出去,可以控制每一层的占比例以及形状(椭圆、正圆), 默认为均匀占比
background-image: radial-gradient(red, yellow, green);
* 控制不均匀分布 background-image: radial-gradient(red 5%, yellow 15%, green 60%);
* 设置型状 background-image: radial-gradient(circle, red, yellow, green);
* 设置不同大小尺寸关键字:
closest-side
farthest-side
closest-corner
farthest-corner
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
* 设置重复渐变 background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
5.子传父有哪些传值方式(除了官方提供的)
$on,$emit
* 子使用 $emit 该机制会向父组件传递一个事件和一个值
* 父组件使用该定义的事件名 接收子组件传递的值
父向子传递则通过props的方式传递数据,子组件通过props来接收这个数据
6.action有什么用?
* 可以异步的来修改state
* actions并不是直接修改state,而是提交给mutation
7.路由有哪些钩子
* 全局守卫 router.beforeEach
守卫中接收有三个参数
- to 路由即将要进入目标路由对象
- from 当前导航正要离开的路由
- next 一定要调用该方法来绝对钩子是否执行,怎么样执行
next() 确定进入导航
next(false) 终止当前的导航。如果浏览器url改变了(例如用户手动点击后退,那么该url地址会重置from路由对应的地址)
next('/')或 next({path:'/'}) 跳转到一个指定的地址中。
* 全局解析守卫 router.beforResolve
* 全局后置钩子 router.afterEach
* 路由独享的守卫 beforeEnter
* 组件内的守卫 beforeRouteEnter
8.防抖和节流
* 防抖主要在过频操作的情况下,只保留最后一次触发函数
* 节流是每隔一定的时间内才触发一次函数
9.webpack里面有引入哪些依赖
10.小程序只使用一次的钩子
* onLaunch 页面初始化完成时触发,全局只触发一次
* onload 页面第一次加载 一个页面只会调用一次
* onReady 初次渲染 一个页面只会调用一次
* onShow 页面显示, 每次显示都会触发
* onHide 页面隐藏, 每次退出退出切换页面会触发一次
11.js引用类型
* number 数值类型
* string 字符串类型
* Boolean 布尔
* object 对象
* undefined 未定义
* null 空
* symbol 唯一值
12.substring
* js内置函数:
用于取俩个指定下标中间的字符串
默认一个参数则 取这个下标到最后的一个字符串
13.slice可以用于字符串截取吗
* 可以通过指定的开始和结束 来提取获取到的字符串 并且以新字符串的形式返回。
* 必须要有开始参数 如果是复数则从最后一个开始算
14.数组删除最后一个元素,有啥方法
* 使用pop() 这个方法也会返回删除的这个数据
15.原生js ajax过程
* new一个Ajax对象 再使用Ajax的方法来操作
16.Jq改变图片src
*使用 attr() 可以修改
17.cookie,sessionstorage, locastorage谁可以跨域,区别是什么
* cookie大小在4kb 主要用来制作记住密码,自动登陆,用来记录用户浏览记录,cookie会在http请求中携带
* session不支持跨域,存在服务器中,只要关闭浏览器就会失效
* loacstorage 以对象的形式会永久保存数据在本地中,除非删除了。大小在5m
18.http1.0和2.0区别
19.vue的生命周期
* beforeCreate
* vue对象用新方法实例化。它创建一个*
* created
* beforeMount
* mounted
* beforeUpdate
* updated
* deforeDestroy
* destroyed
======================
1.ajax和axios有什么区别
* Ajax和axios使用方法相似的
* axios是一个promise封装的库,可以使用promise的
2.自定义指令
*
3.vue路由钩子
4.es5和es6使用上的区别(主要是指import, require, module.exports, exports)
5.跨域
6.数组去重
* es6的set去重
function unique(arr){
return Array.from(new Set(arr))
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
* 最简单兼容性最好的去重
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
function unique(arr){
for(var i=0; i<arr.length; i++){
for(var j=i+1; j<arr.length; j++){
if(arr[i] === arr[j]){
console.log(arr.splice(j, 1))
arr.splice(j, 1);
j--
}
}
}
return arr;
}
console.log(unique(arr))
7.http/https区别
8.执行上下文
9.function和箭头函数区别
箭头函数指向的是外部执行上下文
function的this是指向window
10.function的this
function的this只有在引用的时候才能明确指向的是 环境 还是 调用对象
如果是new实例化出的话 this是指向函数本身
如果直接引用的话 this则是引用对象
11. map和foreach的区别
*foreach 没有返回值,返回的是一个undefined
foreach 会更改原来的数组
map并不会修改原来的数组
map会返回一个新的数组
map和foreach都可以接俩个参数,回调函数、上下文变量
俩者主要区别是有无返回值
如果要用一个原数组返回一个新数组,可以使用map
如果需要修改原数组,则使用foreach
=======================
1.vue 响应式原理
* vue主要是利用了object.defineProperty
2.reduce
3.v-for为啥要加key,可以给index吗
* 加上key会让diff算法更新得更高效
* 不加上key或者使用index 在对数据有操作得时候会出现bug,比如本来想删除第一个得数据,结果把别的数据删除了
* 加上唯一性key会使得旧dom和新dom直接有关联,可以最大化得利用节点,减少性能消耗
https://www.cnblogs.com/youhong/p/11327062.html
4.浏览器调试方法
5.vue数据缓存api(keep-alive)
6.js异步机制(ajax),ajax, promise, async,区别
7.把数组变对象(reduce)
*
8.闭包
9.构造函数static,定义一个函数,函数里的this指向
10.父和孙子组件传值
11.v-model语法糖
12.怎么判断一个需求,要不要使用第三方库,怎么选择第三方库
=====================
1.http和https区别,https用什么加密
* http是明文传输的,并没有加密。而https是加密输出的
* https需要申请证书,http和https的常用端口不同,http是80 https是443
* http连接比较简单且快,https由ssl/tls + http协议构建的加密传输、身份认证的网络协议
* https使用非对称加密方式
2.es6新特性
* 向对象添加属性、合并对象
- 克隆对象,同时向克隆对象添加附加属性
const user = {id:0, name:'tome'};
const userWithpass = {...user, password:'password'};
const part1 = {id:1, name:'holle'};
const part2 = {id:11, password:'password'};
const part3 = {...part1, ...part2}
* 删除对象的属性,利用对象属性、解构赋值,删除选中的属性
- const noPassword = ({password, ...rest})=>rest;
const user = {id:100, name:'hhh', password:'123', baoliu:'222'};
noPassword(user)
* 调整对象属性的位置, 还是利用对象和解构赋值的方式,把属性拉到第一个
const user3 = { password: 'Password!', name: 'Naboo', id: 300}
const organize = object => ({ id: '';, ...object })
* 默认属性
const user2 = { id: 200, name: 'Vince Noir'}
const user4 = { id: 400, name: 'Bollo', quotes: ["I've got a bad feeling about this..."]}
const setDefaults = ({ quotes = [], ...object}) => ({ ...object, quotes })
setDefaults(user2)
* 重命名对象的属性
- defineProperty() 这个方法会直接在一个对象上定义一个新属性,或者修改现有属性,并且返回此对象
var capitals = [{goujiba:"大鸡er"}]
function renameKey(obj, oldkey, key){
if(oldkey !== key){
Object.defineProperty(obj, key, Object.getOwnPropertyDescriptor(obj, oldkey))
delete(obj[oldkey])
}
}
capitals.forEach(obj => renameKey(obj, "goujiba", "jj"))
console.log(capitals)
- 通过修改键值对的方式
var capitals = [{goujiba:"大鸡er"}]
capitals = capitals.map(function(obj){
console.log(obj);
obj["jiji"] = obj["goujiba"];
delete obj["goujiba"]
return obj
})
console.log(capitals)
* 条件属性
3.var, let, const区别
4.有用过svg吗,svg有什么特点,功能
* 容易修改
5.盒子模型
6.vue父子组件通信
* prop 常用
* $emit 组件封装用的比较多
* .sync 语法糖 用得比较少
* $attrs \ $listeners 组件封装用的比较多
* provide \ inject 高阶组件/组件库用的比较多
* 其他通信方式
7. 页面性能优化
8.怎么学习,学习计划
9. Object.defineProperty()
let jj = {'name':'鸡儿'}
var capitals = [{goujiba:"大鸡er"}]
// Object.defineProperty() 最后一个参数必须是描述符或对象形式,添加的新属性
Object.defineProperty(jj, 'qq', Object.getOwnPropertyDescriptor(jj, 'name'))
Object.defineProperty(jj, 'qq', {
value: 37,
writable: false
})
Object.defineProperty(jj, 'qq', {value:'hao'})
======================
1.说下对vue的了解
2.多层嵌套路由,缓存路由
3.兄弟组件怎么通信
* 通过共同父级,使用props、$emit
* 通过实例一个vue 做一个eventbus
* 使用vuex
4.cookie和storage区别,有了cookie,为什么要加storage
5.get, post区别
* 明文的方式发送http请求
* get 请求增加参数的方式,是使用?id=1&name='小米' 这种字符串拼接的方式传值
* post 是通过请求体发送请求给后台接收
* get 是能缓存请求数据的 在退后的时候不会影响
* get请求的时候 是把请求头和数据同时发送 服务器响应后 返回数据
* post请求的时候 先发送请求头 服务器响应100响应码后 浏览器再发送请求数据过去 服务器响应后 返回数据
6.post数据是通过什么传过去的,载体(body)
7.new做了什么
* 创建一个新对象
* this指向当前这个对象
* 连接上原型链
8.less不同单位做计算
* calc() 中运算符两边要有空格,否则无效。
* min-height: calc(100vh - 90rpx);
======================
1.class和构造函数定义的对象,有什么区别
2.eventbus执行是怎样的,emit
* 通过再new一个vue实例
3.强缓存协商缓存请求头怎么设置
4.原型链
5.作用域链
6. 前后台交互api步骤
* 请求地址 、 请求方式、 请求参数、 响应
======================
1.项目上的优化,难点
2.浏览器缓存机制
* 浏览器缓存可以把请求过的web资源 拷贝一份存储在本地浏览器中 并且根据请求配置信息选择是否使用该副本
* 强换成
* 协商缓存
3.事件轮询
* 在js执行的时候
4.webpack打包机制
5.new set求数组的交并差集
6.Promise
7.同步异步
* 由于js是单线程的 在同步执行的时候 代码是一块一块的执行 如果某一块代码出现等待 就会把线程给堵塞了
* 异步代码则遇到需要等待的代码 会将该代码放入
8.slice和splice对字符串的操作
9.substr和substring
======================
基本都会问:
vue2和vue3区别,响应式原理
cookie和locastorage区别,
小程序生命周期
diff算法
* 同一层得节点互相比较
闭包,
原型链,
作用域链,
http缓存(强缓存,协商缓存)
父子组件之间的传值
* $on 、$emit
* props
* $refs获取子组件得实例
methods中的函数的this为什么是vue的实例
* 在执行methods里面的函数的时候,用bind将this指向了vue的实例
vuex里面有几种状态管理
* state
状态存储管理
state:{
data:'数据'
}
- 页面中可以直接读取state的数据
this.$stroe.state.data;
* getters
* actions
* mutations
mutations是一个对象里面写方法,可以对state里面的状态做操作(修改,存储) 自定义的方法里面有俩个参数,一个是 state对象,另一个是传入的数据
在页面和组件中修改state则需要调用到mutations里面对应的方法来做修改
mutations:{
SET_MUTATION(state, menuData){
if(menuData){
state.treeData = menuData;
}else{
state.treeData = []
}
}
}
* modules
=====
微信小程序登陆流程
* 第一步:wx.login获取 用户临时登录凭证code
第二步:wx.getUserInfo获取加密过的数据encryptedData和解密参数iv
第三步:把步骤一、二中的code、encryptedData、iv传到开发者自己服务端
第三步:服务端获取到code、encryptedData、iv之后用get方法请求如下微信接口
https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
appid:小程序appid
secret: 小程序密钥
js_code: 第一步获取的临时登录凭证code
grant_type:'authorization_code'
接口会返回 openid, session_key,注意:用户已经授权过的平台还会返回unionId,如果你只是需要unionId,则到此为止
没有授权过则用encryptedData、session_key、iv、appid、secret进行解密,官方多语言解密示例下载链接:
VUE 离开页面路由拦截
* VUE 提供一个钩子函数 beforeRouteLeave, 离开当前路由时会先触发该函数,当然也有beforeRouteEnter,进入路由前先触发该函数。
小程序页面离开拦截
* wx.enableAlertBeforeUnload
微信jssdk使用
* 引入下载的js文件
* 通过config接口注入权限验证配置
前端模块化,AMD与CMD的区别
各模块加载器区别
1. 模块使用方式
CommonJS :require 引用模块 module.exports 暴露接口
AMD:require 引用模块 使用 define 函数的 return 暴露接口
CMD:require 引用模块 module.exports 或 exports 暴露接口
ES6:import 引用模块 export default 暴露接口
2. 模块加载方式
CommonJS :运行时加载,一个模块就是一个对象,加载一个模块就是加载这个模块的所有方法,然后读取其中需要的方法。
AMD:并行加载,提前执行。
CMD:并行加载,按需执行。
ES6 :编译时加载,在模块编译时就完成加载,引用的时候只加载需要的方法,其他方法不加载。
3. 实现模块规范
CommonJS :NodeJS
AMD:RequireJS
CMD:SeaJS
ES6 :原生JS
4. 输出的是引用还是拷贝
CommonJS :输出的是值的拷贝,不会受其内部影响。
ES6 :输出的是值的引用,会受其内部影响。
5. 模块内顶层 this 对象
CommonJS :指向的是当前模块对象。
ES6 :指向的是 undefined。
vue2.0中的route的区别
1.router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了许多关键的对象和属性。
举例:history对象
$router.push({path:'home'});本质是向history栈中添加一个路由,在我们看来是 切换路由,但本质是在添加一个history记录
方法:
$router.replace({path:'home'});//替换路由,没有历史记录
2.route是一个跳转的路由对象,每一个路由都会有一个route对象,是一个局部的对象,可以获取对应的name,path,params,query等