hi,你好!欢迎访问本站!登录
本站由网站地图腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 教程 - 前端开发 - 正文 君子好学,自强不息!

25道低级Vue.js口试问题_WEB前端开发

2020-09-19前端开发搜奇网54°c
A+ A-

1. 为何Vue被称为“渐进框架”?

运用渐进式框架的价值很小,从而使现有项目(运用其他手艺构建的项目)更轻易采纳并迁移到新框架。 Vue.js 是一个渐进式框架,因为你可以逐步将其引入现有运用,而没必要从头入手下手重写全部程序。

Vue 的最基本和中心的部份触及“视图”层,因而可以经由过程逐步将 Vue 引入程序并替代“视图”完成来入手下手你的路程。

因为其不断发展的性子,Vue 与其他库合营运用异常好,而且异常轻易上手。这与 Angular.js 之类的框架相反,后者请求将现有程序完整重构并在该框架中完成。

2. Vue.js 中的声明式衬着是什么?

Vue.js 使衬着数据变得轻易,并隐蔽了内部完成。比方下面的代码:

HTML

<p id=”app”></p>

JavaScript

const greeting = “Hello there!”;
const appp = document.getElementById(“app”);
appp.innerText = greeting;

上面的代码段将在 ID 为 “app” 的 p 中显现短语 “Hello there!”。代码包含完成结果所需的一切步骤。起首挑选 ID 为 “app” 的 DOM 元素,然后用 innerText 属性手动设置 p 的内容。

如今,让我们看看在 Vue 中是怎样做的。

Template

<p id=”app”>{{ greeting }}</p>

App

new Vue({
    data: {
       greeting: ‘Hello There!’
    },
   el: ‘#app’
});

我们在 Vue 程序中建立了一个名为 “greeting” 的数据属性,然则只须要在 p 顶用 mustache 语法输入 “greeting” 即可,而没必要体贴内部完成。我们声清楚明了 “greeting” 变量,其他的由 Vue 完成。这就是声明式衬着的模样。 Vue 隐蔽并治理内部信息。

3. 你用哪一个指令遍历对象的属性?

要遍历对象或数组,可以运用 v-for 指令。下面是一个例子:

Template

<p id="app">
    <ul>
      <li v-for="(value, key) in card">{{ key }} - {{ value }}</li>    </ul>
 </p>

App

new Vue({
  el: '#app',
  data: {
    card: {
      name: 'John Doe',
      age: 25,
      city: 'New York',
      country: 'US'
    }
  }
});

输出

  • name - John Doe
  • age - 25
  • city - New York
  • country - US

4. 给出模板,形貌 Vue 程序的输出。

模板:

{{title}}

App:

new Vue({ 
    el: '#app', 
    data: { 
        title: 'Vue.js' 
    } 
})

上面的代码将在 p 中输出字符串 <h1 style="color: green;">Vue.js</h1>。之所以将全部标签衬着为字符串,是因为 mustache 模板标签 {{title}}将传入的数据视为字符串,而不将其剖析为可实行代码。这也有助于减缓把恶意代码注入到页面的 XSS 相干的问题 。这类似于在 JavaScript 中运用 elementSelector.innerText = text 语句。

5. 如安在输入框和数据属性之间完成双向数据绑定?

要完成双向数据绑定,可以运用 v-model 指令。 v-model 指令主假如语法糖:

<input type="text" :value="nameInput" @keyup="nameInput = $event.target.value">

在上面的语句中,每当视察到 “keyup” 事宜时,就会将名为 “nameInput” 的数据属性设置为输入框的值。同时,将输入框的 value 属性绑定到 “nameInput” 数据属性。如许在表单字段和数据属性之间建立了双向数据关联。

v-model 可以做到这一点,而且比手动设置更有效地。要运用 v-model 复制上述结果,请再次在统一输入框中输入以下内容:

<input type="text" v-model="nameInput">

须要注重的是,当完成双向数据绑定时,运用的数据属性被以为是事实上的泉源。在 data 属性上所做的任何变动都将优先于 form 字段上的用户输入事宜。

6. 你怎样捕捉元素上的点击事宜?

可以运用 v-on:click 指令捕捉 Click 事宜。该指令也可以用缩写标记 @click 示意。这是一个例子:

v-on:click 标记

<a v-on:click=”clickHandler”>Launch!</a>

@click 标记

<a @click=”clickHandler”>Launch!</a>

7. 什么是动态 prop?

当运用 v-bind 指令为 prop 分派值作为绑定到属性的函数时,被称为动态 prop。比方以下组件的 tweet 属性绑定到名为tweetText的数据属性。这与静态硬编码值相反。这类绑定始终是单向的,这意味着数据可以从父组件流到子组件,而绝不会反过来。

<TweetBox :tweet=”tweetText”>

8. Vue.js 中的指令是什么?

指令是一系列特别属性,你可以经由过程将其添加到模板 HTML 标记中来给予它们特别的相应功用。指令许可模板中的元素运用数据属性、要领、盘算或看管的属性和内联表达式依据定义的逻辑对变动做出回响反映。比方以下代码运用 v-on 指令在组件上完成 click 事宜侦听器。

<SignUpButton v-on:click=”doSignup” />

或许

<SignUpButton @click=”doSignup” />

在这个例子中,我们运用 v-if 指令基于名为 showButton 的数据属性显现或删除元素与组件。指令以 v- 开头来指导 Vue 特定的属性。此划定规矩的破例是 v-on 和 v-bind 的简写情势。

<SignUpButton v-if=”showButton” />

Vue 还许可定义本身的自定义指令。

9. v-show 指令的用处是什么?

v-show 指令许可有前提地显现元素。鄙人面的代码中,仅当 isDisplayed 数据属性为 true 时,才会显现该元素。

 <TweetBox v-show=”isDisplayed”>

运用 v-show 指令时,可运用 CSS 的 display 属性切换元素的可见性。

10. v-show 与 v-if 指令有何差别?

v-show 和 v-if 都用于有前提地显现元素,而后者供应了前提衬着的真正完成。 v-show 只需切换 CSS 的 display 属性即可显现或隐蔽元素,而 v-if 指令可建立或烧毁组件。每次显现状况变动时,价值通常会更大。

另一方面,v-show 本钱较低,因为它仅切换元素的CSS显现属性。所以假如必需常常切换元素,则 v-show 会供应比 v-if 更好,更优化的结果。

就加载元素的初始衬着本钱而言,v-if 不会衬着最初隐蔽的元素的节点,而 v-show 会衬着其 CSS display 属性被设置为 none 的元素。

11. 关于作为元素完成的解释框,我们愿望运用户可以按下键盘上的Enter键,来将内容提交给名为 “storeComment” 的要领。在代码中对此举行演示。

可以在任何元素上运用 v-on 指令来完成事宜侦听器。另外,v-on 还许可我们将按键修饰符用于 “enter”,“tab”,“esc”,“space” 等罕见按键。这是一个例子:

模板

<textarea @keyup.enter="storeComment"></textarea>

App

new Vue({
  el: '#app',
  methods: {
    storeComment(event) {
     //access the value of the textarea box using event.target.value or 
     //              use v-model to bind to a data property
    }
  }
});

12. 如安在单页 Vue 运用(SPA)中完成路由?

可以经由过程官方的 vue-router 库在用 Vue 构建的 SPA 中举行路由。该库供应了周全的功用集,个中包含嵌套线路、线路参数和通配符、过渡、HTML5 汗青与哈希形式和自定义转动行动等功用。 Vue 还支撑某些第三方路由器包。

13. 运用 Vue 时挪用 event.preventDefault() 的最好体式格局是什么?

在事宜侦听器上挪用 event.preventDefault() 的最好体式格局是将 .prevent 修饰符与 v-on 指令一同运用。这是一个例子:

<a @click.prevent=”doSomethingWhenClicked”>Do Something</a>

14. 什么是过滤器?

过滤器是在 Vue 程序中完成自定义文本花样的一种异常简朴的要领。它们就像可以在表达式中经由过程管道通报(运用管道字符)以获得结果的运算符。下面是一个可以反转文本字符串的过滤器示例:

模板

<p id="app">{{ title | reverseText }}</p>
App
new Vue({
    el: '#app',
    data: {
      title: 'This is a title'
    },
    filters: {
      reverseText(text) {
        return text.split('').reverse().join('');
      }
    }
});

输出

eltit a si sihT

在上面的例子中,我们建立了一个名为 reverseText 的过滤器,该过滤器反转文本字符串并返回。这是一个简朴的函数,吸收输入并返回处置惩罚后的输出。经由过程在过滤器下声明,它就可以成为可以在模板中运用的过滤器。

在模板中,我们只是将 reverseText 过滤器经由过程管道通报到了想要在 mustache 标签中显现的数据变量。如许可以将多个过滤器管道衔接在一同。因而过滤器供应了一种异常文雅的体式格局来处置惩罚文本。

15. 怎样动态地在元素上切换 CSS 类?

Vue 许可我们绑定到 class 属性。鄙人面的例子中,我们将 class 属性绑定到一个对象,该对象许可运用 data 属性切换类。

模板

<p :class=”{ pStyle : showp }”></p>

App

new Vue({
    el: '#app',
    data: {
 showp: true
    }
});

在上面的代码中,只需数据属性 showptrue,类名 pStyle 将运用于 p。

16. 绑定 HTML 类时,该怎样衔接类?假定存在一个元素:Process。我们只愿望运用名为 “isActive” 的数据属性动态地切换 btnActive 类。

这可以在绑定类时用 Array 来完成。以下是完成要领:

模板

<Button :class=”[‘btn’, ‘btnRed’, { btnActive : isActive }]”>Process</button>

App

new Vue({
    el: '#app',
    data: {
      isActive: true
    }
});

在上面的代码段中,将串连各个类的数组,并基于 isActive 数据属性的值对对象中的表达式举行相应式评价。

17. 什么是盘算属性?

盘算属性是一类特别函数的结果,当隶属属性发作变化时,这些函数会自动举行盘算。用它们替代内联表达式可以更好地表达庞杂的逻辑,在模板中不能作为内联表达式兼并。

每一个盘算要领都可以在模板部份作为属性运用。当隶属属性变动时,盘算要领将自动盘算并缓存结果,如许比运用一般要领更好。要领在接见时将始终会从新盘算,而假如自上一次盘算和缓存阶段以来该要领内运用的属性未发作变动,则盘算的属性将不会从新盘算。

须要注重的是,仅当要领中运用的属性是相应性的(比方数据属性)时,才斟酌依靠关联的变动。

这是一个演示盘算属性的简朴例子:

模板

<p id="app">
  <input type="text" v-model="email" :class="{ invalid : isInvalid }">
</p>

App

const emailRegEx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@
((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

new Vue({
    el: '#app',
    data: {
      email: ''
    },
    computed: {
      isInvalid() {
        return !emailRegEx.test(this.email);
      }
    }
});

在上面的代码示例中,假如正则表达式测试针对电子邮件输入框失利,则 isValid 盘算属性将返回 true。假如电子邮件考证程序以为输入的值无效,就会看到文本框便为赤色(你必需建立一个名为 .invalid 的类,并将背景色彩属性设置为赤色)。当用户键入内容时,将从新实行盘算的要领,而且在考证花样以后,动态删除无效的类。

18. 怎样确保在单文件组件中定义的 CSS 款式仅运用于该组件,而不被用于其他组件?

这可以经由过程款式标签上的 scoped 属性来完成。在内部 Vue 运用 PostCSS 插件为一切款式元素分派唯一的数据属性,然后使款式针对这些唯一的元素。举个例子:

<template>
    <p class=”title”>This is a title</p>
</template>
<style scoped>
    .title {
        font-family: sans-serif;
        font-size: 20px;
</style>

19. 怎样将数据从父组件通报到子组件?

可以用作为组件中单向进口的 prop 把数据向下通报到子组件。这是一个例子:

<template>
    <p>
      <contact-list-item v-for=”contact in contacts” :contact=”contact” />
   </p>
</template>
<script>
    import ContactListItem from ‘./ContactListItem’;
    export default {
name: ‘address-book’,
data: function() {
return {
contacts: [.....]
}
},
components: {
ContactListItem
}
}
</script>

contact-list-item 上绑定的 prop “contact” 是一个进口,用于从用作子项的父组件吸收数据。在 contact-list-item 组件中:

<template>
    <p>
        <span>{{ contact.name }}</span>
        <span>{{ contact.email }}</span>
   </p>
</template>
 
<script>
    export default {
     name: ‘contact-list-item’,
props: [‘contact’]
    }
</script>

在这里声清楚明了一个名为 “contact” 的 prop 引入数据,然后可以直接在模板部份中显现。

20. 什么是组件?

组件本质上是 Vue 实例,它们封装模板、逻辑和可选的当地相应性数据属性,可以供应可从新运用的自定义构建元素。可重用性是构建组件的中心。

运用单文件组件构建运用程序时,组件在扩大名为 .vue 的文件中定义。单文件组件包含三个部份:模板部份定义了该组件的 HTML 规划;剧本部份定义了数据、属性和逻辑单位(如要领)并将内容导出为 Vue 组件;另有一个款式部份,用于定义组件的款式表。单文件组件运用 Webpack 等模块绑缚器举行编译。

21. 什么是生命周期hook?列出一些生命周期hook。

Vue 实例(组件)从其初始化到烧毁和删除都阅历生命周期。在全部过程当中,Vue 许可开发人员运转自定义函数的几个阶段。这些函数称为生命周期 hook。以下是一些生命周期 hook 的列表:

  • created
  • mounted
  • updated
  • destroyed

22. 什么是插槽(slot)?

插槽许可你定义可以封装和吸收子 DOM 元素的元素。组件模板中的 <slot> </ slot> 元素作为经由过程组件标签捕捉的一切DOM元素的出口。这是一个例子:

Post.vue |完成插槽的组件

<template>
 <p class="hello">
   <h3 class="title">{{title}}</h3>
   <p class="content">
     <slot></slot>
   </p>
 </p>
</template>

App.vue | 运用Post组件的App组件

<template>
 <p id="app">
   <Post title="Hello from Vue!">
Vue 是用于构建用户界面的渐进框架。与其他框架差别,Vue从头入手下手设想以逐步采纳。
中心库仅集合在视图层,而且很轻易与其他库或现有项目集成。另一方面,当与当代东西和支撑库连系运用时,
Vue也完整可以为庞杂的单页运用程序供应支撑。
   </Post>
 </p>
</template>

在上面的示例中,斜体文本显如今 Post 组件中标有 <slot> 元素的区域内。

23. 什么是视察者?

视察者许可我们视察变动的特定属性,并实行定义为函数的自定义操纵。只管它们的用例与盘算的属性相交织,然则当某些数据属性发作转变时,偶然须要视察者实行自定义操纵或运转价值高贵的操纵。

24. 怎样从子组件发出自定义事宜?

可以用 $emit('event-name', eventPayload)发出自定义事宜。然后可以像其他事宜一样,用 v-on 指令在父组件上阻拦。

25. 开发人员常常运用字母 “vm” 作为变量名来声明根 Vue 实例。比方 const vm = new Vue()。在这类情况下,“vm”指的是什么?

虽然这不是商定,然则开发人员常常运用变量称号 'vm' 来定名根 Vue 实例,该变量称号代表 'ViewModel',因为 Vue 本质上担任视图层,而且部份受到了 MVVM 形式的启示(Model-View-View-Model)。然则,基础没有必要将根实例定名为 “vm”。

相干引荐:

2020年前端vue口试题大汇总(附答案)

vue教程引荐:2020最新的5个vue.js视频教程精选

更多编程相干学问,请接见:编程入门!!

以上就是25道低级Vue.js口试问题的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  移步手机端
25道低级Vue.js口试问题_WEB前端开发

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

本文来源:搜奇网

本文地址:https://www.sou7.cn/300800.html

关注我们:微信搜索“搜奇网”添加我为好友

版权声明: 本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。请记住本站网址https://www.sou7.cn/搜奇网。