表达面试题

表达面试题

1成都道引科技有限公司==》

1.画图描诉盒子模型

2.js原型链与闭包

3.用flex实现九宫格布局

4.在使用vue全家桶时，简述，登录和注册的操作，

5.购物车的数据结构

2成都超网有限公司

技术问题:

1vue生命周期    

2==》闭包的作用

3==》如何实现一个盒子水平垂直居中    

4vue双向绑定原理      

5常用的vue指令

6==》vue和react的区别

他们的区别并不是特别的大

1==》（vue）是一个轻量级的框架  react是以及重量级的框架

2==》react是类式的写法，api很少，  而vue是声明式的写法，api多

3==》模板渲染方式的不同  

React 是通过JSX渲染模板     而Vue是通过一种拓展的HTML语法进行渲染

10==》v-if和v-show的区别，以及应用场景

应用的场景==》如果某个元素经常的显示或者吟唱起来，建议使用v-show;  

如果某个元素创建出来之后，以后可能在也会在使用了，使用v-if

11==》箭头函数和普通function函数的区别）

1==》箭头函数是匿名函数，不能作为构造函数，因此不能够使用new

2==》箭头函数不能绑定arguments

3==》箭头函数没有原型属性

4==》箭头函数的 this 永远指向其上下文的  this ，任何方法都改变不了其指向，如 call() ,  bind() ,  apply()

普通函数的this指向调用它的那个对象

12==》vue嵌套路由

嵌套路由就是路由里面嵌套他的子路由    子路由关键属性children

<router-link to="/父路由的地址名字/要去的子路由的名字"></router-link>

13==》vue路由的原理

1.一种是# hash   ,    在地址中加入#以欺骗浏览器，地址的改变是由于正在进行页内导航

通过改变浏览器地址URL，在不重新请求页面的情况下，更新页面视图

有两种方式:（了解）

2.一种是h5的history  ,     使用URL的Hash来模拟一个完整的URL

14==》怎么处理兼容问题

(1)通过hask的方式  

Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式，让不同的浏览器的也可以表现为一致性。    

15==》浅谈前端安全以及如何防范？

XSS是一种web应用中的计算机安全漏洞，它允许恶意web用户将代码植 入，XSS攻击的危害有：主要是盗取用户的信息，先网站发起攻击。如何解决：

XSS攻击的具体表现：1、JavaScript代码注入

1==》采用的模式匹配，“javascript”这个关键字进行检索，一旦发现提交信息中包含“javascript”，就认定为XSS攻击。

2==》对所有用户提交内容进行可靠的输入验证，

16==》$route和$router的区别

$route对表示当前的路由信息，包含了当前 URL

$router为VueRouter实例，主要是使用路由的跳转使用。

<script>
       for(var i=0;i<3;i++){
           setTimeout(function(){
               console.log(i);
           },0);
           console.log(i);
       }
     </script>

0   1    2    然后是3个3

17==》Px和rem和em的区别

1=》px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的

2=》em是相对长度单位。相对于当前对象内文本的字体尺寸

1. em的值并不是固定的；   2. em会继承父级元素的字体大小。

默认它相对的是浏览器默认的字体尺寸（16px）。

3=》rem是CSS3新增的一个相对单位；仍然是相对大小，但相对的只是HTML根元素。

项目如何优化

（较少图片的体积） 图片较多的情况下使用懒加载    使用雪碧精灵图

18第五题： JS中检测变量为string类型的方法

var aa = "hello world";
         function stringCheck (str) {
         if(typeof str =="string" || str.constructor == String) {
         return true;
         } else {
         return false;
         }
         }
         console.log(stringCheck(aa)) ;

18.第一次页面加载会触发哪几个钩子？

答：会触发 下面这几个beforeCreate, created, beforeMount, mounted 。

19vue实现数据双向绑定原理：

采用数据劫持 结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调

它是一个导航钩子

20beforeEach主要有3个参数to，from，next：

to：route即将进入的目标路由对象，  from：route当前导航正要离开的路由next：

function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

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

答：数据驱动、组件系统

6.vue常用的修饰符？

答：.prevent: 提交事件不再重载页面；.stop: 阻止单击事件冒泡；.self: 当事件发生在该元素本身而不是子元素的时候会触发；

7.v-on 可以绑定多个方法吗？

答：可以

21什么是盒模型

把所有的网页元素都看成一个盒子，它具有：content，padding，border，margin四个属性，这就是盒子模型

盒子模型有两种形式：标准盒子模型，怪异盒子模型

22css有哪些定位

Relative

相对定位方式，相对于自己原来的位置进行移动。

Absolute

绝对定位方式，脱离文档流，不会占用页面空间。

以最近的非static定位的父级元素作为参考进行定位，

如果其所有的父级元素都是static定位，那么此元素最终则是以当前窗口作为参考进行定位

3.fixed

固定定位，固定盒子不随网页滑动而移动

固定定位盒子也脱标

23如何实现元素垂直水平居中

第13题==》让元素水平 垂直居中的三种方式

/* 第一种方式 绝对定位 距离石中玉为0 最后margin:auto 兼容性：,IE7及之前版本不支持 这种方式的兼容性是最好的了*/
         div {
            width: 200px;
            height: 200px;
            background: green;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
        /* 第二种方式 div绝对定位   【margin 负间距】*/
        /* div {
            width: 200px;
            height: 200px;
            background: green;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -100px;
        } */
        /* 第三种方式 用了css3的知识 div绝对定位水平垂直居中【Transforms 变形】  IE8不支持*/
        div {
            width: 200px;
            height: 200px;
            background: green;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);

Jq的选择器

一、基本选择器

二、层次选择器  ul li   parent > child    prev + next     prev ~ siblings

三、属性选择器  [attribute]   [attribute=value]  [attribute!=value]    

[attribute^=value]

四、 表单选器

在php中null  “”  ‘’ 0 都会转化为false

2.3s后进行渐变哦

div {
            width: 200px;
            height: 200px;
            background: #000;
            transition: all 2.3s;
        }
        div:hover {
            background: #fff;
        }