Vue面试题1

序号	问题	答案
1	路由导航守卫都有哪些钩子函数？说明在什么场景下会触发这些钩子函数。	全局守卫  router.beforeEach：全局前置守卫，进入路由之前  router.afterEach：全局后置钩子，进入路由之后  路由组件内的守卫  beforeRouteEnter()：进入路由前  beforeRouteUpdate()：路由复用同一个组件时  beforeRouteLeave()：离开当前路由时  独享守卫  beforeEnter:进入路由之前
2	组件中is可以作什么？	1. 解决标签固定搭配问题 2. 实现动态组件
3	v-model是什么？怎么使用？ vue中标签怎么绑定事件？	可以实现表单元素的双向绑定，指令（v-class、v-for、v-if、v-show、v-on）。vue的model层的data属性。绑定事件：<input @click=doLog() />
4	Vue中那些方式可以实现页面之间传参，且如何获取到值	1、search传参 <router-link to="/地址?属性名=属性值"></router-link> this.$route.query.属性名  2、动态路由 path:"/地址/变量名" <router-link to="/地址/数据值"></router-link> this.$route.params.变量名  3、本地存储 setItem() getItem()
5	mutations和actions的区别	mutations是同步的，直接修改state,仓库通过commit调用； actions可以处理异步，不能修改state,仓库通过dispatch调用
6	vue中组件之间如何通信？	父传子，父组件通过自定义属性传值，子组件通过props接收； 子传父，通过触发自定义事件 非父子，可以通过EventBus vuex 本地存储
7	vuex和本地存储有什么区别	1. vuex数据刷新就没有了，本地存储还在  2. vuex中的数据可以实时渲染，本地存储不行
8	vuex有哪些模块，并说明它们的作用？	1. state：vuex的基本数据，用来存储变量  2. getter：从基本数据(state)派生的数据，相当于state的计算属性  3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。 回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。  4. action：和mutation的功能大致相同，不同之处在于         1) Action 提交的是 mutation，而不是直接变更状态。          2)Action 可以包含任意异步操作。  5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
9	如何通过路由守卫实现拦截用户没有登录？	router.beforeEach((to,from,next)=>{          if(to.path==="/login"){ next() return; }          if(store.state.user){ next();}          return; } next("/login") })
10	如何实现路由懒加载	const Index = () => import('../components/index')
11	$route和$router的区别	$route路由信息 $router用来做路由跳转
12	Vue的路由实现：hash模式 和 history模式的区别	区别：          hash模式：          1.采用的是window.onhashchange事件实现。          2.可以实现前进 后退 刷新。          3.比如这个URL：http://www.abc.com/#/hello, hash 的值为#/hello。          它的特点在于：hash 虽然出现URL中，但不会被包含在HTTP请求中， 对后端完全没有影响，因此改变hash不会重新加载页面          history模式：          1.采用的是利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。          2.可以前进、后退，但是刷新有可能会出现404的报错          3.前端的url必须和实际向后端发起请求的url 一致，如http://www.abc.com/book/id 。 如果后端缺少对/book/id 的路由处理，将返回404错误。
13	怎么定义vue-router的动态路由？怎么获取传过来的动态参数	path:"/foodId/:id"  获取：this.$route.params.id
14	请写出vue-router中的组件，并说明它们的作用	router-link router-view router-link是路由导航组件，会生成a标签，需要设置to属性； router-view是路由出口，会根据浏览器地址进行匹配路由规则，并将匹配到的路由规则对应的组件展示在router-view处
15	vue中数组发生改变了，但是页面没有渲染，怎么办	arr.splice() Vue.set() vm.$set()
16	组件中的data为什么不是一个对象而是一个函数	组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。
17	vue中第一次页面加载会触发哪几个生命周期钩子函数	会触发下面这几个beforeCreate, created, beforeMount, mounted
18	vue.js的两个核心是什么	数据驱动、组件系统
19	vue中 key 值的作用	在v-for时使用，标识组件的唯一性，更好的区分组件，高效的更新虚拟DOM
20	v-show和v-if的区别？分别说明其使用场景	v-show 和v-if都是true的时候显示，false的时候隐藏 但是：false的情况下，v-show是采用的display:none;,v-if采用惰性加载。 如果需要频繁切换显示隐藏需要使用v-show
21	Vue中常用的修饰符有哪些？并简要说明它们的作用	Stop：阻止冒泡； prevent：阻止默认事件； once：只执行一次； capture：将事件流设为捕获方式； self：直对自身触发事件； enter：回车键； Up:上； down：下； left:左； right：右；
22	过滤器的作用是什么？ 如何注册过滤器？ 如何使用过滤器	作用: 对数据进行一些加工处理，比如 数字保留几位小数  // 全局注册 // console.log(Vue.filter); // 定义：Vue.filter('过滤器名',过滤器函数)  // 过滤器函数一定要有返回值 /* Vue.filter('过滤器名',functon(变量值,传入的参数){ // 过滤处理 return 处理后的结果 }) */ // 局部注册： /* new Vue({ el:"" ..., filters:{ 过滤器名:function(变量值，传入的参数=参数默认值){ // 过滤处理 return 处理后的结果 } } }) */  // 使用： {{ 变量 | 过滤器名 }}
23	Vue实例有哪些常见的配置选项，分别用来干嘛	el 挂载的节点 data 数据 methods 事件方法 computed 计算属性 watch 监听器 components 局部组件 filters 过滤器 directives 自定义指令 生命周期钩子函数
24	vue中数组发生改变了，但是页面没有渲染，怎么办	arr.splice() Vue.set() vm.$set()
25	组件中的data为什么不是一个对象而是一个函数?	组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。
26	vue中第一次页面加载会触发哪几个生命周期钩子函数	会触发下面这几个beforeCreate, created, beforeMount, mounted
27	vue中watch和methods的区别有哪些	watch .是观察的动作，自动执行 methods 是方法，主动调用
28	vue在什么场景下可以给任何元素和组件添加进入/离开的过渡效果	条件渲染 (使用 v-if)； 条件展示 (使用 v-show)； 动态组件； 组件根节点
29	vue中组件的作用是什么？如何定义和使用组件	组件是可复用的 Vue 实例, 如果网页中的某一个部分需要在多个场景中使用，那么我们可以将其抽出为一个组件进行复用。组件大大提高了代码的复用率。 定义组件有两种方式： (1)全局方式 直接使用Vue.component()创建的组件，所有的Vue实例都可以使用。 (2)局部方式 三部曲1.创建这个组件；2.注册这个组件；3.使用这个组件；
30	什么是vue的计算属性	在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。         好处：         ①使得数据处理结构清晰；         ②依赖于数据，数据更新，处理结果自动更新；         ③计算属性内部this指向vm实例；         ④在template调用时，直接写计算属性名即可；         ⑤常用的是getter方法，获取数据，也可以使用set方法改变数据；         ⑥相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。
31	简要说明你对MVVM的理解	MVVM 是 Model-View-ViewModel 的缩写。 Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。 View 代表UI 组件，它负责将数据模型转化成UI 展现出来。 ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
32	请列出至少4个vue基本指令，并简要说明其作用	1.v-model 多用于表单元素实现双向数据绑定（同angular中的ng-model） 2.v-for 格式： v-for="字段名 in(of) 数组json" 循环数组或json(同angular中的ng-repeat),需要注意从vue2开始取消了$index 3.v-show 显示内容 （同angular中的ng-show） 4.v-hide 隐藏内容（同angular中的ng-hide） 5.v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false） 6.v-else-if 必须和v-if连用 7.v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误 8.v-bind 动态绑定 作用： 及时对页面的数据进行更改 9.v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面 v-text 解析文本 v-html 解析html标签 10.v-bind:class 三种绑定方法 1、对象型 '{red:isred}' 2、三元型 'isred?"red":"blue"'
33	父子组件、兄弟组件之间的数据传递	创建一个新的vue实例 var trans = new Vue() 在组件一中：trans.$on(‘事件’，（n）=>{console.log(n) }) 在组件二中：trans.$emit(‘事件’，’发送的数据’)（写在2的事件中）
34	子组件向父组件通信	在子组件中写一个事件，事件中使用this.$emit(‘自定义事件名’，’数据’)；在父级中的子标签上使用@自定义事件 = ‘父级事件’来接收
35	父组件向子组件通信	在子组件的标签上定义一个变量，：变量=‘传的值’，在子级中使用props接收变量
36	vue中 key 值的作用	在v-for时使用，标识组件的唯一性，更好的区分组件，高效的更新虚拟DOM
37	Watch和computed的区别	Watch只能监听data中的数据变化，computed不需要，watch可以进行异步操作，computed不可以，computed不修改原始数据，通过return返回处理的数据，可以包含大量的逻辑运算
38	对于Vue是一套渐进式框架的理解	渐进式代表的含义是：主张最少。 Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。
39	如何解决axios中post提交参数不解析的问题	关于post提交参数的问题 问题描述： post提交参数需要提交的数据形式需要为一个字符串 形如： a=b&c=d。我们平时开发习惯于传入对象，所以需要将对象进行处理。 切记：不可以直接提交对象 如何处理？ - 方法1： 通过for in 将对象转化为 字符串 - 方法2： URLSearchParams - 方法3： qs库
40	axios的基础方法有哪些	axios.get(请求地址，配置对象).then(res=>{ res就是相应的数据 }) axios.post(请求地址，请求数据，配置对象).then(res=>{ ... }) axios.create(配置对象) axios.all([请求1，请求2]).then(res=>{ res是一个数组。 数组的值就是每个请求返回的数据信息 }) axios({ 配置信息 })
41	vuex的核心概念有哪些，分别表示什么含义	state 共享的数据，类似于data getters 对state的数据进行处理， 类似computed mutations 对state数据进行修改 actions 触发mutations 对数据进行修改 module 分模块管理数据
42	路由同组件跳转，组件将不会更新，如何解决这个问题	- 方法1： 利用watch监听$route的变化 - 方法2： 利用路由局部钩子 beforeRouteUpdate 只要路由更新就调用
43	Vue中那些方式可以实现页面之间传参，且如何获取到值	1、search传参 <router-link to="/地址?属性名=属性值"></router-link> this.$route.query.属性名 2、动态路由 path:"/地址/变量名" <router-link to="/地址/数据值"></router-link> this.$route.params.变量名 3、本地存储 setItem() getItem()
44	vue-router 基本使用步骤	第1步：引入vue.js 再引入vue-router.js、 vue-router需要引入在vue之后 <script src="vue.js"></script> <script src="vue-router.js"></script> 第2步：设置路由组件 let 组件配置变量 ={ template:"#模板id", data(){ return{} } ... } 第3步：建立映射关系 let routes = [ { path:"/地址", component:组件配置变量 }, { path:"/地址/:id", // 动态路由 component:组件配置变量 }, { path:"/地址", components:{ default:组件配置变量 // <router-view name="default"/> 视图的名称:组件配置变量 // <router-view name="视图名称"/> } }, { path:"/地址", // 访问地址的时候回去访问地址2 component:组件配置变量, redirect:"/地址2"  }, { path:"/地址",  component:组件配置变量A, children:[ { path:"地址2",  // 访问 /地址/地址2  //就渲染 组件配置变量 会渲染在组件配置变量A模板里面router-view里面 component:组件配置变量 } ] } ] 第4步：实例化路由对象 let router = new VueRouter({ // routes:routes // routes 简写 routes， linkActiveClass:"active", mode:"hash/history" }) 第5步：挂载到Vue实例 new Vue({ el:"", data:{}, // router:router // 简写 router }) 第6步：书写router-view <div id="app"> <router-view/> </div> 第7步：使用router-link 进行跳转 <router-link to="/地址"> // 酌情给分
45	请说明在Vue中组件之间如何进行数据传递	1.父子组件 在子组件的标签上定义一个变量，：变量=‘传的值’，在子级中使用props接收变量 2.子父组件 在子组件中写一个事件，事件中使用this.$emit(‘自定义事件名’，’数据’)；在父级中的子标签上使用@自定义事件 = ‘父级事件’来接收 3.兄弟组件 创建一个新的vue实例 var trans = new Vue() 在组件一中：trans.$on(‘事件’，（n）=>{console.log(n) }) 在组件二中：trans.$emit(‘事件’，’发送的数据’)（写在2的事件中）
46	Vue中路由导航钩子函数都有哪些？简要说明它们的参数及作用。	全局导航钩子：router.beforeEach((to,from,next)=>{})//跳转前进行判断拦截 Router.afterEach((to,from,next)=>{}) 路由内导航：beforeEnter() 组件内导航：beforeRouteEnter(); beforeRouteUpdate(); beforeRouteLeave() To：目标位置；from：当前导航正要离开的路由；next():必须调用，向下执行
47	在Vue中使用axios时如何解决跨域问题	在config文件夹中的index.js中的Dev中填写 ProxyTable：{ ‘/api’:{ Target：’代理服务器的目标地址’， changeOrigin: true, PathRewrite: {“^/api”:” ”} } }
48	Vue中如何同时获取事件传入的参数和事件对象	<button @click="show(11,$events)"></button> methods:{ show(x,ev){ // x就是参数 // ev就是事件对象 } }
49	如何实现动态组件， 且实现组件的缓存	<keep-alive>         <component is="组件名"></component> </keep-alive>
50	简单运用一下作用域插槽
51	过滤器的作用是什么？ 如何注册过滤器？ 如何使用过滤器	作用: 对数据进行一些加工处理，比如 数字保留几位小数  // 全局注册 // console.log(Vue.filter); // 定义：Vue.filter('过滤器名',过滤器函数)  // 过滤器函数一定要有返回值 /* Vue.filter('过滤器名',functon(变量值,传入的参数){ // 过滤处理 return 处理后的结果 }) */ // 局部注册： /* new Vue({ el:"" ..., filters:{ 过滤器名:function(变量值，传入的参数=参数默认值){ // 过滤处理 return 处理后的结果 } } }) */  // 使用： {{ 变量 | 过滤器名 }} // 使用： {{ 变量 | 过滤器名(参数1，参数2) }} // 使用： {{ 变量 | 过滤器名1 | 过滤器名2 | 过滤器名3 |... }}
52	Vue如何注册自定义指令？ 其中常用钩子有哪些？做什么	全局注册： Vue.directive('指令名',{ bind(el,binding){}, inserted(el,binding){ } ... }) 局部注册： directivs:{ '指令名':{ bind(el,binding){}, inserted(el,binding){ } ... } } el 就是使用的指令的节点，binding.value 就是指令绑定的值。 我们一般用来拓展对dom的操作，比如已进入页面让input获取焦点，input失去焦点进行数据校验
53	Vue表单的核心指令是什么？ 表单修饰符有哪些？ 需要注意什么？	核心指令： v-model 修饰符： .numer .lazy .trim 注意： 单选功能的时候， 每个input都要有 value值； 多选功能的时候，绑定的是一个数组，每个input也必须要有value值
54	Vue如何注册一个组件，需要有哪些注意点	全局注册 Vue.component('组件名',{配置对象}) 局部注册： components:{ 组件名:{ 配置对象 } } 注意点： 组件名注意驼峰命名小坑，不要取html有的标签名； data是一个函数，且必须返回一个对象 template 模板 只可以有一个根标签，且 可以简化，通过 选择器绑定body里面的template模板
55	Vue实例有哪些常见的配置选项，分别用来干嘛	el 挂载的节点 data 数据 methods 事件方法 computed 计算属性 watch 监听器 components 局部组件 filters 过滤器 directives 自定义指令 生命周期钩子函数
56	ElementUI是什么？如何应用到vue项目中	Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。 安装：npm install element-ui --save 引入： import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI) new Vue({ el: '#app', router, render:h=>h(App) })
57	ElementUI的表单组件怎么使用？它有哪些属性	先写el-form组件，里面写el-form-item用来放输入框，例如用户名和密码那些。 属性： 一、el-from属性有ref、rules、绑定:model 二、el-form-item属性有prop用来定义一个该输入框对应的验证规则
58	ElementUI的表格组件怎么使用？它有哪些属性	用一个<el-table>< /el-table>这个是最外面的上面，里面用<el-table-row></el-table-row>。 属性： 一、el-table组件的data是用来获取数据；         二、每一行el-table-row的数据通过prop属性。
59	写出vue中is的使用场景	改变html标签的默认规则，比如ul里放li，dl里放dt等， 动态切换组件：<component v-bind:is="currentView"></component> 特殊嵌套： <table> <tr is="my-row"></tr> </table>
60	谈谈你对生命周期的理解。以及每个阶段都是什么	Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程， 称之为 Vue 的生命周期。生命周期有：beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed
61	组件中的data为什么不是一个对象而是一个函数	组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。
62	vue中第一次页面加载会触发哪几个生命周期钩子函数	会触发下面这几个beforeCreate, created, beforeMount, mounted
63	请写出深度侦听的使用方法	watch:{ myObj:{ handler(newValue, oldValue) { 　　　　　　//执行操作 　　　　}, 　　　　deep: true }
64	vue的优点是什么	低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。 可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。
65	mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？	mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。 区别：vue数据驱动，通过数据来显示视图层而不是节点操作。 场景：数据操作比较多的场景，更加便捷
66	vue中在进入/离开的过渡中，有哪几个类名	v-enter：定义进入过渡的开始状态； v-enter-active：定义进入过渡生效时的状态； v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态； v-leave: 定义离开过渡的开始状态。 v-leave-active：定义离开过渡生效时的状态； v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态
67	vue在什么场景下可以给任何元素和组件添加进入/离开的过渡效果	条件渲染 (使用 v-if)； 条件展示 (使用 v-show)； 动态组件； 组件根节点
68	列出vue中与表单元素相关的修饰符，并简要说明其作用	(1).lazy 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。 使用 lazy 修饰符，从而转变为使用 change 事件进行同步 (2).number 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符。 (3).trim 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符。
69	简要说明在vue中v-model指令的作用	v-model指令用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定的。根据控件类型v-model自动选取正确的方法更新元素 。它负责监听用户的输入事件以更新数据。
70	vue中动态样式绑定(class)的方式都有哪些	对象方法： :class="{ 'active': isActive }" :class="{'active':isActive==-1}" 或者 :class="{'active':isActive==index}" 绑定并判断多个 :class="{ 'active': isActive, 'sort': isSort }" 第二种（放在data里面） :class="classObject" data() { return { classObject:{ active: true, sort:false } } } 数组方法 :class="[isActive,isSort]" data() { return{ isActive:'active', isSort:'sort' } } :class="[isActive?'active':'']" :class="[isActive==1?'active':'']"
71	说明vue等单页面应用及其优缺点	优点：Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。 缺点：不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。
72	如何让css只在当前组件起作用	在当前组件style标签中添加 scoped
73	vuex是什么？怎么使用？哪种功能场景使用它？	是状态管理，在main.js引入store，注入。只用来读取的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。 场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车
74	请列出使用axios时，get和post提交数据的方式	1,get可以直接把数据以?加&符号的方式直接拼接到url地址上  2.axios.get(url,data)、axios({method:'get',url:请求地址,params:{提交的数据}})  3.axios.post(url,data)、axios({method:'post',url:'请求地址'},data:{提交的数据})
75	axios是什么？怎么使用	请求后台资源的模块 使用npm install axios -s 来安装 在main.js入口文件中引用：import axios from {axios} 将axios挂载到vue实例上：vue.prototype.$axios = axios 在config文件夹中的index.js中的Dev中填写 ProxyTable：{ ‘/api’:{ Target：’代理服务器的目标地址’， changeOrigin: true, PathRewrite: {“^/api”:” ”} } } 在需要调用后台资源的组件中进行使用this.$axios({ Url: ‘/api/地址’, Method:’post’,//post请求必须设置 Params:{要传的参数}//post要将params设置为data }).then(res=>{}).catch(err=>{})
76	请说出vue.cli项目中src目录每个文件夹和文件的用法	Assets: 里面存放静态文件，比如css,js,image图片等 Components：存放组件 Router：用来存放路由文件，里面包含一个inde.js路由文件 App.vue:为主组件页面，用来显示其他的组件 Main.js:为入口文件，用来引入所需的模块
77	vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗	一、在components（专门放组件的文件）下创建一个vue文件 二、在需要使用自定义组件的地方的script标签内引入自定义组件 import 组件标签名from '@/components/组件名称' 在component中添加组件标签名 三、在template中使用组件标签名<组件标签名></组件标签名> 问题：组件名不可以重复，template只能存在一个根标签，组件名必须和引用的标签名相同
78	vue-router有哪几种导航钩子，分别说明它们的作用	一、全局导航钩子：router.beforeEach((to,from,next)=>{})//跳转前进行判断拦截 Router.afterEach((to,from,next)=>{}) 二、路由内导航：beforeEnter() 三、组件内导航：beforeRouteEnter(); beforeRouteUpdate(); beforeRouteLeave()
79	vue-router是什么？它有哪些组件	是一个路由插件，有router-link、router-view组件
80	说一下Vue 的双向绑定数据的原理	采用数据劫持结合发布者-订阅者模式的方式Object.defineProperty（），通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。
81	非父子组件、兄弟组件之间的数据传递	创建一个新的vue实例 var trans = new Vue() 在组件一中：trans.$on(‘事件’，（n）=>{console.log(n) }) 在组件二中：trans.$emit(‘事件’，’发送的数据’)（写在2的事件中）