1.什么是MVVM框架？适合什么场景？

MVVM框架是一个Model-View-View模型框架，其中ViewModel连接模型（Model）和视图（View）。

在数据操作较多的场景下，MVVM框架比较适合，通过操作数据来帮助渲染页面。

2. active-class 是哪个组件的属性？

它是 vue-router 模块的 router-link 组件的一个属性。

3、Vue-router如何定义动态路由？

在静态路由名称前添加冒号，例如设置id动态路由参数，设置/:id为路由对象的path属性。

4、如何获取传递过来的动态参数？

在组件中，使用$router对象的params.id，即$route.params.id。

5. vue-router 有哪些类型的导航钩子？

有3种类型。

第一个是全局导航钩子：router.beforeEach(to,from,next)。作用是跳跃前的判断和拦截。

第二种类型是组件内的钩子。

第三种是单独布线专用元件。

6. 什么是V型？它有什么作用？

v-model 是 Vue 中的一条指令。 js可以实现数据的双向绑定。

7.Vue.js中如何将事件绑定到标签？

绑定事件有两种方法。

第一个是通过 v-on 指令。

第二个是通过@语法糖，<input@click=doLog()/>。

8.vuex是什么？如何使用？用在什么功能场景？

vuex 是一个为 Vue 实现的状态管理系统。 js 框架。

为了使用 vuex，必须引入 store 并将其注入到 Vue.js 组件中。可以通过组件内部的 $ostore 访问 store 对象。

使用场景包括：在单页面应用中，用于组件之间的通信，例如音乐播放、登录状态管理、添加购物车等。

10.如何实现自定义指令？它有哪些钩子函数？钩子函数的其他参数是什么？

自定义指令包括以下两种类型。

它具有以下钩子函数。

钩子函数的参数如下。

11. 说出 vue.js 中至少 4 个指令及其用法。

相关说明及其使用方法如下。

12.什么是Vue-router？它有哪些组成部分？

它是 Vue.js 的路由插件。组件包括 router-link 和 router-view。

13.什么是导航钩子？它们有什么参数？

导航钩子又称为导航卫士，分为全局钩子、个别路由独占钩子和组件级钩子。

全局钩子包括 beforeEach、beforeResolve（Vue2.5.0 中新增）和 afterEach。

单个路由独占钩子有 beforeEnter。

组件级钩子包括 beforeRouteEnter、beforeRouteUpdate（Vue2.2 中新增）和 beforeRouteLeave。

它们具有以下参数。

14、Vue.js中双向数据绑定的原理是什么？

Vue.js 使用 ES5 提供的属性特征函数，结合发布者-订阅者模型，通过 Object.defineProperty() 为每个属性定义 get 和 set 特征方法。当数据发生变化时，向订阅者发布消息并触发相应的监控。打回来。

具体步骤如下。

（1）递归遍历需要观察的数据对象，包括子属性对象的属性，并设置set和get属性方法。当给该对象赋值时，会触发绑定的设置属性方法，因此可以监听数据变化。

（2）使用compile解析模板指令，将模板中的变量替换为数据。然后初始化渲染页面视图，将更新函数绑定到每条指令对应的节点上，并添加监控数据的订阅者。一旦数据发生变化，您将收到通知并更新视图。

(3)Watcher订阅者是Observer和Compile之间的沟通桥梁。它们的主要功能如下。

(4)MVVM是数据绑定的入口。它集成了观察者、编译和观察者。它使用Observer来监听自身模型数据的变化，使用Compile来解析和编译模板指令，最后使用Watcher搭建Observer和Compile之间的桥梁。通信桥实现数据变化通知视图更新的效果。使用视图交互来更改和更新数据模型更改的双向绑定效果。

15.请详细解释一下你对Vue.js生命周期的理解。

总共分为8个阶段，分别是beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroyed、destroyed。

使用组件的keep-alive功能时，添加以下两个周期。

Vue 2.5.0 版本添加了一个新的循环钩子：ErrorCaptured，当捕获来自后代组件的错误时调用该钩子。

16.请描述一下Vue组件的封装过程。

组件可以提高整个项目的开发效率，可以将页面抽象成多个相对独立的模块，解决传统项目开发中效率低、维护困难、复用性差的问题。

使用 Vue.extend 方法创建组件，并使用 Vue.component 方法注册组件。子组件需要数据并且可以在 props 中接收数据。子组件修改数据后，如果想将数据传递给父组件，可以使用emit方法。

17.你是怎么知道vuex的？

Vuex可以理解为一种开发模型或者框架。它是 Vue 数据层的扩展。 js 框架。驱动程序组件的更改通过状态（数据源）进行集中管理。应用程序的状态集中在商店中。改变状态的方式是提交突变，这是一个同步事务。异步逻辑应该封装在动作中。

18.什么是Vue-loader？它有什么用途？

它是一个解析 .vue 文件的加载器，可以将 template/js/style 转换为 JavaScript 模块。

目的是使用vue-loader，JavaScript可以编写EMAScript 6语法，样式可以应用scss或less，模板可以添加jade语法等。

19、请告诉我vue.cli项目的src目录下各个文件夹和文件的用途。

asset文件夹存放静态资源；组件存储组件； router定义了路由相关的配置；视图是视图； app.vue是应用程序主要组件； main.js是入口文件。

20.如何在Vue.cli中使用自定义组件？您在使用过程中遇到过哪些问题？

具体步骤如下。

(1) 在components目录下新建一个组件文件。该脚本必须导出公开的接口。

(2)导入需要使用的页面（组件）。

（3）将导入的组件注入到uejs子组件的components属性中。

(4) 在模板视图中使用自定义组件。

21.谈谈你对vue.js模板编译的理解。

简而言之，首先转换为AST（Abstract Syntax Tree），即将源码语法结构抽象为树表示，然后通过render函数渲染并返回到VNode（Vue.js的虚拟DOM节点） ）。

详细步骤如下。

(1)通过compile编译器将模板编译成AST。 compile 是create Compiler 的返回值。 createCompiler 用于创建编译器。另外，compile还负责合并选项。

（2）AST会通过generate（将AST转换为render函数字符串的过程）得到render函数。 render的返回值是VNode。 VNode是Vue.Js的虚拟DOM节点，包含标签名称子节点、文本等。

22.我们来谈谈Vue.js中的MVVM模式。

MVVM 模式是模型-视图-视图模型模式。

Vue.js 由数据驱动。 Vue.js 实例化对象来绑定 DOM 和数据。一旦绑定，数据与数据就会同步。每当数据发生变化时，DOM 也会发生变化。

ViewModel是Vue.js的核心，它是Vue.js的一个实例。 Vue.js 将实例化一个 HTML 元素。该 HTML 元素可以是主体，也可以是 CSS 选择器指向的元素。

DOM 监听器和数据绑定是实现双向绑定的关键。 DOM 监听器监听页面所有视图层中的 DOM 元素。当发生变化时，Model层的数据也会随之变化。 Data Bindings将监控Model层的数据。当数据发生变化时，View层的DOM元素也会发生变化。

23. v-show指令和v-if指令有什么区别？

v-show 和 v-if 都是条件渲染指令。不同的是，无论 v-show 的值为 true 还是 false，该元素都会存在于 HTML 页面中；只有当 v-if 的值为 true 时，该元素才会存在于 HTML 页面中。 v-show指令是通过修改元素的style属性值来实现的。

24.如何让CSS只在当前组件中起作用？

每个 Vue.js 组件都可以定义自己的 CSS 和 JavaScript 代码。如果希望组件中写的CSS只影响当前组件，只需要在Style标签中添加Scoped属性即可。

25.如何创建vue.js组件？

在 vue.js 中，组件必须先注册才能使用。具体代码如下

<！--应用程序-->



<！--模板-->

26、如何实现路由嵌套？如何跳转到某个页面？

路由嵌套会将其他组件渲染到组件中，而不是让整个页面跳转到router-view定义组件渲染的位置。要跳转到某个页面，必须将该页面渲染到根组件中，可以进行如下配置。

new Vue({
el：'#icketang',
 router:router,
 template：''
})

首先实例化根组件，并在根组件中定义组件渲染容器。然后挂载路由，当路由切换时，整个页面都会切换。

27. ref属性的作用是什么？

有时，为了直接访问组件内部的某些元素，可以定义该属性。这时在组件内部通过this就可以更快的访问到设置了ref属性的元素。 $refs 属性。这是原生 DOM 元素，需要使用原生 DOM API 来操作它们，例如下面的代码。

< span ref="msg">有课前端网
< span ref=" otherMsg">专业前端技术学习网校

app. $refs.msg.text Content
app. $refs.otherMsg. textContent
// 注意：在Ve2.0中，ref属性替代了1.0版本中v-el指令的功能。

28.什么是Vue.js？ js？

Vue.js 是一个用于构建用户界面的渐进式框架。与其他重量级框架不同，Vue.js 采用自下而上的增量开发设计。 Vue.js的核心库只关注视图层开yunapp体育官网入口下载手机版，易于学习并与其他库或现有项目集成。此外，Vue.js 完全能够驱动使用 Vue.js 生态系统支持的单文件组件和库开发的复杂单页应用程序。

Vue.js 的目标是通过尽可能简单的 API 实现响应式数据绑定组件开发。

29.描述vue.js的一些特性。

Vue.js 具有以下属性。

(1)MVVM模式。

当数据模型（Model）发生变化时，视图（View）检测到变化并同步变化；当视图（View）发生变化时，数据模型（Model）检测到变化，也同步变化。

使用 MVVM 模式有几个好处。

(2) 组件开发

(3)指挥系统

(4)Vue2.0开始支持虚拟DOM。

但在Vue1.0中，操作的是真实的DOM元素，而不是虚拟的DOM。虚拟DOM可以提高页面的渲染性能。

30.描述vue.js的特点。

Vue.js 具有以下特点。

31.vue.js中如何绑定事件？

通过使用语法 v-on 后跟事件名称=“事件回调函数（）”来绑定事件。事件回调函数的参数set()是可选的。如果有参数set()，需要主动传递事件回调函数的参数，使用事件对象时必须传递$event。当然，此时也可以传递一些其他的自定义数据。如果没有参数集合，则事件回调函数有一个默认参数，即事件对象。事件回调函数必须定义在组件的methods属性中开yun体育app官方下载入口，其作用域是Vue.js实例化的对象。因此，在方法中，你可以通过this使用Vue.js中的数据和方法，也可以通过@语法糖快速绑定事件。 ，如@event name="事件回调函数()"。

32.请解释各部件的功能。

包装动态组件时，会缓存非活动组件实例而不是销毁它们。

<keep-alive> 是一个抽象组件，它本身不会渲染 DOM 元素，也不会出现在父组件链中。

当切换内部组件时，会执行其激活和停用的两个生命周期子功能。

33.axios是什么？如何使用？

axios是vue2.0中用来替代vue-resource.js插件的模块。它是一个请求后台的模块。

使用 npm install axios 安装 axios。基于 EMAScript 6 的 EMAScript Module 规范，通过 import 关键字导入 axios，并添加到 Vue 的原型中。 js 类。这样，每个组件（包括vue.js实例化的对象）都会继承这个方法对象。它定义了get、post等方法，可以发送get或post请求。 then方法中回调函数注册成功后，通过箭头函数的作用域特性，可以直接访问组件实例化对象并存储返回的数据。

import Vue from ' vue' 
import axios from 'axios'；
Vue.prototype.$http=axios；
 new Vue ({
el：' ickt',
data：{
msg：' '
}，
template：'
 { { msg } }
'，
created:function() {
this.$http.get( 'data.json' )
.then（res => {
this. msg= res .data. data
})
}
})

34、axios中，调用axios.post('api/user')时会执行哪些操作？

当调用post方法时，意味着发送一个post异步请求。

35.什么是sass？在vue中如何安装和使用？

Sass 是一种 CSS 预编译语言。安装和使用步骤如下。

（1）使用npm安装加载器（sass-loader、css-loader等加载器）。

（2）在webpack.config.js中配置sass加载器。

模块

module：{
//加载程序
loaders:[
//加载scss 
{
test:/ \ .scss$ /, 
loader : 'vue-style-loader！css-loader！sass-loader '
        }
      ]
}

(3) 在组件的style标签中添加lang属性，如lang="scss"。

36.Vue.js中如何循环插入图片？

插入“src”属性将导致 404 请求错误。应改用 v-bind:src 格式。

代码如下：

注意：vue1.0中支持属性插值。在2.0版本中，仅允许通过v-bind指令或冒号语法糖“：”来动态绑定属性。

37、如何自定义marquee元素的绑定数据值？

对于单选按钮框，值通常是静态字符串。如果绑定到 v-model 的数据等于某个值，则选择该单选按钮框。

<1abe1>选择你喜欢的运动
<！--数据双向绑定-->
篮球
足球
网球

对于多选框，v-model绑定变量的值通常是一个布尔值，true表示选中，false表示未选中。如果要自定义绑定数据的值，需要使用v-bind指令设置true-value（选中时的值）和false-value（未选中时的值）。

<1abe1>选择你的兴趣爱好
足球
篮球

38、什么情况下会生成fragment实例？

当模板包含多个顶级元素时，会生成一个fragment实例；模板仅包含普通文本；模板仅包含其他组件（其他组件可能是片段实例）；模板只包含一个元素指令，例如 vue-router 的 <router -view> 模板根节点有一个流控制指令，例如 v-if 或 v-for。

在这些情况下，对于具有未知数量的顶级元素的实例，模板会将其 DOM 内容视为片段。片段实例仍将正确呈现内容。然而，模板没有根节点，它的 $el 指向一个锚节点，该锚节点是一个空文本节点（开发模式下的注释节点）。

注意：在Vue2.0中，一个组件的模板只允许有一个且只能有一个根节点。

39、实现多种方法，根据不同的条件显示不同的文本。

条件选择可以通过“v-if、v-else”指令来实现。但如果有多个连续的条件选择，则需要使用计算属性。例如开yun体育官网入口登录app，当输入框中没有输入内容时，会显示字符串“请输入内容”。否则，显示输入框中的内容。代码如下。

  {  { showValue } }

var app = new Vue ( {
 e1："#app'， 
data：{
inputvalue：'  '
computed: {
 showValue:function ( ) {
return this. inputvalue | | '请输入内容'
       }
}
})

40.什么是数据丢失？

如果初始化时没有定义数据，则后续更新的数据无法触发页面渲染更新。这部分数据是丢失数据（因为没有设置特征）。这种现象称为数据丢失。

41.如何检测数据变化？

由于JavaScript特性的限制，Vue.js无法检测到以下数组的变化，即以下数组中变化的数据“丢失”了。

通过直接索引设置元素，如app.arr[0]=...

修改数据长度，如app.长度。

为了解决这个问题，Vue.js 扩展了观察数组并为其添加了 $set() 方法。通过该方法修改的数组可以触发视图更新并检测数据变化。

app.$set(app. arr, 5， 500);

42.如何检测对象变化？

由于 JavaScript 功能的限制，Vue.js 无法检测对象属性的添加或删除。由于 Vue.js 在初始化时会将属性转换为 getter/setter，因此必须在数据对象中定义属性，以便 Vue.js 在初始化时对其进行转换并使其响应，例如以下代码

var data ={
     obj:{
         a:1
    }
}
var app= new Vue ({
el：'#app ',
data:data 
})
app.obj.a=10
// 'app.obj.a'和'data.obj.a'现在是响应的
app. obj. b=2
//'app.obj.b'不是响应的
data.obj.b=2
//data.obj.b'不是响应的

如果您需要在创建实例后添加属性并使其具有响应性，可以使用 $set 实例方法。

app.$set（app.obj，'b'，500）
// 'app.obj.b'和'data.obj.b'现在是响应的

对于普通数据对象，可以使用全局方法Vue.set(object, key, value)。

Vue.set（data.obj，"b'，500）
//'app.obj.b'和'cata,obj.b'现在是响应的

43.我们来说说Vue.js页面闪烁{{message}}。

Vue.js 提供了一个 v-cloak 指令，该指令保留在元素上，直到编译关联的实例为止。当与 CSS 一起使用时，该指令会隐藏未编译的标签，直到实例被编译为止。用法如下。

[v-cloak ]{
 display:none;
}
 { { title } }

所以

编译完成后才会显示。

44、如何在v-for循环中实现v-model数据的双向绑定？

有时需要在循环中创建输入并使用v-model来实现数据的双向绑定。这时可以将selected[$index]数组的一个成员绑定到v-model上，这样就可以将不同的v-model绑定到不同的输入上，分别进行操作。

 { { arr [index ] } } 

45、如何解决数据层次太深的问题？

开发业务时，经常会出现异步数据获取的情况，而且有时数据层次比较深，比如下面的代码。

您可以使用 vm.$set 手动定义一层数据。

vm.$set("演示",abcd)

46.如何解决Vue.js文件中样式覆盖不生效的问题？

根据Vue.js官方的说法，style加scoped可以使样式“私有”（即只对当前Vue.js文件（组件）中的代码有效，不会应用到该代码中）在其他文件（组件）影响）

很多时候，当我们引入第三方UI时，Vue.js中的样式会被覆盖。 js文件不生效。大多数问题是由样式范围引起的。

解决方案是将需要覆盖的部分代码放到一个单独的CSS文件中，最后在main.js文件中导入。

47、Vue.js开发环境调用接口时如何避免跨域？

在项目目录config/index.js中配置proxyTable项如下。

proxyTable:{
    '/api '：{
        target:http://xxxxxx.com 
        changeOrigin:true,
        pathRewrite:{
            '^/api'：' '
        }
    }
}