面试题

vue

vue的特点是什么?

1.国人开发的一个轻量级框架。

2.双向数据绑定，在数据操作方面更为简单。

3.视图,数据,结构分离,不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作。

4.组件化，方便封装和复用

5.虚拟DOM: dom操作是非常耗费性能的，不再使用原生的dom操作节点， 极大解放dom操作

vue中父子组件是如何传值的?

组件传值–父组件向子组件传值

第一步：父组件 在引用子组件时，通过属性绑定（v-bind：）的形式，把需要传递给子组件的数据，传递到子组件内部，供子组件使用 

第二步：把父组件传递过来的数据， 在 props数组 中定义一下

组件中的 所有props 中的数据，都是通过父组件传递给子组件的

 props 中的数据都是只读的，无法重新赋值

第三步：在该子组件中使用props数组 中定义好的数据

子组件通过事件调用向父组件传值

在子组件中，利用  $emit  触发 父组件传递过来的方法的时候，可以将子组件的数据当做参数传递给父组件

详情请点击

v-show和v-if指令的共同点和不同点?

共同点:都能控制元素的显示和隐藏。

不同点:实现本质方法不同。
v-show本质就是通过控制css中的display设置为none,控制隐藏，只会编译一次;
v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false, 就不会编译了。而且v-if不停的销毁和创建比较消耗性能。

说出几种vue当中的指令和它的用法?

1.v-model双向数据绑定

<input type="text" v-model="msg"/>

2.v-for循环

<div id="box">

    <ul>

            <li v-for="item in arr">

                <span>{item.name}</span>

                <span>{item.age}</span>

            </li>

    </ul>

</div>

<script src="text/JavaScript">

    new Vue({
    

            el:"#box",

            data(){
    

                return(){
    

                    arr:[

                                {
    "name":"yifengchun","age":18},

                                 {
    "name":"yifengchun","age":18},

                                 {
    "name":"yifengchun","age":18},

                                 {
    "name":"yifengchun","age":18}

                            ]

                }

            }

    })

</script>

3.v-show 显示与隐藏

<div id="box">

    <div style="width:100px;height:100px;border:1px solid red;display:none" v-show="show"></div>

</div>

<script>

    new Vue({
    

            el: "#box",

            data(){
    

                return {
    

                    show: true

                }

            }

        })

</script>

4.v-on事件

<div id="box">

    <button v-on:click="say">按钮</button>

</div>按钮-->

<script>

new Vue({
    

        el: "#box",

        data(){
    

            return {
    }

        },

        methods: {
    

            say() {
    

                alert(111);

            }

        }

    })

</script>

5.v-once只绑定一次

vue-loader是什么? 使用它的用途有哪些?

vue文件的一个加载器，将template/js/style转换成js模块。
 用途: js可以写es6、 style样式可以scss或less、template可以加jade

axios是什么? 怎么使用?

答:请求后台资源的模块。
npm install axios -save装好，js中使 用import进来,然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中。
详情

单页面应用和多页面应用区别及优缺点

答:页面应用(SPA) ，通俗一点说就是指只有一个项面的应用，浏览器一开始要加载所有必须的html, js,css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候,还是会分开写(页面片段)，然后在交互的时候由路由程序动态载入。

多页面(MPA) ,就是指一个应用中有多个页面,页面跳转时是整页刷新。

页面的优点:用户体验好,快，内容的改变不需要重新加载整个页面，基于这一点spa对服务 器压力较小;前后端分离;页面效果会比较炫酷(比如切换页面内容时的专场动画)。

单页面缺点:不利于seo; 导航不可用，如果一定要导航需要自行实现前进、后退。

简述一下vue常用的修饰符和作用?

.stop:等同于JavaScript中的event.stopPropagation(防止事件冒泡);

.prevent:等同于JavaScript中的event.preventDefault), 防止执行预设的行为(如果事件可取消，则取消该事件，不停止事件的进一步传播) ;

.capture: 与事件冒泡的方向相反,事件捕获由外到内;

.self:只会触发自己范围内的事件，不包含子元素;

.once:只会触发一次。

谈谈你对MVVM开发模式的理解

MVVM分为Model、View、 ViewModel三者。

●Model: 代表数据模型，数据和业务逻辑都在Model层中定义; .

●View: 代表U|视图,负责数据的展示; .

●ViewModel: 负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作;

Model和View并无直接关联，而是通过Vi ewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系。因此当Mode1中的数据改变时会触发Vi ew层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。

这种模式实现了Model和View的数据自动同步,因此开发者只需要专注对数据的维护操作即可，而不需要自己操
作dom。

MVC全名是Model View Controller，模型(Model)、视图(View)和控制器(Controller)

前端如何优化网站性能?

1、减少HTTP请求数量

在浏览器与服务器进行通信时，主要是通过HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限(不同浏览器允许并发数)， 一-旦HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少HTTP 的请求数量可以很大程度上对网站性能进行优化。

可以通过精灵图、合并css和js文件、 懒加载等方式来减少http请求。
CSS Sprites

国内俗称CSS精灵，这是将多张图片合并成一张图片达到减少HTTP请求的一种解决方案，可以通过CSS的background属性来访问图片内容。这种方案同时还可以减少图片总字节数。

合并CSS和JS文件

现在前端有很多工程化打包工具，如: grunt、gulp、webpack等。 为了减少HTTP 请求数量，可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。

采用lazyLoad

俗称懒加载，可以控制网页上的内容在一开始无需加载， 不需要发请求，等到用户操作真正需要的时候立即加载出内
容。这样就控制了网页资源一次性请求数量。

2、控制资源文件加载优先级

浏览器在加载HTML内容时，是将HTML内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将CSS提前加载，不要受JS加载影响。一般情况下都是CSS在头部，JS在底部。

3、利用浏览器缓存

浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，
直接在本地读取该资源。

4、减少DOM操作(vue这种减少操作DOM)
5、图标使用IconFont替换image标签

vue中样式绑定语法

1.对象方法v-bind:class="{' orange' :isRipe, ' green' :isNotRipe}"

2.数组方法v-bind:class=" [class1,class2]"

3.行内v-bind:style=" {color :color , fontsize:fontsize+'px'}"

写出3个使用this的典型应用

1)、在htm|元素事件属性中使用，如: .

<input type=“button” οnclick=”showInfo(this);”value=“点击一下”/>

2)、构造函数

function Animal(name， color) {
this.name = name;
this.color = color ;

3)、input点击, 获取值

<input type="button"  id="text" value="点击一下" />
<script type="text/javascript">
var btn = document . getElementById("text");
btn. onclick = function() {
    }
</script>

简述vue中每个生命周期具体适合哪些场景?

beforeCreate: 在new一个vue实例后，只有一 些默认的生命周期钩子和默认事件，其他的东西都还没创建。在beforeCreate生命周期执行的时候， data和methods中的数据都还没有 初始化。不能在这个阶段使用data中的数据和methods中的方法

created: data和methods都已经被初始化好了，如果要调用methods中的方法，或者操作data中的数据，最早可以在这个阶段中操作

beforeMount:执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的

mounted:执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段,进入到了运行阶段。如果我们想要通过插件操作页面上的DOM节点，最可以在和这个阶段中进行

beforeUpdate:|当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的，页面还没有和最新的数据保持同步
updated :页面显示的数据和data中的数据已经保持同步了，都是最新的

beforeDestory Vue实例从运行阶段进入到了销毁阶段,这个时候上所有的data和methods，指冷，过滤器…都是处于可用状态。还没有真正被销毁

destroyed这个时候上所有的data和methods，指令，过滤器…都是处于不可用状态，组件已经被销毁了。

如何避免毁掉地狱?

●模块化:将回调函数转换为独立的函数

●使用流程控制库,例如[aync]

●使用Promise

●使用aync/await

使用NPM有哪些好处?

1、通过NPM,你可以安装和管理项目的依赖，并且能够指明依赖项的具体版本号。

2、对于Node应用开发而言，你可以通过package. json文件来管理项目信息，配置脚本,以及指明依赖的具体版本

3、npm install xx -S和npm install -D的命令含义

4、npm uninstall xx是什么意思

5、项目转换的时候，不会把node_ modules包发过去，那么你拿到没有nodeModules目录的项目怎么让它跑起来
(npm install安装所有的依赖)

请描述一下cookies, sessionStorage 和localStorage的区别?

cookie是网站为了标示用户身份而储存在用户本地终端(Client Side). 上的数据(通常经过加密)。

cookie数据始终在同源的http请求中携带(即使不需要)，记会在浏览器 和服务器间来回传递。

sessionStorage和1ocalStorage不会自动把数据发给服务器，仅在本地保存。

存储大小:
cookie数据大小不能超过4k.

sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
有期时间:
localStorage
存储持久数据，浏览器关闭后数据不丢失除非主动删除数据;

sessionStorage数据 在当前浏览器窗口关闭后自动删除。

cookie
设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

跳转页面

1：router-link跳转

<!-- 直接跳转 -->
<router-link to='/testDemo'>
 <button>点击跳转2</button>
</router-link>
  
<!-- 带参数跳转 -->
<router-link :to="{path:'testDemo',query:{setid:123456}}">
 <button>点击跳转1</button>
</router-link>
  
<router-link :to="{name:'testDemo',params:{setid:1111222}}">
 <button>点击跳转3</button>
</router-link>

2：this.$router.push()

<template>
 <div id='test'>
 <button @click='goTo()'>点击跳转4</button>
 </div>
</template>
<script>
 export default{
    
 name:'test',
 methods:{
    
 goTo(){
    
 //直接跳转
 this.$router.push('/testDemo');
  
 //带参数跳转
 this.$router.push({
    path:'/testDemo',query:{
    setid:123456}});
 this.$router.push({
    name:'testDemo',params:{
    setid:111222}});
 }
 }
 }
</script>

详情

css

介绍一下标准的CSS的盒子模型? 与低版本IE的盒子模型有什么不同的?

标准盒子模型:宽度=内容的宽度(content) + border + padding + margin

低版本IE盒子模型:宽度=内容宽度(content+ border+padding) + margin

用来控制元素的盒子模型的解析模式，默认为content -box

context -box: W3C的标准盒子模型，设置元素的height /width属性指的是content部分的高/宽

border-box: IE传统盒子模型。设置元素的hei ght/wi dth属性指的是border + padding + content部分的高/宽

CSS选择器有哪些?哪些属性可以继承?

CSS选择符: id选择器( #myid)、类选择器( . myclassname)、标签选择器(div, h1，p)、 相邻选择器(h1 +p)、子选择器(ul > li)、
后代选择器(li a)、通配符选择器 (*)、属性选择器 (a[rel=“external”]) 、伪类选择器(a: hover，li :nth-child)

可继承的属性: font-size，font-family, color

不可继承的样式: border ，padding， margin, width，height

优先级(就近原则):!important>[id>class>tag]
! important比内联优先级高

CSS3有哪些新特性?

background-image background-origin(content -box/ paddingbox/bor der-box) background-size

background-repeat

word-wrap (对长的不可分割单词换行) word-wrap: break-word 

文字阴影: text-shadow:
5px 5px 5px #FF0000; (水平阴影，垂直阴影，模糊距离，阴影颜色)

font-face属性:定义自己的字体

圆角(边框半径) : border-radius属性用于创建圆角

边框图片: border-image: url(border.png) 30 30 round

盒阴影: box-shadow: 10px 10px 5px #888888

媒体查询:定义两套css，当浏览器的尺寸变化时会采用不同的属性

js 字符串操作函数?

concat()-将两个或多个字符的文本组合起来，返回一个新的字符串。

indexOf)-返回字符串中一个子串第一处出现的索引。 如果没有匹配项，返回-1。

charAt)-返回指定位置的字符。

lastlndexOf()-返回字符串中一个子串最后一处出现的索引， 如果没有匹配项，返回-1。

substr()函数-返回从string的startPos位置，长度为length的字符串

slice()-提取字符串的一部分，并返回一个新字符串。

replace()-用来查找匹配一个正则表达式的字符串,然后使用新字符串代替匹配的字符串。

split()-通过将字符串划分成子串，将一个字符串做成一 个字符串数组。

length-返回字符串的长度,所谓字符串的长度是指其包含的字符的个数。

toLowerCase()-将整个字符串转成小写字母。

toUpperCase()-将整个字符串转成大写字母。

详情

怎样添加、移除、移动、复制、创建和查找节点?

1)创建新节点

createElement() //创建一个具 体的元素

2)添加、移除

appendChild() /添加
removeChild() //移除

3)查找

document.getElementsByTagName() //通过标签名称获取的是数组

document.getElementsByName() //通过元素的Name属性的值

document.getElementByld) //通过元素ld,唯-性

document.querySelector(#id')查找元素唯一性

document.querySelectorAl( #id)查找元素获取的是数组

GET和POST的区别，何时使用POST?

GET和POST的区别:

GET: 一般用于查询数据，使用URL传递参数，由于浏览器对地址栏长度有限制，所以对使用get方式所发送信息的数量有限制，同时浏览器会记录(历史记录,缓存)中会保留请求地址的信息，包括地址后面的数据。
get 只能发送普通格式(URL 编码格式)的数据。

POST: 一般用于向服务器发送数据，对所发送的数据的大小理论上是没有限制，浏览器会缓存记录地址，但是不会记录post提交的数据。post 可以发送纯文本、URL编码格式、 二进制格式的字符串,形式多样。

在以下情况中，请使用POST请求:
1.以提交为目的的请求(类似语义化, get 示请求, post 表示提交) ; .
2.发送私密类数据(用户名、密码) (因为浏览器缓存记录特性) ;
3.向服务器发送大量数据(数据大小限制区别) ;
4.上传文件图片时(数据类型区别) ;

正则表达式

详情

js

JavaScript 的typeof返回哪些数据类型?

alert(typeof null); // object

alert(typeof undefined);  // undefined

alert( typeofNaN); // number

alert(NaN == undefined);// false

alert(NaN == NaN);// false

var str ="123abc"
alert(typeof str++); // number

alert(str); // NaN

例举至少3种强制类型转换和2种隐式类型转换?

1.强制类型转换:

明确调用内置函数，强制把一种类型的值转换为另-种类型。强制类型转换主要有:
Boolean、Number、String、 parselnt、 parseFloat

2.隐式类型转换:

在使用算 术运算符时，运算符两边的数据类型可以是任意的,比如，一个字符串可以和数字相加。之所以不同的数据类型之间可以做运算，是因为JavaScript引擎在运算之前会悄悄的把他们进行了隐式
类型转换。隐式类型转换主要有: +、一、==、 !

JavaScript的事件流模型都有什么?

事件流描述的是从页面中接收事件的顺序。DOM 结构是树形结构,页面中的某一个元素触发了某个一 个事件,事件会从最顶层的window对象开始，向下传播到目标元素，途径的祖先节点都会触发对应的事件，如果当前节点的该事件绑定了事件处理函数的话，则会执行该函数当事件达到目标元素并执行绑定函数(如果有绑定的话)后，事件又会向.上传播到window元素，途径的祖先节点都会触发对应的事件(如果绑定事件处理函数的话)

事件流包含三个阶段:
●事件捕捉阶段
●处于目标阶段
●事件冒泡阶段
事件捕捉阶段:事件开始由顶层对象触发,然后逐级向下传播，直到目标的元素;
处于目标阶段:处在绑定事件的元素上;
事件冒泡阶段:事件由具体的元素先接收,然后逐级向上传播，直到不具体的元素;|

请简述AJAX及基本步骤?

建议回复:
简述AJAX: AJAX即"Asynchronous Javascript And XML”(异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

AJAX基本步骤:
1.初始化ajax对象
2.连接地址，准备数据
3.发送请求
4.接收数据(正在接收,尚未完成)
5.接收数据完成
//初始化ajax对象var xhr =new XMLHttpRequest(); //连接地址，准备数据; xhr . open("方式”，"地址”，是否为异步); //接收数据完成触发的事件 xhr . onload =function(){}~//发送数据“xhr .send();

HTTP 状态消息200 302 304 403 404 500分别表示什么?

●200:请求已成功，请求所希望的响应头或数据体将随此响应返回。

●302:请求的资源临时从不同的URI响应请求。由于这样的重定向是临时的，户端应当继续向原有地址发送以后的请求。只有在Cache-Control或Expires中进行了指定的情况下，这个响应才是可缓存的。

●304:如果客户端发送了一个带条件的GET请求且该请求已被允许,而文档的内容(自上次访问以来或者根据请求的条件)并没有改变,则服务器应当返回这个状态码。304响应禁止包含消息体，因此始终以消息头后的第一个空行结尾。

●403: 服务器已经理解请求,但是拒绝执行它。

●404:请求失败,请求所希望得到的资源未被在服务器上发现。

●500:服务器遇到了-个未曾预料的状况，导致了它无法完成对请求的处理。一 般来说，这个问题都会在服务器端的源代码出现错误时出现。

转载：https://blog.csdn.net/Lily68910/article/details/115453781