Vue面试题正文:
1.vue全家桶包含哪些?
答案:vue全家桶:
vue(整体架构) + vuex(状态管理) + vue-router(路由) + vue_resource || axios(ajax请求) + mint-UI(移动端UI框架库) || antd-vue(PC端UI框架库)
react全家桶:
react(整体架构) + redux || mobx(状态管理) + react-router(路由) + axios(ajax请求) + antd || react-material || antd-model(UI框架库)
2.v-model是什么?怎么使用?vue中标签怎么绑定事件?
答案:v-model可以实现双向绑定,指令(v-class、v-for、v-if、v-show、v-on)。vue的model层的data属性。绑定事件:<input @click=doLog()/>
3.v-model的实现原理?
答案:https://blog.csdn.net/weixin_43606158/article/details/99131754
4.请说一下vue的生命周期。
答案:https://blog.csdn.net/weixin_43606158/article/details/90116309
5.请说出至少4种vue当中的指令和它的用法。
答案:v-if:判断是否隐藏;v-for:数据循环出来;v-bind:class:绑定一个属性;v-model:实现双向绑定。(其他的请看vue官网)
6.请说出v-if和v-show的区别。
答案:https://blog.csdn.net/weixin_43606158/article/details/99131956
相同点:
v-if与v-show都可以动态控制dom元素显示隐藏
不同点:
v-if显示隐藏是将dom元素整个添加或删除,而v-show隐藏则是为该元素添加css–display:none,dom元素还在。
7.active-class是哪个组件的属性?
答案:vue-router模块的router-link组件。
8.vue嵌套路由怎么定义?
答案:https://blog.csdn.net/weixin_43606158/article/details/99132101
9.怎么定义vue-router的动态路由?怎么获取传过来的动态参数?
答案:
在router目录下的index.js文件中,对path属性加上/:id。
使用router对象的params.id获取参数。
10.vue-router有哪几种导航钩子?
答案:三种:
第一种:是全局导航钩子:router.beforeEach(to,from,next),作用:跳转前进行判断拦截。
第二种:组件内的钩子。
第三种:单独路由独享组件。
11.iframe的优缺点?
答案:iframe也称作嵌入式框架,嵌入式框架和框架网页类似,它可以把一个网页的框架和内容嵌入在现有的网页中。
优点:
解决加载缓慢的第三方内容如图标和广告等的加载问题
Security sandbox
并行加载脚本
方便制作导航栏
缺点:
iframe会阻塞主页面的Onload事件
即使内容为空,加载也需要时间
没有语意
12.请讲讲你对axios或者其他请求方式的使用。
答案 :https://blog.csdn.net/weixin_43606158/article/details/91409361
13.axios+tp5进阶中,调用axios.post(‘api/user’)是进行的什么操作?axios.put(‘api/user/8′)呢?
答案:跨域,添加用户操作,更新操作。
14.vuex是什么?怎么使用?哪种功能场景使用它?
答案:vue框架中状态管理。在main.js引入store,注入。新建了一个目录store,…… export 。场景有:单页应用中,组件之间的状态。音乐播放、登录状态、加入购物车。
15.mvvm框架是什么?它和其它框架(jquery)的区别是什么?哪些场景适合?
答案:一个model+view+viewModel框架,数据模型model,viewModel连接两个
区别:vue数据驱动,通过数据来显示视图层而不是节点操作。
场景:数据操作比较多的场景,更加便捷
16.自定义指令(v-check、v-focus)的方法有哪些?它有哪些钩子函数?还有哪些钩子函数参数?
答案:全局定义指令:在vue对象的directive方法里面有两个参数,一个是指令名称,另外一个是函数。组件内定义指令:directives
钩子函数:bind(绑定事件触发)、inserted(节点插入的时候触发)、update(组件内相关更新)
钩子函数参数:el、binding
17.vue-router是什么?它有哪些组件?
答案:vue用来写路由的一个插件。router-link、router-view
18.导航钩子有哪些?它们有哪些参数?
答案:
导航钩子包括:
a/全局钩子和组件内独享的钩子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave
参数:
有to(去的那个路由)、from(离开的路由)、next(一定要用这个函数才能去到下一个路由,如果不用就拦截)最常用就这几种。
19.请说下封装 vue 组件的过程?
答案:首先,组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低、难维护、复用性等问题。
创建一个组件,然后使用Vue.component方法注册组件。子组件需要数据,可以在props中接受定义。而子组件修改好数据后,想把数据传递给父组件,可以采用emit方法。
20.你是怎么认识vuex的?
答案:vuex可以理解为一种开发模式或框架。比如PHP有thinkphp,java有spring等。
通过状态(数据源)集中管理驱动组件的变化(好比spring的IOC容器对bean进行集中管理)。
应用级的状态集中放在store中; 改变状态的方式是提交mutations,这是个同步的事物; 异步逻辑应该封装在action中。
21.vue-loader是什么?使用它的用途有哪些?
答案:解析.vue文件的一个加载器,跟template/js/style转换成js模块。
用途:js可以写es6、style样式可以scss或less、template可以加jade等
22.请说出vue.cli项目中src目录每个文件夹和文件的用法?
答案:assets文件夹是放静态资源;components是放组件;router是定义路由相关的配置;view视图;app.vue是一个应用主组件;main.js是入口文件
23.聊聊你对Vue.js的template编译的理解?
答案:简而言之,就是先转化成AST树,再得到的render函数返回VNode(Vue的虚拟DOM节点)
24.vue.cli中怎样使用自定义的组件?有遇到过哪些问题吗?
答案:第一步:在components目录新建你的组件文件(smithButton.vue),script一定要export default 将组件导出。
第二步:在需要用的页面(组件)中导入:import smithButton from ‘…/components/smithButton.vue’
第三步:注入到vue的子组件的components属性上面,components:{smithButton}
第四步:在template视图view中使用,
问题有:smithButton命名,使用的时候则smith-button。
25.dom是在哪一个生命周期完成渲染的?
答案:在 mounted 中就已经完成了
26.第一次页面加载会触发哪几个生命周期?
答案:第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个生命周期。
27.vue生命周期的作用是什么?
答案:它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
28.如何解决vue修改数据不刷新页面这个问题?
答案:
第一种:this.$set
第二种:给数组、对象赋新值
第三种:使用this.$forceupdate强制刷新
29.为什么会出现vue修改数据后页面没有刷新这个问题?
答案:受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。
1.CSS选择符有哪些?哪些属性可以继承?
*id选择器( # myid)
2.类选择器(.myclassname)
3.标签选择器(div, h1, p)
4.相邻选择器(h1 + p)
5.子选择器(ul > li)
6.后代选择器(li a)
7.通配符选择器( * )
8.属性选择器(a[rel = "external"])
9.伪类选择器(a:hover, li:nth-child)
* 可继承的样式: font-size font-family color, UL LI DL DD DT;
* 不可继承的样式:border padding margin width height ;
2.CSS优先级算法如何计算?
* 优先级就近原则,同权重情况下样式定义最近者为准;
* 载入样式以最后载入的定位为准;
优先级为:
同权重: 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。
!important > id > class > tag
important 比 内联优先级高
4.如何居中div?
作者:慕课网
链接:https://www.zhihu.com/question/41466747/answer/580294247
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
1、水平居中:给div设置一个宽度,然后添加margin:0 auto属性
div{
width:200px;
margin:0 auto;
}
2、水平垂直居中一
确定容器的宽高 宽500 高 300 的层
设置层的外边距
div {
position: relative; /* 相对定位或绝对定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px; /* 外边距为自身宽高的一半 */
background-color: pink; /* 方便看效果 */
}
3、水平垂直居中二
未知容器的宽高,利用 `transform` 属性
div {
position: absolute; /* 相对定位或绝对定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink; /* 方便看效果 */
}
4、水平垂直居中三
利用 flex 布局
实际使用时应考虑兼容性
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.container div {
width: 100px;
height: 100px;
background-color: pink; /* 方便看效果 */
}
5.CSS3有哪些新特性?
新增各种CSS选择器 (: not(.input):所有 class 不是“input”的节点)
圆角 (border-radius:8px)
多列布局 (multi-column layout)
阴影和反射 (Shadow\Reflect)
文字特效 (text-shadow、)
文字渲染 (Text-decoration)
线性渐变 (gradient)
旋转 (transform)
缩放,定位,倾斜,动画,多背景
例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:
6.请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景?
一个用于页面布局的全新CSS3功能,Flexbox可以把列表放在同一个方向(从上到下排列,从左到右),并让列表能延伸到占用可用的空间。
较为复杂的布局还可以通过嵌套一个伸缩容器(flex container)来实现。
采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。
它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目"。
常规布局是基于块和内联流方向,而Flex布局是基于flex-flow流可以很方便的用来做局中,能对不同屏幕大小自适应。
在布局上有了比以前更加灵活的空间。
1.js的基本数据类型。
Undefined、Null、Boolean、Number、String、
ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的数据类型 )
2.JavaScript原型,原型链 ? 有什么特点?
每个对象都会在其内部初始化一个属性,就是prototype(原型),当我们访问一个对象的属性时,
如果这个对象内部不存在这个属性,那么他就会去prototype里找这个属性,这个prototype又会有自己的prototype,
于是就这样一直找下去,也就是我们平时所说的原型链的概念。
关系:instance.constructor.prototype = instance.__proto__
特点:
JavaScript对象是通过引用来传递的,我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时,与之相关的对象也会继承这一改变。
当我们需要一个属性的时,Javascript引擎会先看当前对象中是否有这个属性, 如果没有的话,
就会查找他的Prototype对象是否有这个属性,如此递推下去,一直检索到 Object 内建对象。
4.Javascript如何实现继承?
1、构造继承2、原型继承3、实例继承4、拷贝继承
6.闭包
闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域,将函数内部的变量和方法传递到外部。
闭包的特性:1.函数内再嵌套函数2.内部函数可以引用外层的参数和变量3.参数和变量不会被垃圾回收机制回收//li节点的onclick事件都能正确的弹出当前被点击的li索引
7.Ajax 是什么? 如何创建一个Ajax?
ajax的全称:Asynchronous Javascript And XML。
异步传输+js+xml。
所谓异步,在这里简单地解释就是:向服务器发送请求的时候,我们不必等待结果,而是可以同时做其他的事情,等到有了结果它自己会根据设定进行后续操作,与此同时,页面是不会发生整页刷新的,提高了用户体验。
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
(3)设置响应HTTP请求状态变化的函数
(4)发送HTTP请求
(5)获取异步调用返回的数据
(6)使用JavaScript和DOM实现局部刷新
2020年前端面试题汇总
最新推荐文章于 2024-03-29 20:48:35 发布