1.导航守卫(路由守卫)
1.全局守卫(作用于全局)
// 全局前置导航钩子
router.beforeEach((to,from,next)=>{
})
to:要去哪里
from：从哪里来
next：是否能通过
// 全局后置导航钩子
router.afterEach((to,from)=>{
})
2路由守卫(作用于某个被设置的路由)
beforeEnter:(to,from,next)=>{}，用法与全局守卫一致。只是，将其写进其中一个路由对象中，只在这个路由下起作用。
3.组件守卫(作用于被设置的组件)
·到达这个组件时，beforeRouteEnter:(to,from,next)=>{}
离开这个组件时，beforeRouteLeave:(to,from,next)=>{}
2.修改element ui样式
1.在类名前面加/deep/，写在scoped作用域里面
2.新建一个标签，给要修改的样式加类名或id
3.登陆时候，登陆成功，复制登陆的url在另一个浏览器能不能打开
在不同的浏览器不能打开，需要重新登陆，因为不同浏览器存储方式不同。
在同一浏览器，不同窗口，不同页面都可以打开
在不同电脑，统一浏览器不能打开，需要登陆
4.vue常用的指令
插入文本:v-text
插入HMTL:v-html
循环:v-for
条件渲染
第一种：if ... else if ...else型
第二种：v-show
属性绑定:v-bind
双向绑定:v-model
绑定事件:v-on
v-if和v-show的区别是什么：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；
5.事件修饰符
- .stop 阻止冒泡
- .prevent 阻止默认事件
- .capture 添加事件侦听器时使用事件捕获模式
- .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
- .once 事件只触发一次
6.与后台联调接口在那配置代理
vue cli2项目在config文件夹下的index.js文件里
vue cli3项目在vue.config.js里面
7.生命周期函数
beforecreated：el 和 data 并未初始化
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化
mounted ：完成挂载
beforecreate : 举个栗子：可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestory： 你确认删除XX吗？
destoryed ：当前组件已被删除，清空相关内容
8.es6常用语法
let 和 const 定义变量和常量
解构赋值
扩展运算符
模板字符串
async awit
9.promise
所谓promise，简单说就是一个异步操作的结果。
对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。
一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。
缺点。
首先，无法取消Promise
如果不设置回调函数，Promise内部抛出的错误，不会反应到外部
当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。
10.js里面的迭代
js的迭代有五种方法
every()数组的每一项执行的函数都满足条件就返回true
some()数组中期中一项执行的函数满足条件就返回true
map()返回执行函数后进行运算的数组元素
filter()执行函数过滤掉不符和条件的数组元素，返回复合条件的数组元素
forEach()循环数组
11.对递归的理解
递归就是调用函数本身
用处：树形图，
找父节点，插入子节点
判断子节点是否有子集，然后如此循环
12.h5一些常用的语义化标签
：页眉通常包括网站标志、主导航、全站链接以及搜索框。
：标记导航，仅对文档中重要的链接群使用。
：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
：包含像报纸一样的内容= =||是这么理解的，表示文档、页面、应用或一个独立的容器。
article可以嵌套article，只要里面的article与外面的是部分与整体的关系。
：具有相似主题的一组内容，比如网站的主页可以分成介绍、新闻条目、联系信息等条块。
：指定附注栏，包括引述、侧栏、指向文章的一组链接、广告、友情链接、相关产品列表等。
：页脚，只有当父级是body时，才是整个页面的页脚。
：表示内容重要性。
：标记内容着重点（大量用于提升段落文本语义）。
：突出显示文本（yellow），提醒读者。
在HTML5中em是表示强调的唯一元素，而strong则表示重要程度。
：出于实用目的提醒读者的一块文字，不传达任何额外的重要性
：标记时间。datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。
：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
：添加的内容。
13.Vue项目中实现token验证
在前后端完全分离的情况下，Vue项目中实现token验证大致思路如下：
1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码
2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token
3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面
4、前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面
5、每次调后端接口，都要在请求头中加token
6、后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败（例如：token过期）就返回401，请求头中没有token也返回401
7、如果前端拿到状态码为401，就清除token信息并跳转到登录页面
14.vuex分哪几部分
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
vuex 中最关键的是store对象，这是vuex的核心。可以说，vuex这个插件其实就是一个store对象，每个vue应用仅且仅有一个store对象。
有 5 种，分别是 state、getters、mutations、actions、modules
可见，store是Vuex.Store这个构造函数new出来的实例。在构造函数中可以传一个对象参数。这个参数中可以包含5个对象：
- 1.state – 存放状态
- 2.getters – state的计算属性
- 3.mutations – 更改状态的逻辑，同步操作
- 4.actions – 提交mutation，异步操作
- 5.mudules – 将store模块化
关于store，需要先记住两点：
- 1. store 中存储的状态是响应式的，当组件从store中读取状态时，如果store中的状态发生了改变，那么相应的组件也会得到更新；
- 2. 不能直接改变store中的状态。改变store中的状态的唯一途径是提交(commit)mutations。这样使得我们可以方便地跟踪每一个状态的变化。
3.1.2 一个完整的store的结构是这样的
const store = new Vuex.Store({
state: {
// 存放状态
},
getters: {
// state的计算属性
},
mutations: {
// 更改state中状态的逻辑，同步操作
},
actions: {
// 提交mutation，异步操作
},
// 如果将store分成一个个的模块的话，则需要用到modules。
//然后在每一个module中写state, getters, mutations, actions等。
modules: {
a: moduleA,
b: moduleB,
// ...
}
});
15.vue里面怎么校验input框不能为空
判断input的v-model绑定的值
16.axios自己拿过来用还是封装一个方法来用
一般在拦截器对axios进行请求和响应的封装，请求时候在每个请求上添加请求头，携带token回去，响应一般对响应的数据格式处理一下
17.vue里面什么时候使用$set
当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去；
官方解释：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
你会发现响应系统 ,把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter
Vue.set()不光能修改数据，还能添加数据，弥补了[Vue数组变异方法](https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC%82%E6%96%B9%E6%B3%95)的不足
18.弹性盒子如何实现左右固定宽度，中间自适应宽度
分别左中右三个div，最外层container，最外层container设置css{display：flex；}，左侧left设置css{order：-1；// 默认是0，越小越靠前 width：200px},中间middle设置css{flex-grow：1；//默认为0，放大比例，填充空白 }，右边设置right的css{width：300px}
非弹性盒子方法：
1.运用float,左右浮动,中间采用margin-left 和 margin-right
2.左右两侧采用绝对定位 中间同样采用margin-left margin-right方法
19.vue里面的插槽
封装公共组件，在不同页面显示内容有差异，可以用插槽实现。
使组件可复用性更高，更加灵活，我们可以随时通过父组件给子组件加一些需要的东西。
20.怎么父子传值，非父子怎么传值
父组件向子组件传值成功
总结一下：
子组件在props中创建一个属性，用以接收父组件传过来的值
父组件中注册子组件
在子组件标签中添加子组件props中创建的属性
把需要传给子组件的值赋给该属性
子组件向父组件传值成功
总结一下：
子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了
非父子组件之间传值
vue官网指出，可以使用一个空vue实例作为事件中央线
也就是说 非父子组件之间的通信，必须要有公共的实例（可以是空的），才能使用 $emit 获取 $on 的数据参数，实现组件通信（适用于简单的组件通讯）
复杂的情况，Vue也有提供更复杂的状态管理模式Vuex来进行处理
21.mock.js用假数据请求
1.先安装mock，npm install mockjs
2.创建mock文件夹,在mock文件夹下创建mock.js文件
1.1引入mockjs
import Mock from 'mockjs' // 引入mockjs
2.2用mock函数编写接口，export把接口暴露出去
export default Mock.mock('/postdata1','post',{
success: true,
message: '@cparagraph',
// 属性 list 的值是一个数组，其中含有 1 到 5 个元素
'list|1-5': [{
// 属性 sid 是一个自增数，起始值为 1，每次增 1
'sid|+1': 1,
// 属性 userId 是一个5位的随机码
'userId|5': '',
}]
});
3.3在需要用到的页面，用axios请求接口
22.怎么判断一个用户有没有登陆过这个页面，判断跳进哪个页面
通过路由导航守卫来判断，在全局前置守卫中做判断，判断cookie或者localstronage里面有没有token，有的话继续执行,没有的话跳转到登陆页面。
实现有的页面需要登陆才能看，有的页面不登陆也能看：
在router.js路由文件中，给需要判断是否登陆的页面路由添加mate属性，先判断权限，在判断是否有token，是否登陆。
通过路由参数中的name属性来判断。
23.闭包是什么，怎么在for循环中使用闭包
闭包：定义在一个函数内部的函数
闭包的作用：一个是读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
for循环中有时候需要在for循环中放一个匿名函数，这个时候就会出现的问题是后面的值把前面都覆盖了，所以在进入匿名函数时候，是循环结束的最终值。
为了解决这个问题，把每次循环的第i项在传进去，这就是利用的 闭包的特性
24.怎样清除浮动
1.给父级设置overflow：hidden
2.在父级后面加空的div，并设置clear：both
3.给父级内部两个子元素后面加空div，设置clear：both
4.单伪元素的方法
5.双伪元素的方法
伪类和伪元素的区别：
伪类其实是弥补了CSS选择器的不足，用来更方便地获取信息(:first-child/:last-child/:first-of-type/:last-of-type)
伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式(::before/::after/::first-letter/::first-line)
25.v-if和v-show的区别
相同点：v-if与v-show都可以动态控制dom元素显示隐藏
不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css--display:none，dom元素还在。
26.vue里面的computed和methods有什么区别
computed是属性调用，而methods是函数调用,methods定义的方法要加上 () 来调用
computed带有缓存功能，而methods不是：计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。方法调用都会重新执行函数
computed 和 methods 不可以重名
- Vue会把 methods 和 data 里的东西，全部代理到Vue生成的对象中，这会将computed中重名属性覆盖
27.数组的方法。
concat()
- 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
Array.isArray()
- 用于确定传递的值是否是一个 Array
filter()
- 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素
fill()
- 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素
find()
- 返回数组中满足提供的测试函数的第一个元素的值
findIndex()
- 返回数组中满足提供的测试函数的第一个元素的索引
forEach()
- 方法对数组的每个元素执行一次提供的函数
ncludes()
- 用来判断一个数组是否包含一个指定的值，如果是，酌情返回 true或 false
indexOf()
- 返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1
join()
- 将数组（或一个类数组对象）的所有元素连接到一个字符串中
lastIndexOf()
- 返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找
map()
- 创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果
pop()
- 从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度
push()
- 将一个或多个元素添加到数组的末尾
shift()
- 从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度
some()
- 测试数组中的某些元素是否通过由提供的函数实现的测试。
splice()
- 通过删除现有元素和/或添加新元素来更改一个数组的内容
slice
- slice截取数组,得到截取的数组;不改变原始数组,得到新的数组.与String的substring()方法类似
unshift()
- 将一个或多个元素添加到数组的开头，并返回新数组的长度
28.事件修饰符
- .stop：防止事件冒泡
- .prevent：组织默认事件
- .capture：与事件冒泡的方向相反，事件捕获由外到内
- .self：只会触发自己范围内的事件，不包含子元素
- .once：只会触发一次
29.vue里面ref干嘛用
- 使用ref获取页面DOM元素
- 使用 ref获取子组件对象
30.vue里面怎么使用过滤器
vue中的过滤器分为两种：局部过滤器和全局过滤器
过滤器可以用在两个地方：双花括号插值和v-bind表达式
1、 当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！
2、 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右
31.vue动态组件中keepAlive
keep-alive是vue内置的一个组件，作用是能够缓存不活动的组件，我们能够知道，一般情况下，组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不进行销毁，而是保存之前的状态，那么就可以利用keep-alive来实现
