我个人在面试上遇到的常问问题
老师们 同学们大家好 我是你们的小蚂蚱 今天我想分享一下我常被问到的面试题
html5 的标签
footer header mark(高亮) nav main
css3常用属性
transform (向元素2/3D转换) transition 过渡 text-shadow 阴影 word-wrap:强制转换 border-radius
es6
箭头函数 promise 解构赋值 模板字符串 类
vue的生命周期
beforecreate created
beformoute mouted (操作dom)
beforeupdate updated
befordestroy destroyed(删除计时器)
mounted生命周期是 100% 有dom 不一定有数据
created 生命周期 是100% 有数据 不一定有dom
vuex生命周期
Sate 存放东西 $store.state … mapState
Getter 计算操作
Mutation 事件操作 (更改Vuex的store中的状态的唯一方法是提交Mcution)
Action 异步操作 (提交的是 mutation,而不是直接变更状态。)
Module (相当于前面四个生命周期的总和不管它
vuerouter的生命周期:
1.全局路由钩子函数
每次路由跳转,都会执行beforeEach和afterEach,一般写在main.js可以做权限控制
2.单个路由钩子函数
beforeEnter有三个参数:to/from/next
3.组件内路由钩子函数
三个参数:to/from/next
beforeRouteEnter:进入这个组建路由之前
beforeRouteLeave:离开这个组建路由
beforeRouteUpdate:再本路由的下级路由切换才会触发beforeRouteUpdate
Svn与Git的区别
- 最核心的区别Git是分布式的,而Svn不是分布的
2)Git把内容按元数据方式存储,而SVN是按文件 - Git没有一个全局版本号,而SVN有
- Git的内容的完整性要优于SVN
axios
1.安装axios
npm install --save axios
2. 在入口main.js中导入axios 并将axios写入vue的原型,这样就能更简单的使用。
import axios from 'axios'
import Qs from 'qs'
//QS是axios库中带的,不需要我们再npm安装一个
Vue.prototype.axios = axios;
Vue.prototype.qs = Qs;
3.在项目里愉快的使用axios啦
this.axios.post('/api/test',this.qs.stringify({'name':'xiaoming','sex':'nan'}),{
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then(function(res){
console.log(res.data)
//控制台打印请求成功时返回的数据
//bind(this)可以不用
}.bind(this))
.catch(function(err){
if(err.response) {
console.log(err.response)
//控制台打印错误返回的内容
}
//bind(this)可以不用
}.bind(this)
vuex
npm install vuex --save
新建个store 文件夹 里面有个 store.js
在mian.js里面引用
动态路由
循环路由的时候会加个判断 v-if item.meta.role == B
保留组件的 是 keep-alive 组件
router/index.js
// 初始化路由
export default new Router({
routes: [
{
path: '/login',
name: 'Login',
component: Login
}
]
});
// 动态路由 meta 定义了role
export const powerRouter =[
{ path: '/',redirect:'/red', name: 'index',component: Index,hidden:false,
children: [
{ path: '/red', name: 'red', component: red,},
{ path: '/yellow', name: 'yellow', component: yellow, meta: {role: 'B'}},
{ path: '/blue', name: 'blue', component: blue, meta: {role: 'C'}}
]
}
];
store/modules/login.js actions部分
Logins({ commit }, info){
return new Promise((resolve, reject) => {
let data={};
loginByUserInfo.map(function (item) { //获取所以用户信息
if(info.username === item.username || info.pew === item.pew){
commit('SET_USERNAME',item.username); //将username和role进行存储
sessionStorage.setItem('USERNAME', item.username); //存入 session
commit('SET_ROLE',item.role);
sessionStorage.setItem('ROLE', item.role);
return data={username:item.username,introduce:item.introduce};
}else{
return data;
}
});
resolve(data);
}).catch(error => {
reject(error);
});
},
Roles({ commit }, newrouter){
return new Promise((resolve, reject) => {
commit('SET_NEWROUER',newrouter); //存储最新路由
resolve(newrouter);
}).catch(error => {
reject(error);
});
},
main.js
router.beforeEach((to, from, next) => {
if(store.getters.role){ //判断role 是否存在
if(store.getters.newrouter.length !== 0){
next() //resolve 钩子
}else{
let newrouter
if (store.getters.role == 'A') { //判断权限
newrouter = powerRouter
} else {
let newchildren = powerRouter[0].children.filter(route => {
if(route.meta){
if(route.meta.role == store.getters.role){
return true
}
return false
}else{
return true
}
});
newrouter = powerRouter
newrouter[0].children = newchildren
}
router.addRoutes(newrouter) //添加动态路由
store.dispatch('Roles',newrouter).then(res => {
next({ ...to })
}).catch(() => {
})
}
}else{
if (['/login'].indexOf(to.path) !== -1) {
next()
} else {
next('/login')
}
}
})
components/index.vue
// mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性
...mapGetters([
'newrouter'
])
vue的路由跳转
1、方式一:标签跳转 router-link
① 不传参
<li >
<router-link to="user">点击验证动画效果 </router-link>
</li>
② 跳转时传参
// 先要配置路由
path: '/user/:id'
<router-link :to="'/user/' + this.id"> <router-link/>
// 接收参数
this.$route.params.id
2、方式二:事件跳转 this.$router.push()
描述:跳转到不同的url,但这个方法会向history栈添加一个记录,点击后退会返回到上一个页面。
用法:
① 字符串
this.$router.push('/home')
② 对象
this.$router.push({path:'/home'})
③ query 传参,相当于get请求,页面跳转时参数会在地址栏中显示,通过this.$route.query.id获取
// 变成 /user?id=2
this.$router.push({
path:'/user',
query:{
id:this.id
}
})
④ params 传参,相当于post请求,页面跳转时参数不会在地址栏中显示,通过this.$route.params.id获取
this.$router.push({
path:'/user',
params:{
id:this.id
}
})
注:传参是 router,接收参数是 route
路由需要一个 一个实例new Router
然后 里面有一个routes的配置项
routes是个数组 里面每一个对象都是一个路径
.cookie localStroage与sessionStorage的区别
1.cookie
Cookie实际上是一小段的文本信息。客户端请求服务器,如果服务器需要记录该用户状态,就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时,浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie,以此来辨认用户状态。服务器还可以根据需要修改Cookie的内容。由于cookie的安全性不高,所以一般不把密码保存在cookie中;
2.localStorage
①相当于一个5M大小的前端数据库;
②存储的所有数据类型都为字符串型,如果要求其他类型,取出的时候要自行转换;
③localStorage的值在浏览器为隐私模式时无法读取;
④localStorage不会被网站爬虫读取到;
⑤localStorage具有同源策略,所以不能在不同网站之间使用;
⑤localStorage的存储:
1. localStorage.a=1;
2. localStorage[“a”]=1;
3. localStorage.setItem(“a”,1);(取的时候为localStorage . getItem,删的时候为localStorage.removeItem(“a”)或者localStorage.clear()删除全部。)
4.key()方法,相当于遍历,获取 / 删除localStorage中的第几个数据
3.sessionStorage
sessionStorage与localStorage的一点区别就是会化结束时,sessionStorage的值会消失,而localStorage的值则会永久保存;