一，css部分
1，简单介绍下css权重优先级：
默认样式<标签选择器<类选择器<id选择器<行内样式<!important
0 1 10 100 1000 1000以上
继承的权重为0 (字体的css会继承自父类标签元素)
权重会叠加 (div.box 权重:1+10=11) (div #box 权重:1+100=101)
相同权重的选择器，后边的代码会覆盖前面的
2，实现一个不知道宽高的盒子水平垂直居中，有哪几种实现方式：
a) 使用CSS方法：
父盒子设置：display:table-cell;text-align:center;vertical-align:middle;
子盒子设置：display:inline-block;vertical-align:middle;
代码实现：=>
.father{
width:300px;
height:300px;
display:table-cell;
text-align:center;
vertical-align:center;
}
.son{
background:red;
display:inline-block;
vertical-align:middle;
}
b) 使用CSS3 transform:
父盒子设置：position:relative;
子盒子设置：position:absolute;left:50%;top:50%;transform：transform(-50%,-50%);
代码实现：=>
.father{
width:300px;
height:300px;
position:relative;
}
.son{
background:red;
position:absolute;
top:50%;
left:50%;
transform:transform(-50%,-50%);
}
c) 弹性盒子：
父盒子设置：display:flex;justify-content:center;align-item:center;
子盒子设置：空，不须要设置
代码实现：=>
.father{
width:300px;
height:300px;
display:flex;
justify-content:center;
align-item:center;
}
.son{
background:red;
}
[参考]([https://zhuanlan.zhihu.com/p/27186791][1])
3，如何用css画一个三角形：
代码实现：=>
#eg{
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom: 100px solid blue;
}
二，JS部分：
1，请写一段代码将"2019-4-28"转成"2019年4月28日"
代码实现：=>
let str = '2019-4-28';
let year = str.split('-')[0];
let month = str.split('-')[1];
let date = str.split('-')[2];
let str1 =year+"年"+month+"月"+date+"日";
console.log(str1);
2，写一段代码将数组 ['a','b','c'] , 变成 ['c','b','a'] 。(可以使用js自带方法，也能够本身实现)
代码实现：=>
var arr=['a','b','c'];
//var arr1=arr.sort();//正序
var arr1=arr.reverse();//反序
console.log(arr1);
三，Vue部分：
1，vue的生命周期钩子函数有哪些？
answer:=>
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
[详细]([https://www.cnblogs.com/xkloveme/p/7435271.html][2])
2，什么是keep-alive？它有什么做用？与他对应的钩子函数是那些？
answer:=>
是Vue的内置组件，能在组件切换过程当中将状态保留在内存中，防止重复渲染DOM。
对应的钩子函数：
activated
类型：func
触发时机：keep-alive组件激活时使用；
deactivated
类型：func
触发时机：keep-alive组件停用时调用；
3，vue的事件修饰符是什么，她能作什么事？举个栗子：在vue的click事件中，如何阻止事件传播？
answer:=>
事件修饰符处理了许多DOM事件的细节，让咱们再也不须要花大量的时间去处理这些烦恼的事情，
而能有更多的精力专一于程序的逻辑处理。在Vue中事件修饰符主要有：
.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡
.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为
（若是事件可取消，则取消该事件，而不中止事件的进一步传播）
.capture：与事件冒泡的方向相反，事件捕获由外到内
.self：只会触发本身范围内的事件，不包含子元素
.once：只会触发一次
举个栗子：=>
.stop 防止事件冒泡
冒泡事件：嵌套两三层父子关系，而后全部都有点击事件，点击子节点，就会触发从内至外
子节点-父节点的点击事件
4，什么是vue router路由导航守卫？工做中用过她吗？经常使用她处理什么问题？
导航守卫便是在路由跳转的时候，根据vue-router提供的导航守卫主要用来经过跳转或取消参数
或查询的改变并不会出触发进入/离开的导航守卫
路由跳转前作一些验证，好比登陆验证，是网站中的广泛需求。
对此，vue-route 提供的 beforeRouteUpdate 能够方便地实现导航守卫（navigation-guards）。
5，从路由/user跳转到/home,有几种方式？
1.router-link
2.this.$router.push() (函数里面调用)
3.this.$router.replace() (用法同上,push)
4.this.$router.go(n) ()
[详细介绍]([https://blog.csdn.net/jiandan1127/article/details/86170336][3])
6，什么是vuex？他有什么做用？如何改变store中的状态（state）？
answer:=>
vuex是一个专为vue.js应用程序开发的状态管理模式。vuex解决了组件之间同一状态的共享问题。
当咱们的应用遇到多个组件之间的共享问题时会须要
状态管理核心状态管理有5个核心，分别是state、getter、mutation、action以及module。
1.state
state为单一状态树，在state中须要定义咱们所须要管理的数组、对象、字符串等等，只有在这里定义了，
在vue.js的组件中才能获取你定义的这个对象的状态。
2.简单的 store 模式
var store = {
debug: true,
state: {
message: 'Hello!'
},
setMessageAction (newValue) {
if (this.debug)
console.log('setMessageAction triggered with', newValue)
this.state.message = newValue
},
clearMessageAction () {
if (this.debug) console.log('clearMessageAction triggered') this.state.message = ''
}
}
全部 store 中 state 的改变，都放置在 store 自身的 action 中去管理。
这种集中式状态管理可以被更容易地理解哪一种类型的 mutation 将会发生，以及它们是如何被触发。
当错误出现时，咱们如今也会有一个 log 记录 bug 以前发生了什么。
此外，每一个实例/组件仍然能够拥有和管理本身的私有状态：
var vmA = new Vue({
data: {
privateState: {},
sharedState: store.state
}
})
var vmB = new Vue({
data: {
privateState: {},
sharedState: store.state
}
})
End!