首页 热点资讯 义务教育 高等教育 出国留学 考研考公
您的当前位置:首页正文

Vue常见面试题

2024-12-20 来源:化拓教育网

1.怎么定义vue-router的动态路由?怎么获取传递过来的动态参数?

何为动态路由?能够提供参数的路由即为动态路由

动态路由的创建,主要是使用 path 属性过程中,使用动态路径参数,以冒号开头,如:

{
     path: /user/:id,
      component: User,
      name:User
}
$route.params 获取params传的参数,$route.query 获取query传的参数

2.v-model是什么?怎么使用?vue中标签怎么绑定事件?

v-model用于表单数据的双向绑定,其实它就是一个语法糖,这个背后就做了两个操作:

  1. v-bind绑定一个value属性
  2. v-on指令给当前元素绑定input事件
    使用方法如下:
<div id='app'>
    <input v-model="str">
    {{ str }}
</div>
<script src="./vue.js"></script>
<script>
    var app = new Vue({
          el: '#app',
          data: {
             str:'hello'
          },
    })
</script>

v-model很好地体现了vue双向绑定的理念。
单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新。有单向绑定,就有双向绑定。
如果用户更新了View,Model的数据也自动被更新了,这种情况就是双向绑定。
什么情况下用户可以更新View呢?填写表单就是一个最直接的例子。当用户填写表单时,View的状态就被更新了,如果此时MVVM框架可以自动更新Model的状态,那就相当于我们把Model和View做了双向绑定。
双向数据绑定=单向数据绑定+UI事件监听

vue绑定事件
1.通过指令 v-on:事件名=“函数名”绑定事件 eg:<button v-on:click="doThis"></button>
2.通过语法 @事件名=“函数名”绑定事件 eg:<button @click.stop="doThis"></button>

3.axios是什么?怎么使用?描述使用它实现登录功能的流程?

axios

axios 是一个基于 Promise 的 HTTP 客户端,专门为浏览器和 node.js 服务。

Vue 2.0 官方推荐使用 axios 来代替原来的 Vue request,所以这里介绍一下 axios 的功能和基本的使用方法,希望能够对各位所有帮助。

功能

使用

这里以 Vue 为例:在 NPM 中安装 axios 之后,需要在 main.js 文件中引用 package
import axios from 'axios'

4.vue组件化的理解

组件是可复用的 Vue 实例, 如果网页中的某一个部分需要在多个场景中使用,那么我们可以将其抽出为一个组件进行复用。组件大大提高了代码的复用率。

5.什么是vue的生命周期?它分为几个阶段?它的作用是什么?

Vue生命周期

Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。

阶段

作用

它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

显示全文