前端入职必备！十大经典Vue面试题及答案 _前端面试题

文章图片
1、什么是Vue.js？Vue js是用于创建动态用户界面的渐进式javascript脚本，Vue js很容易学习。为了与Vue js的工作，你只需要添加一些动态功能的网站。你不需要安装任何东西来使用Vue js，只需要在你的项目中添加Vue js库。
2、列出一些Vue.js的特征Vue.js具有以下特征：

模板
反应性reactivity
组件
转换transition
路由

3、解释Vue实例的生命周期每个Vue实例的生命周期在创建时经历一系列初始化步骤。
-例如，它需要设置数据观察、编译模板和创建必要的数据绑定。
在这个过程中，它还将调用一些生命周期钩子，这给了我们执行定制逻辑的机会。
例如，创建的钩子在实例创建后被调用：

new Vue({ data: { a: 1 }, created: function () { // `this` points to the vm instance console.log('a is: ' + this.a) } }) // => "a is: 1"

还有其他钩子将在实例生命周期的不同阶段调用，例如已编译、已准备和已销毁。
所有的生命周期钩子都被调用，它们的上下文指向调用它的Vue实例。
一些用户可能想知道在Vue.js的世界里“控制器”的概念在哪里，答案是:Vue.js中没有控制器。
组件的自定义逻辑将在这些生命周期钩子中拆分。
生命周期图下图显示了Vue实例的完整生命周期

文章图片
4、如何创建一个Vue.js实例？你可以用Vue函数创建Vue实例：

var vm = new Vue({ // options })

5、解释单向数据流和双向数据绑定之间的区别？在单向数据流中，当数据模型改变时，应用程序的视图(UI)部分不会自动更新。
在Vue js中，v-bind用于单向数据流或绑定。
在双向数据绑定中，应用程序的视图(UI)部分在数据模型改变时自动更新。
在Vue.js中，v-model指令用于双向数据绑定。
6、如何在Vue.js中创建双向绑定？v-model指令用于在Vue js中创建双向绑定。
在双向绑定中，数据或模型被绑定到DOM，而DOM又被绑定回模型。
在下面的示例中，你可以看到如何实现双向绑定。

< div id="app"> {{message}} < input v-model="message"> < /div> < script type="text/javascript"> var message = 'Vue.js is rad'; new Vue({ el: '#app', data: { message } }); < /script>

7、VUE.js中的过滤器是什么？在Vue js中，过滤器用于转换要在浏览器上呈现的输出。
js过滤器本质上是一个函数，它接受一个值，处理它，然后返回处理后的值。
在标记中，它由单个管道(|)表示，并可以后跟一个或多个参数:
< element directive=” expression | filterId [args…]
在Vue 2.0中，没有可用的内置过滤器，但是你可以自由创建自己的过滤器。
8、如何在Vue.js中创建自定义过滤器？filter()方法用于在Vue js中创建和注册一个自定义过滤器。
filter()方法接受两个参数一个是usnique名称的filterId来过滤要创建的内容，另一个是接受一个值作为参数并返回转换后的值的过滤函数。

Vue.filter('reverse', function (value) { return value.split('').reverse().join('') })

9、Vue.js中的组件是什么？如何在其他组件中注册一个组件
Vue组件是Vue js最强大的特性之一。
在Vue中，组件是帮助你扩展基本HTML元素以封装可重用代码的自定义元素。
下面是在其他组件中注册Vue组件的方法

export default { el: '#your-element' components: { 'your-component' } }

10、什么是VUE中的指令？列举一些你用过的？
Vue js中的指令概念比Angular中的要简单得多。
js指令提供了一种用新的属性和标签扩展HTML的方法。
Vue.js有一组内置的指令，为你的应用程序提供扩展功能。
你还可以用Vue.js编写定制指令。
下面是Vue.js中常用的指令列表：

v-show
v-if
v-model
v-else
v-on

11、列出Vue.js中的指令类型在Vue js中，可以使用以下类型的指令
通用指令
文字指令
空指令
自定义指令
12、什么是Vue资源，如何安装Vue资源？VUE-resource是vue.js的一个插件，它提供了发出web请求和使用XMLHttpRequest或JSONP处理响应的服务
你可以通过yarn或NPM安装它。