前端面试题整理—Vue篇

 1、对vue的理解,他有什么特点,vue为什么不能兼容IE8及以下浏览器

  vue是一套用于构建用户界面的渐进式框架,核心是一个响应的数据绑定系统

  vue是一款MVVM框架,基于双向绑定数据,当数据发生变化时候,vue自身会进行一些运算

  特点:简洁轻量、数据驱动、组件化、模块友好

  vue.js使用了IE8无法模拟的 ECMAScript 5 特性,没有替代方案

2、简述Vue双向数据绑定的原理

  主要是通过Object对象的defineProperty属性,重写data的set和get函数来实现的

  vue是通过数据劫持的方式来做数据绑定,最核心的方法就是通过Object.defineProperty()来实现对属性的劫持

  在设置或者获取的时候我们就可以在get或者set方法里加入其他的触发函数,达到监听数据变动的目的

3、什么是MVVM,和MVC的区别

  MVVM是Model-View-ViewModel的缩写

  Model层代表数据模型

  View代表组件视图,负责将数据模型转化成UI展现出来

  ViewModel是一个同步 View 和 Model 的对象(双向绑定)

  在MVVM中,View和Model之间并没有直接的联系,而是通过ViewModel进行交互,

  Model和ViewModel之间的交互是双向的,因此 通过视图操作数据,也能通过数据操作视图

  MVC是Model-View- Controller的简写。即模型-视图-控制器,使用MVC的目的是为了将M和V相分离

  MVVM与MVC最大的区别就是实现了View和Model的自动同步,也就是当Model的属性改变时

  我们不用再手动操作Dom来改变View,而是改变后该属性对应View层会自动改变

4、vue.js的两个核心是什么

  数据驱动和组件化思想

5、vue与angular的区别

  vue的双向邦定是基于ES5中getter/setter来实现的,而angular是由自己实现一套模版编译规则,需要进行所谓的“脏值”检查,vue则不需要

  vue需要提供一个el对象进行实例化,后续的所有作用范围也是在el对象之下,而angular而是整个html页面

6、说下vue的底层原理

  Vue的模式是m-v-vm模式,即(model-view-modelView),通过modelView作为中间层,进行双向数据的绑定与变化

  1)通过建立虚拟dom树document.createDocumentFragment(),方法创建虚拟dom树

  2)一旦被监测的数据改变,会通过Object.defineProperty定义的数据拦截,截取到数据的变化

  3)截取到的数据变化,从而通过订阅——发布者模式,触发Watcher(观察者),从而改变虚拟dom的中的具体数据

  4)最后通过更新虚拟dom的元素值,从而改变最后渲染dom树的值,完成双向绑定

7、如何使css只在当前组件起作用

  如果想写的css只对当前组件起作用,则在style中写入scoped

8、vue中v-if和v-show的区别

  v-if和v-show都是用来控制元素的渲染

  v-if是根据后面数据的真假,来判断DOM的添加删除等操作

  v-show只是在修改元素的css样式(display属性值)

  v-if如果初始渲染条件为真,就渲染,反之就不渲染

  v-show不管初始条件是否为真,都会被渲染

  v-if有更高的切换消耗,不适合做频繁的切换

   v-show有更高的初始渲染消耗,适合做频繁的切换

9、请举例vue常用的修饰符

  事件修饰符:stop、prevent、self、once  

  lazy、number、trim、exact

10、v-on可以绑定多个方法吗?

  可以

<input v-on:keyup.enter="submit" v-on:focus="onFocus">

  

原文地址:https://www.cnblogs.com/theblogs/p/10634101.html

时间: 2024-10-08 12:57:41

前端面试题整理—Vue篇的相关文章

web前端面试题整理后篇(程序篇)

需要web前端课程工具和电子书,可以加: 33群105601600;  22群120342833 1. var obj = {a : 1}; (function (obj) { obj = {a : 2}; })(obj);       //问obj的值会改变吗? var obj = {a : 1}; (function (obj) {     obj = {a : 2}; })(obj); //问obj的值会改变吗? 外部的obj不变. 因为匿名函数中obj传入参数等于是创建了一个局部变量ob

前端面试题整理—HTTP篇

1.常见的HTTP方法有哪些? GET: 用于请求访问已经被URI(统一资源标识符)识别的资源,可以通过URL传参给服务器 POST:用于传输信息给服务器,主要功能与GET方法类似,但一般推荐使用POST方式. PUT: 传输文件,报文主体中包含文件内容,保存到对应URI位置. HEAD: 获得报文首部,与GET方法类似,只是不返回报文主体,一般用于验证URI是否有效. DELETE:删除文件,与PUT方法相反,删除对应URI位置的文件. OPTIONS:查询相应URI支持的HTTP方法 2.H

前端面试题整理—React篇

1.说一下React React是Facebook 开发的前端JavaScript库 V层:react并不是完整的MVC框架,而是MVC中的C层 虚拟DOM:react引入虚拟DOM,每当数据变化通过reactdiff运算,将上一次的虚拟DOM与本次渲染的DOM进行对比,仅仅只渲染更新的,有效减少了DOM操作 JSX语法:js+xml,是js的语法扩展,编译后转换成普通的js对象 组件化思想:将具有独立功能的UI模块封装为一个组件,而小的组件又可以通过不同的组合嵌套组成大的组件,最终完成整个项目

web前端面试题整理(HTML篇)

web前端面试题整理(HTML篇)需要web前端课程工具和电子书,可以加: 33群105601600;  22群1203428331. h5的改进:新元素画布canvas: HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成音频audio视频video语义性: article,  nav ,  footer, section, aside, hgroup等.时间time 新属性拖放: draggable   <img draggable=&q

前端面试题(JS篇)

原题地址:http://handyxuefeng.blog.163.com/blog/static/454521722013111714040259/ 好吧,最近打算换工作,所以关注比较多的是面试题,这套还不错,留下~~ 1.JS相关问题: 解释下事件代理(基础题) 解释下 JavaScript 中 this 是如何工作的(始终指向调用当前函数的对象) 解释下原型继承的原理. AMD vs. CommonJS? 什么是哈希表? 解释下为什么接下来这段代码不是 IIFE(立即调用的函数表达式):f

web前端面试题整理(程序篇)

1. var obj = {a : 1}; (function (obj) { obj = {a : 2}; })(obj);       //问obj的值会改变吗? var obj = {a : 1}; (function (obj) { obj = {a : 2}; })(obj); //问obj的值会改变吗? 外部的obj不变. 因为匿名函数中obj传入参数等于是创建了一个局部变量obj, 里面的obj指向了一个新的对象 . 如果改成(function () { obj = {a : 2}

【web前端面试题整理08】说说最近几次面试(水)

为什么换工作 换工作简单来讲一般会归纳为钱不够或者人不对,我们团队氛围很不错,所以基本就定位到钱不够了,而我更多是考虑到以后的职业发展,简单说来就是对以后几年的工作有想法,而这种想法实现不一定能在现在的团队获得,在短期内也看不到希望,加之公司职级晋升不合理等考虑,也就自然而然想到了离职. 其实在鞋厂这两年,真的收获了很多东西,也负责了很重要的业务,这些财富可能是其它大公司不一定能给予的,虽然一直级别低点也就没太多在意,直到最近职级福利缩水...... 最初我面试的职级为X,HR给了一套智力题做,

【web前端面试题整理02】前端面试题第二弹袭来,接招!(转)

前言 今天本来准备先了解下node.js的,但是, 看看我们一个小时前与一个小时后的差距: 既然如此,我们继续来搜集我们的前端 面试题大业吧!!! 特别感谢玉面小肥鱼提供哟,@玉面小飞鱼 题目一览 JavaScript编程题1.实现输出document对象中所有成员的名称和类型:2.如何获得一个DOM元素的绝对位置?(获得元素位置,不依赖框架)3.如何利用JS生成一个table?4.实现预加载一张图片,加载完成后显示在网页中并设定其高度为50px,宽度为50px:5.假设有一个4行td的tabl

2016年BAT公司常见的Web前端面试题整理

1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型:String,boolean,Number,Undefined 引用数据类型:Object(Array,Date,RegExp,Function,Null) 那么问题来了,如何判断某变量是否为数组数据类型? 方法一.判断其是否具有“数组性质”,如slice()方法.可自己给该变量定义slice方法,故有时会失效 方法二.obj instanceof Array