前端框架之Vue基本使用的面试题

sym001
129 阅读11分钟

Vue是前端面试必考内容，首先要保证自己要会使用Vue。本篇是从Vue的基本使用，包括模版（插值，指令）、computed和watch、class和style、条件、循环、事件、表单。相信看过这篇内容的同学，一定会受益匪浅。

一、安装Vue框架

首先需要了解下创建Vue框架项目的工具。是基于Vue.js进行快速开发的标准化工具，它可以帮助我们快速创建Vue项目，并提供了一些常用的插件和工具，例如webpack、babel、eslint等。下面是使用Vue CLI创建Vue项目的步骤：

  1. 首先需要安装Node.js和npm，可以在官网下载安装包进行安装。

  2. 打开终端，运行以下命令安装Vue CLI：

    npm install -g @vue/cli

  3. 创建一个新的Vue项目，可以使用以下命令：

    vue create my-project

    在执行命令后，会提示选择一些配置选项，例如Babel、ESLint、CSS预处理器等，可以根据需要进行选择，也可以直接按回车键使用默认选项。

  4. 进入项目目录，运行以下命令启动开发服务器：

    cd my-project
npm run serve

    执行完命令后，在浏览器中访问http://localhost:8080即可看到Vue应用的初始页面。

至此，一个基于Vue CLI创建的Vue项目就已经创建完成了。可以在项目中使用Vue组件、路由、状态管理等功能进行开发。

二、指令、插值

1、指令：

在Vue中，指令是一种特殊的属性，以“v-”开头，用于在模板中绑定数据和操作DOM元素。以下是Vue中常用的指令：

  1. v-model：用于双向数据绑定，将表单元素的值与Vue实例中的数据绑定起来。
  2. v-bind：用于动态绑定HTML属性，可以绑定任何HTML属性，例如class、style、src等。
  3. v-if、v-else、v-else-if：用于根据条件动态地显示或隐藏元素。
  4. v-show：用于根据条件动态地显示或隐藏元素，与v-if不同的是，v-show只是通过CSS控制元素的显示和隐藏。
  5. v-for：用于循环渲染元素，可以循环渲染数组、对象和数字，可以使用别名和索引。注意：key不能乱写（如random或者index），v-for和v-if不能一起使用。
  6. v-on：用于绑定事件，可以绑定任何DOM事件，例如click、input、submit等。
  7. v-text：用于将数据渲染为纯文本，与插值“{{ }}”类似，但是只会渲染纯文本，不会解析HTML标签。
  8. v-html：用于将数据渲染为HTML代码，可以解析HTML标签。

除了以上常用的指令，Vue还提供了一些其他的指令，例如v-cloak、v-pre、v-once等，开发者可以根据实际需求选择合适的指令来处理模板。

2、插值：

在Vue中，插值是一种将数据渲染到模板中的方式，它使用双大括号“{{}}”包裹表达式，例如“{{message}}”。插值的作用是将数据绑定到模板中，使得数据能够动态地显示在页面上。

插值可以渲染简单的数据类型，例如字符串、数字、布尔值等，也可以渲染复杂的数据类型，例如对象、数组、函数等。在插值中，可以使用JavaScript表达式，例如“{{num1 + num2}}”、“{{message.toUpperCase()}}”等。

插值的另一个重要特性是数据绑定，即当数据发生变化时，插值会自动更新视图。例如，当Vue实例中的数据发生改变时，插值会自动重新渲染模板，从而使得页面上的数据实时更新。

在Vue中，表单的使用与普通的HTML表单类似，但是Vue提供了一些特殊的指令和方法来简化表单的处理。

3、表单：v-model

v-model指令用于实现表单元素与Vue实例中数据的双向绑定。例如，可以使用v-model指令将input元素的值绑定到Vue实例中的一个变量：

<template>
  <div>
    <input type="text" v-model="message">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

在上面的例子中，当用户在input元素中输入内容时，Vue实例中的message变量会自动更新，同时在p元素中显示最新的message值。

v-model指令不仅可以绑定文本框的值，还可以绑定复选框、单选框、下拉框等表单元素的值。例如，可以使用v-model指令将单选框的值绑定到Vue实例中的一个变量：

<template>
  <div>
    <input type="radio" id="male" value="male" v-model="gender">
    <label for="male">Male</label>
    <input type="radio" id="female" value="female" v-model="gender">
    <label for="female">Female</label>
    <p>{{ gender }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gender: ''
    }
  }
}
</script>

在上面的例子中，当用户选择单选框时，Vue实例中的gender变量会自动更新，同时在p元素中显示最新的gender值。

  1. 表单提交

在Vue中，可以使用v-on指令绑定表单的submit事件，从而实现表单的提交。例如，可以使用v-on指令绑定submit事件，然后在Vue实例中处理表单的提交：

<template>
  <div>
    <form v-on:submit.prevent="submitForm">
      <input type="text" v-model="username">
      <input type="password" v-model="password">
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    submitForm() {
      // 处理表单提交
      console.log(this.username, this.password);
    }
  }
}
</script>

在上面的例子中，当用户点击submit按钮时，表单会提交，同时Vue实例中的submitForm方法会被调用，从而处理表单的提交。

需要注意的是，在处理表单提交时，可以使用prevent修饰符防止表单的默认提交行为，也可以使用stop修饰符防止事件冒泡。

三、computed和watch

在Vue中，computed和watch都是用来监听数据变化的，但是它们的用途和实现方式有所不同。

  1. computed

computed是Vue提供的一个计算属性，它是基于响应式依赖进行缓存的，即只有当依赖的数据发生变化时，才会重新计算。computed的特点是：

  • computed是一个函数，它返回一个计算结果。
  • computed的计算结果会被缓存，只有依赖的数据发生变化时才会重新计算。
  • computed的计算结果是响应式的，即当依赖的数据发生变化时，会自动更新计算结果，从而更新视图。

computed适合用来处理一些复杂的计算逻辑，例如过滤、排序、格式化等。

  1. watch

watch是Vue提供的一个监听器，它用来监听指定数据的变化，并在数据变化时执行指定的回调函数。watch的特点是：

  • watch是一个对象，它的属性是需要监听的数据，值是回调函数。
  • watch监听的数据发生变化时，会执行对应的回调函数。
  • watch可以监听多个数据，也可以同时监听多个数据的变化。

watch适合用来处理一些异步操作或者需要执行副作用的操作，例如发送网络请求、操作DOM等。

四、class和style

在Vue中，可以使用v-bind指令来动态绑定class和style。v-bind:class用于绑定class名，v-bind:style用于绑定样式。

  1. 绑定class

可以通过对象语法或数组语法来绑定class。

对象语法：

<div v-bind:class="{ active: isActive }"></div>

isActive是一个布尔值，如果为true，则该元素会自动添加class名为active。

数组语法：

<div v-bind:class="[activeClass, errorClass]"></div>

其中，activeClass和errorClass是定义好的class名，如果它们的值为true，则该元素会自动添加这些class名。

  1. 绑定style

可以通过对象语法或数组语法来绑定style。

对象语法：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

其中，activeColor和fontSize是定义好的变量，它们的值会被动态地绑定到该元素的style属性上。

数组语法：

<div v-bind:style="[baseStyles, overridingStyles]"></div>

其中，baseStyles和overridingStyles是定义好的样式对象，它们的属性会被合并到该元素的style属性上。

五、条件

在Vue中，可以使用v-if、v-else-if、v-else指令来实现条件渲染。

  1. v-if

v-if指令用于根据表达式的值来决定是否渲染一个元素。

例如：

<div v-if="isShow">Hello World</div>

当isShow为true时，该元素会被渲染；当isShow为false时，该元素不会被渲染。

  1. v-else-if

v-else-if指令用于在v-if指令的后面添加一个条件判断，当v-if的表达式为false时，会判断v-else-if的表达式是否为true，如果为true，则渲染该元素。

例如：

<div v-if="type === 'A'">Type A</div>
<div v-else-if="type === 'B'">Type B</div>
<div v-else>Type C</div>

当type为A时，会渲染第一个div；当type为B时，会渲染第二个div；当type既不是A也不是B时，会渲染第三个div。

  1. v-else

v-else指令用于在v-if或v-else-if指令的后面添加一个条件判断，当前面的条件都不满足时，会渲染该元素。

例如：

<div v-if="isShow">Hello World</div>
<div v-else>Goodbye World</div>

当isShow为true时，会渲染第一个div；当isShow为false时，会渲染第二个div。

  1. v-show

v-show 是简单的切换元素的 CSS 属性 display，如果条件为 false，则将元素的 display 属性设置为 none，如果条件为 true，则将元素的 display 属性设置为原来的值。因此，v-show 在切换时有更低的切换开销，但是在初始渲染时有更高的初始开销，因为它需要渲染所有元素，然后再根据条件决定是否显示。

例如：

<div v-show="isShow">Hello World</div>

面试题：v-if 和 v-show 的区别，以及使用场景

v-if 和 v-show 都是 Vue.js 中用于控制元素显示和隐藏的指令，它们的区别在于：

  • v-if 是“真正的”条件渲染，它根据条件决定是否渲染元素，如果条件为 false，则不会渲染该元素，如果条件为 true，则会渲染该元素。
  • v-show 是简单的切换元素的 CSS 属性 display，如果条件为 false，则将元素的 display 属性设置为 none，如果条件为 true，则将元素的 display 属性设置为原来的值。

根据上述区别， v-if 或 v-show：

  • 如果需要频繁切换元素的显示和隐藏，建议使用 v-show，因为它的切换开销更低。
  • 如果需要在初始渲染时避免不必要的开销，建议使用 v-if，因为它只在需要时才会渲染元素。
  • 如果需要在某些条件下完全销毁元素，建议使用 v-if，因为它可以完全销毁元素，而 v-show 只是简单地隐藏元素。

六、事件

  • 传参
  • event 参数
  • 事件修饰符
  • 按键修饰符
  • 【注意】用 vue 绑定的事件，组件销毁时会自动被解绑。自己绑定的事件，需要自己销毁。

1、event挂载参数：

//无参数
<button @click="increment1">+1</button>
//传事件本身用$event
<button @click="increment2(2, $event)">+2</button>

2、event参数：

  1. event 是原生的
  2. 事件被挂载到当前元素
  3. 和 DOM 事件一样
increment1(event) {
// eslint-disable-next-line
console.log('event', event, event.__proto__.constructor) // 是原生的 event 对象
// eslint-disable-next-line
console.log(event.target)
// eslint-disable-next-line
console.log(event.currentTarget) // 注意，事件是被注册到当前元素的，和 React 不一样
this.num++
},

1.事件修饰符

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

2、按键修饰符

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

七、表单

在 Vue 中，v-model 指令可以用于双向数据绑定。在 v-model 中，可以使用修饰符来改变默认行为。下面是关于 trim、lazy 和 number 修饰符的说明：

  1. trim 修饰符：用于去除输入框的首尾空格。

例如：

<input v-model.trim="message">

在这个例子中，如果用户在输入框中输入了 " hello "，则 message 的值将被设置为 "hello"，去除了首尾空格。

  1. lazy 修饰符：用于延迟更新数据，即在失去焦点或按下回车键后才更新数据。

例如：

<input v-model.lazy="message">

在这个例子中，如果用户在输入框中输入了 "hello"，则 message 的值不会立即更新，而是在用户失去焦点或按下回车键后才更新。

  1. number 修饰符：用于将输入框的值转换为数字类型。

例如：

<input v-model.number="age">

在这个例子中，如果用户在输入框中输入了 "18"，则 age 的值将被设置为数字类型的 18。

需要注意的是，使用 number 修饰符时，如果输入框中的值无法转换为数字类型，则会将值设置为 undefined。

常见表单项：textarea、checkbox、radio、select

  1. textarea
<textarea v-model="message"></textarea>

在这个例子中，message 是一个数据属性，可以在 Vue 实例中定义。当用户在 textarea 中输入内容时，message 的值会自动更新。

  1. checkbox
<input type="checkbox" v-model="checked">

在这个例子中，checked 是一个数据属性，可以在 Vue 实例中定义。当用户勾选或取消勾选复选框时，checked 的值会自动更新。

  1. radio
<input type="radio" value="male" v-model="gender"> Male
<input type="radio" value="female" v-model="gender"> Female

在这个例子中，gender 是一个数据属性，可以在 Vue 实例中定义。当用户选择男性或女性单选按钮时，gender 的值会自动更新为相应的值。

  1. select
<select v-model="selected">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>

在这个例子中，selected 是一个数据属性，可以在 Vue 实例中定义。当用户选择下拉列表中的选项时，selected 的值会自动更新为相应的值。

需要注意的是，对于 checkbox 和 radio，v-model 绑定的值应该是一个布尔类型或字符串类型。如果使用数字类型，需要使用 value 绑定相应的数字值。对于 select，v-model 绑定的值应该是选中选项的 value 值。

avatar
文章
阅读
粉丝