前端自己平时总结

痛定思痛。 2022-03-17 14:40 433阅读 0赞

**目录**

3. 斐波那契数列1 1 2 3 5 8 13 21 。。。。 求第n个数 使用递归实现

4. 每次实例化函数的时候属性a加1

5.找出这个字符串中的所有数字

6.求出这个字符串中出现最多的字母,并求出出现多少次(忽略大小写)。

7.高度不固定的容器的上下左右的居中显示。(重点是垂直居中)

8.margin塌陷的问题，以及margin重叠问题。

9.写一个数组去重的方法

es6中去重方法：

10.一像素1px在浏览器上出现视觉上的差异，显示的粗细不一样

解决方案

11.vue中的路由跳转的方式都有哪些？

1.  router-link

2.  this.$router.push() (函数里面调用)

3.  this.$router.replace() (用法同上,push)

4.  this.$router.go(n)

5.用a标签也能跳转 \#/bbb 跳转a标签  需要加上\#   history模式改怎么写就怎么写 eg:/aaa  这样就可以

ps : 区别

this.$router.push跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面this.$router.replace跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)

this.$router.go(n)向前或者向后跳转n个页面，n可为正整数或负整数

12.vue的路由模式及修改方法

路由切换模式：\{hash/ history\}

404 错误

13、组件路由守卫

14.rem原理与简介

15.for in和for of的区别是什么？

17.display:none与visible:hidden的区别

18.js克隆一个对象

如何实现一个深拷贝呢？说起来也好简单，我们在拷贝的时候判断一下属性值的类型，如果是对象，我们递归调用深拷贝函数不就好。

19.vue scoped 深度作用选择器

Vue——组件上使用v-model

21.避免v-if和v-for用在一起

22.vue $router和$route的区别

24. 实现一个方法, 获得 url 上的参数:

--------------------

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    </html>
    <script>
        //面试题：
        // 1.
        var z = 10;
               function foo(){
                    console.log(z);//10 foo函数在外边定义的  那个时候z取值应该是最外层的那个z=10;
                }
               (function(funArg){
                    var z = 20;
                    funArg();
                })(foo);
        // 2.
           console.log('第二题的开始：');
           var data = [];
            for(var k = 0; k < 3; k++){
                    data[k] = function(){
                        console.log(k);
                    };
            }
            data[0]();//3 执行函数的时候已经是循环执行完之后啦，k=3的时候啦！
            data[1]();//3
            data[2]();//3
            // 3.请问三行 a，b，c 输出分别是什么？
             console.log('第三题的开始：');
             function fun(n,o){
                console.log(o)
                return{
                    fun:function(m){
                        return fun(m,n);
                    }
                };
             }
        var a = fun(0); a.fun(1); a.fun(2); a.fun(3);//undefined/0/0/0
        var b = fun(0).fun(1).fun(2).fun(3);//undefined/0/1/2  
        var c = fun(0).fun(1);c.fun(2);c.fun(3);//undefined/0/1/1
        // 4.问，输出分别为什么？
        console.log('第4题的开始：');
         var a = 100;
        function testResult(){
                var b = 2 * a;//NaN  NaN=2/undefined外边也声明啦 里面也声明  里面的变量提升都函数的最上面 赋值还是在下面
                var a = 200;
                var c = a / 2;//100
                alert(b);
                alert(c);
        }
        testResult();
        // 5.问，输出分别为什么？
        console.log('第5题的开始：');
        var tt = "MR_LP -->  QQ ：3206064928";
        function test(){
                alert(tt);//undefined
                var tt = "李鹏";
                alert(tt);//李鹏
        }
        test();
    // 6.实现数组翻转用算法时间 数组的 reverse()方法
    var arr1=[1,2,3,4,5,6,7,8,9,10];
    function sum(arr){
        var stop=parseInt((arr.length-1)/2);
       for(let i=0;i<=(arr.length-1);i++){
           let a=arr[i];
           arr[i]=arr[arr.length-1-i];
           arr[arr.length-1-i]=a;
           if(i>=stop){
               return arr1
           }
       }
    }
    console.log(sum(arr1));
    //7.数组求和
    var arr2=[1,2,3,4,5,6,7,8,9,10];
    var sum=0;
    for(let i=0;i<arr2.length;i++){
        if(typeof arr2[i]=='number'){
            sum+=arr2[i];
        }
    }
    console.log(sum);
    </script>

2.单行显示文字超出省略号，多行超出省略号

单行：

{
                width: 300px;
                overflow: hidden;/*超出部分隐藏*/
                white-space: nowrap;/*不换行*/
                text-overflow:ellipsis;/*超出部分文字以...显示*/
              }

显示多行，超出省略号 ：

overflow: hidden;
    text-overflow: ellipsis;
    display:-webkit-box; //作为弹性伸缩盒子模型显示。
    -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
    -webkit-line-clamp:2; //显示的行

### 3. 斐波那契数列1 1 2 3 5 8 13 21 。。。。 求第n个数 使用递归实现 ###

function demoF(n){
    	if(n<=1){
    		return n=1;
    	}
    	else if(n<=2){
    		return n=1
    	}else{
    		return demoF(n-1)+demoF(n-2);
    	}
    }
    console.log(demoF(7))

###  4. 每次实例化函数的时候属性a加1 ###

### 5.找出这个字符串中的所有数字 ###

//找出这个字符串中的所有数字
            function aaa(str) {
                //方法1:
                /*   let temp = '';
                  let arr = [];
                  for (let i = 0; i < str.length - 1; i++) {
                      if (!isNaN(str[i])) {
                          temp += str[i];
                      } else {
                          if (temp) {
                              arr.push(temp);
                          }
                          temp = '';
                      }
                  }
                  if (temp) {
                      arr.push(temp);
                  } */
                //方法2:正则方式:
                let reg = /\d+/g;
                var arr = str.match(reg);
                console.log(arr);
            }
            aaa('abc123de45fgh6789qqq111');

### 6.求出这个字符串中出现最多的字母,并求出出现多少次(忽略大小写)。 ###

## 7.高度不固定的容器的上下左右的居中显示。(重点是垂直居中) ##

CSS--几种常用的水平垂直居中对齐方法
    目录
    CSS--几种常用的水平垂直居中对齐方法
    文字的水平垂直居中
    元素的水平垂直居中
    文字的水平垂直居中
        text-align: center;
        line-height: 单前元素高度;
    元素的水平垂直居中
    1 使用绝对定位
    
       /* 需要固定宽高 */
        position: absolute;
        top:0;
        left: 0;
        bottom: 0;
        right: 0;
        width: xxx;
        height: xxx
        margin: auto;
    2 使用绝对定位+ calc()
    
        /* 需要知道具体的元素宽高值 */
        position: absolute;
        width: xxx;
        height: xxx;
        top: calc(50% - xxx/2);
        left: calc(50% - xxx/2)
    3. 使用绝对定位+transform
    
       /* 不需要知道元素的宽高 */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    4. 使用display:flex;
    
        display: flex;
        justify-content: center;
        align-items: center;
    5.display:table-cell;
    		vertical-align:middle;
    		text-align:center;
    		width:100px;	
    		height:100px;
    		background: #ddd;
    注意父级容器设置为：display:table-cell属性简介
    display：table-cell；会使元素表现的类似一个表格中的单元格td，
    利用这个特性可以实现文字的垂直居中效果。同时它也会破坏一些CSS属性，
    使用table-cell时最好不要与float以及position: absolute一起使用，
    设置了table-cell的元素对高度和宽度高度敏感，对margin值无反应，
    可以响应padding的设置，表现几乎类似一个td元素。

## 8.margin塌陷的问题，以及margin重叠问题。 ##

相信很多人都知道解决父容器不设置margin的值，只给里面的div设置一个margin-top，会有什么样的结果，就是父容器会margin-top == 子容器的margin-top值。

解决方案：

1）给父容器设置border：1px solid transparent;

2)padding>0

3)float

4)position:absolute;

5)display:inline-block;

6)overflow:hidden/auto;

另外一种情况：

两个div，上面的margin-bottom：30px;下面的：margin-top:10px;中间的间距是30px;取最大的。

解决办法：只设置一个的要么margin-top；要么margin-bottom

## 9.写一个数组去重的方法 ##

//也算事比较高级的一种，思路比较清晰   使用对象赋值检测重复

Array.prototype.unique=function(){
            let res=[];
            let obj={};
            for (let i = 0; i <this.length;i++) {
                if(!obj[this[i]]){
                    res.push(this[i]);
                    obj[this[i]]=1;
                }
            }
            return res;
        }
        let arr=[1,2,3,4,3,2,1,'你在他乡还好吗'];
        let aaa=arr.unique();
        console.log(aaa);// [1, 2, 3, 4, "你在他乡还好吗"]

方式2：filter过滤

//数组去重
    let ca=[1,2,3,4,3,2,1,{},{}];
    //方式1：过滤返回首次出现重复数据的下标等于当前的下标的数组
    /*indexOf 该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时）。如果找到一个 item，则返回 item 的第一次出现的位置。开始位置的索引为 0。
    item	必须。查找的元素。
    start	可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。
    */
    function unqueArr(arr){
        return arr.filter((item,index)=>{
            return arr.indexOf(item)==index
        })
    }
    console.log(unqueArr(ca));//[1, 2, 3, 4, {…}, {…}]

##  es6中去重方法： ##

Set ：可以接收一个数组或者是类数组对象，自动去重。

Array.from：把类数组对象、可迭代对象转化为数组。

let str=[1,2,3,3,1,NaN,NaN,undefined,undefined,null,null];
    console.log(new Set(str));//Set(6) {1, 2, 3, NaN, undefined, null}
    console.log(Array.from(new Set(str)));//[1, 2, 3, NaN, undefined, null]
    console.log([...new Set(str)]);//[1, 2, 3, NaN, undefined, null]

## 10.一像素1px在浏览器上出现视觉上的差异，显示的粗细不一样 ##

出现的问题  
最近做页面，出现一个问题，页面上有几条线，我直接写成height为1px的div,结果页面写完了发现，命名用的同一个类名，为什么显示的粗细不一样，很确定这就是一条线，用的样式一毛一样的。而且浏览器放大缩小，变成了一会粗一会细，很郁闷，有没有。觉得这是浏览器对像素处理的问题，就么有管。结果测试说会提bug,还是老老实实的改吧；  
附加图一张：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70][]

### 解决方案 ###

**第一种方式**

> div\{  
> height:5px;  
> transform:scale(1 , 0.2);  
> \};

先增加height的值，看增加到几的时候，视觉上的高度会一样，估计3px就可以了，但是不好计算所以就用了5px。  
改过如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70 1][]

## 11.vue中的路由跳转的方式都有哪些？ ##

### **1.  router-link  ** ###

1. 不带参数
     
    <router-link :to="{name:'home'}"> 
    <router-link :to="{path:'/home'}"> //name,path都行, 建议用name  
    // 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。
     
     
     
    2.带参数
     
    <router-link :to="{name:'home', params: {id:1}}">  
     
    // params传参数 (类似post)
    // 路由配置 path: "/home/:id" 或者 path: "/home:id" 
    // 不配置path ,第一次可请求,刷新页面id会消失
    // 配置path,刷新页面id会保留
     
    // html 取参  $route.params.id
    // script 取参  this.$route.params.id
     
     
    <router-link :to="{name:'home', query: {id:1}}"> 
     
    // query传参数 (类似get,url后面会显示参数)
    // 路由可不配置
     
    // html 取参  $route.query.id
    // script 取参  this.$route.query.id

### 2.  this.$router.push() (函数里面调用) ###

1.  不带参数
     
    this.$router.push('/home')
    this.$router.push({name:'home'})
    this.$router.push({path:'/home'})
     
     
     
    2. query传参 
     
    this.$router.push({name:'home',query: {id:'1'}})
    this.$router.push({path:'/home',query: {id:'1'}})
     
    // html 取参  $route.query.id
    // script 取参  this.$route.query.id
     
     
     
    3. params传参
     
    this.$router.push({name:'home',params: {id:'1'}})  // 只能用 name
     
    // 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
    // 不配置path ,第一次可请求,刷新页面id会消失
    // 配置path,刷新页面id会保留
     
    // html 取参  $route.params.id
    // script 取参  this.$route.params.id
     
     
     
    4. query和params区别
    query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
     
    params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失

### 3.  this.$router.replace() (用法同上,push) ###

### 4.  this.$router.go(n)  ###

this.$router.go(n)
    向前或者向后跳转n个页面，n可为正整数或负整数

--------------------

### 5.用a标签也能跳转 \#/bbb <a href="\#/bbb">跳转a标签</a>  需要加上\#   history模式改怎么写就怎么写 eg:/aaa  这样就可以 ###

### ps : 区别 ###

### this.$router.push   跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面   this.$router.replace   跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面) ###

### this.$router.go(n)   向前或者向后跳转n个页面，n可为正整数或负整数 ###

### 12.vue的路由模式及修改方法 ###

vue的路由模式有两种模式History和hash模式，切换方式有两种。  
默认为hash模式，修改为history的方法如下，此方法也可以修改为hash模式

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70 2][] ###

## **路由切换模式：\{hash/ history\}** ##

** 对于Vue 这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-router存在的意义。前端路由的核心，就在于——— 改变视图的同时不会向后端发出请求。**

**    .  hash(\#)：默认路由模式**

**—— 即地址栏URL中的\#符号（此hsah 不是密码学里的散列运算）**

** ** 比如这个URL：http://www.abc.com/\#/hello, hash 的值为\#/hello。它的特点在于：          hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变          hash不会重新加载页面。

**    .  histroy(/)切换路由模式**

**              —— 利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。（需要特定浏览器支持）**

\* history模式，会出现404 的情况，需要后台配置。

##  404 错误 ##

1、hash模式下，仅hash符号之前的内容会被包含在请求中，如 http://www.abc.com, 因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误；

2、history模式下，前端的url必须和实际向后端发起请求的url 一致，如http://www.abc.com/book/id 。如果后端缺少对/book/id 的路由处理，将返回404错误。

## 13、组件路由守卫 ##

// 跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫
    beforeRouteEnter (to, from, next) {
        // 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例
        next(vm => {})
    }
    beforeRouteUpdate (to, from, next) {
        // 同一页面，刷新不同数据时调用，
    }
    beforeRouteLeave (to, from, next) {
        // 离开当前路由页面时调用
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70 4][]

# 14.rem原理与简介 #

rem是css3一种新的长度单位。在W3C中有这样的定义：REM（Font size of the root element）是指相对于html根元素的字体大小的单位（注意这里泛指是相对于html中的根元素标签也就是html）。一般用于在移动端中解决多种机型适配问题。

在移动端开发时候，开发人员为了解决不同的机型适配问题。常用mediaQue(媒体查询)依据每种机型写多套适配代码。这种方法固然能解决适配问题。代码量太多了，不美观，且不利于维护。

用rem可以解决上述的问题。rem的核心在于通过动态设置根元素html的font-size。我们知道浏览器的默认的font-size是16px,(有些浏览器例外)。依据W3C中的描述相对于html中的根元素标签。也就是1rem = 16px,  16px = 1rem

## 15.for in和for of的区别是什么？ ##

虽然for… in 、 for… of 都能够变历数组，但是两者还是有很大区别的，先说结论：

两者的主要区别在于他们的迭代方式

推荐在循环对象属性的时候，使用for in，在遍历数组的时候推荐使用for of  
for…in 循环出来的是key, for…of循环出来的是value  
for…in 是ES5 标准，for …of 是ES6标准，兼容性可能存在些问题，请注意使用  
for…of 不能遍历普通的对象，需要和Object.keys() 搭配使用

break可以停止for...in和for...of循环 不能停止数组中的forEach continue也是如此

//遍历数组常用的方法 map
    //map
    let arr=['first','second','third','four','five'];
    let obj={
    	name:'yangdongxu',
    	age:29,
    	sex:'男'
    }
    // let newArr=arr.map((item)=>{
    //    return item.toUpperCase()
    // })
    // console.log(newArr); 
    // console.log(arr); 
    //for in
    // for(let i in arr){
    // 	// console.log(i);
    // 	console.log(arr[i]);
    // }
    //遍历对象也可以用for in   
    // for(let key in obj){
    // 	console.log(key);//
    // 	console.log(obj[key]);
    // }
    //for of用来遍历数组  直接遍历出来的数数组的值
    // for(let item of arr){
    //    console.log(item);//
    // }
    // //for of用来遍历对象 的时候需要 借助Object.keys() 搭配使用
    // for(let item of Object.keys(obj)){
    //    console.log(obj[item]);
    // }

16.**检测数组类型方法**

**1.Object.prototype.toString**   
Object.prototype.toString的行为：首先，取得对象的一个内部属性\[\[Class\]\]，然后依据这个属性，返回一个类似于"\[object Array\]"的字符串作为结果(看过ECMA标准的应该都知道，\[\[\]\]用来表示语言内部用到的、外部不可直接访问的属性，称为“内部属性”)。利用这 个方法，再配合call，我们可以取得任何对象的内部属性\[\[Class\]\]，然后把类型检测转化为字符串比较，以达到我们的目的。

function isArrayFn (o) {
    return Object.prototype.toString.call(o) === '[object Array]';
    }
    var arr = [1,2,3,1];
    alert(isArrayFn(arr));// true

call改变toString的this引用为待检测的对象，返回此对象的字符串表示，然后对比此字符串是否是'\[object Array\]'，以判断其是否是Array的实例。为什么不直接o.toString()?嗯，虽然Array继承自Object，也会有 toString方法，但是这个方法有可能会被改写而达不到我们的要求，而Object.prototype则是老虎的屁股，很少有人敢去碰它的，所以能一定程度保证其“纯洁性”：)   
  
JavaScript 标准文档中定义: \[\[Class\]\] 的值只可能是下面字符串中的一个： Arguments, Array, Boolean, Date, Error, Function, JSON, Math, Number, Object, RegExp, String.   
这种方法在识别内置对象时往往十分有用，但对于自定义对象请不要使用这种方法。

**2.Array.isArray()**   
ECMAScript5将Array.isArray()正式引入JavaScript，目的就是准确地检测一个值是否为数组。IE9+、 Firefox 4+、Safari 5+、Opera 10.5+和Chrome都实现了这个方法。但是在IE8之前的版本是不支持的。

**3.较好参考**   
综合上面的几种方法，有一个当前的判断数组的最佳写法：

## 17.[display:none与visible:hidden的区别][display_none_visible_hidden] ##

display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别:

display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。

visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。

# 18.[js克隆一个对象][js] #

我们知道，对象类型在赋值的过程中其实是复制了地址，所以如果改变了一方，其他都会被改变。我们应该如何克隆一个对象，并且避免这种现象的发生呢？

方法一：Object.assign

function copy(obj){
        return Object.assign({}, obj);
    }

方法二：…展开运算符

function copy(obj){
        return { …obj };
    }

方法一,方法二是浅拷贝，也就是当对象层级大于2层时，复制到的还是地址信息

let a = {age:1,
             jobs: {first:'FE’} 
            }
    let b = copy(a) 
    a.jobs.first =‘native'
    console.log(b.jobs.first)// native

方法三：JSON

function copy(obj){
        return JSON.parse(JSON.stringify( obj ));
    }

确实是深拷贝，也很方便。但是，这个方法只能适用于一些简单的情况。比如下面这样的一个对象就不适用：

发现在 `cloneObj` 中，有属性丢失了。。。那是为什么呢？

`undefined`、`function`、`symbol` 会在转换过程中被忽略。。

If undefined, a function, or a symbol is encountered during conversion it is either omitted (when it is found in an object) or censored to null (when it is found in an array). JSON.stringify can also just return undefined when passing in "pure" values like JSON.stringify(function(){}) or JSON.stringify(undefined).

明白了吧，就是说如果对象中含有一个函数时（很常见），就不能用这个方法进行深拷贝

### 如何实现一个深拷贝呢？说起来也好简单，我们在拷贝的时候判断一下属性值的类型，如果是对象，我们递归调用深拷贝函数不就好。 ###

## 19.vue scoped 深度作用选择器 ##

在vue中引入了scoped这个概念，scoped的设计思想就是让当前组件的样式不会修改到其它地方的样式，使用了data-v-hash的方式来使css有了它对应模块的标识，这样写css的时候不需要加太多额外的选择器，方便很多。

但是要注意scoped的作用域，因为权重的问题，如果是在子组件使用了scoped，那么在父组件中是不能直接修改子组件的样式的，需要在父组件中使用vue的深度作用选择器。

.parent >>> .children{ /* ... */ }
    
    .parent /deep/ .children{ /* ... */ }

20.

## [Vue——组件上使用v-model][Vue_v-model] ##

一、最近在工作过程中要实现一个搜索模糊匹配功能，考虑到组件的复用，就单独把搜索框抽出来作为一个子组件。在以往的开发中，我一般会在input框中的值变化时向父组件emit一个事件，并带上一些父组件中需要的参数（比如搜索的关键词，或者搜索之后返回的结果）

大概的实现方式如下：

父组件
    <template>
        <div>
            <search @test="getData"></search>
            <button @click="submit">提交</button>
        </div>
    </template>
    <script>
    import search from '@/components/index/search.vue'
    export default {
        data() {
            return {
                keywords: ''
            }
        },
        components: {
            search
        },
        methods: {
            getData(val){
                this.keywords = val
            },
            submit() {
                console.log('keywords:', this.keywords)
            }
        }
    }
    </script>
    
    
    子组件
    <template>
        <div>
            <input @input="inputChange" type="text" name="keywords">
        </div>
    </template>
    <script>
    export default {
        props: ['keywords'],
        methods: {
            inputChange(e) {
                this.$emit('test', e.target.value)
            }
        }
    }
    </script>

二、这次在实现的时候，我隐约记得在之前看Vue api的时候提到过，给组件添加v-model，就想用这种方式尝试一下，根据官网解释我理解：

v-model这个双向绑定相当于做了两个操作：（1）给当前这个组件添加了一个value属性 （2）给当前这个组件绑定了一个input事件；由此我修改实现方式如下：

父组件：

<template>
        <div>
            <search v-model="keywords"></search>
            <button @click="submit">提交</button>
        </div>
    </template>
    <script>
    import search from '@/components/index/search.vue'
    export default {
        data() {
            return {
                keywords: ''
            }
        },
        components: {
            search
        },
        methods: {
            submit() {
                console.log('keywords:', this.keywords)
            }
        }
    }
    </script>

子组件：

<template>
        <div>
            <input :value="value" @input="$emit('input', $event.target.value)" type="text" name="keywords">
        </div>
    </template>
    <script>
    export default {
        props: ['value']
    }
    </script>

三、总结：其实两种思路是一样的，都是子组件通过emit事件向父组件传值，但是v-model的形式更直观简单～

## 21.避免v-if和v-for用在一起 ##

v-if和v-for一起使用，v-for的优先级要高于v-if

*  为了过滤一个列表中的项目（比如`v-for = "user in users" v-if = "user.isActive"`）。在这种情况下，请将`users`替换为一个计算属性（比如`activeUsers`），让其返回过滤后的列表。
 *  为了避免渲染本应该被隐藏的列表（比如`v-for = "user in users" v-if = "shouldShowUsers"`）。这种情况下，请将`v-if`移动至容器元素上（比如`ul`，`ol`）

***详解***

当vue处理指令时，`v-for`比`v-if`具有更高的优先级，所以这个模板：

将会经过如下运算

this.users.map(function (user) {
      if (user.isActive) {
        return user.name
      }
    })

因此，哪怕我们只渲染出一小部分的用户元素，也得在每次重新渲染的时候遍历整个列表，不论活跃用户是否发生了改变。

通过将其更换为如下的一个计算属性上遍历：

computed: {
      activeUser: function () {
        return this.users.filter(function (user) {
          return user.isActive
        })
      }
    }

我们将会获得如下好处：

*  过滤后的列表只会在 users 数组发生相关变化时才被重新运算，过滤更高效。
 *  使用 `v-for = "user in activeUsers"`之后，我们在渲染的时候只遍历活跃用户，渲染更高效。
 *  解藕渲染层的逻辑，可维护性 (对逻辑的更改和扩展) 更强。

也可以把：

更新为：

通过将`v-if`移动到容器元素，我们不会再对列表中的每个用户检查`shouldShoeUsers`。取而代之的是，我们只检查一次，且不会在`shouldShoeUsers`为否的时候运算`v-for`。

反例

好例子

## 22.vue $router和$route的区别 ##

一、

router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象。。。经常用的跳转链接就可以用this.$router.push，和router-link跳转一样。。。

this.$router.push会往history栈中添加一个新的记录。。详细见vue官方文档https://router.vuejs.org/zh/guide/essentials/navigation.html

route相当于当前正在跳转的路由对象。。可以从里面获取name,path,params,query等。。

打印this.$route和this.$router。

![70][]

路由传参的方式

1.可以手写完整的path：

this.$router.push(\{path:\`/user/$\{userId\}\`\})

这样传递参数的话，配置路由的时候需要在path上加参数path：user/：userId。

这种接收参数的方式是this.$route.params.userId。

2.也可以用params传递：![70 1][]

3.也可以用query传递：

![70 2][]

query传参是针对path的，params传参是针对name的。。接收参数的方式都差不多。。this.$route.query.和this.$route.params.

注意这只是跳转url，跳转到这个url显示什么组件，得配置路由。router跳转和<router-link>标签跳转，规则差不多。

展示上的话：

![70 3][]

注意：如果提供了path，params将会被忽略，但是query不属于这种情况。。。

如果使用完整路径和query传参，刷新页面时不会造成路由传参的参数丢失。

这个vue官方文档讲的很详细。

二、

有时候配置路由时path有时候会加 '/' 有时候不加,例如path:'name'和path:'/name'。区别其实官方文档说了，我当时没仔细看，导致这个问题还困扰了我很久。

![70 4][]

意思就是以 / 开头的会被当做路径，就不会一直嵌套之前的路径。

23.异步组件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70 5][]![20200311000113989.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70 6][]

## 24. 实现一个方法, 获得 url 上的参数: ##

// 1. 实现一个方法, 获得 url 上的参数: 
    // getUrlParam('http://www.nowcoder.com?key=1&key=2&key=3&test=4#hehe'), 输出为一个对象 
    // {key: 3, test:4}
    function getUrlParam(url) { 
        //判断是否有参数 有参数才执行
         if(url&&url.includes('?')){
               let queryStr=url.split('?')[1];//获取问号后面的参数字符串
               //判断是否有#
               if(queryStr.includes('#')){
                   queryStr=queryStr.split('#')[0]
               }
               //字符串转数组
              let queryArr=queryStr.split('&');
              let res={};
              //把参数放入空数组中
              for(val of queryArr){
                   let key=val.split('=')[0];
                   res[key]=val.split('=')[1];
              }
              console.log(res);
            return res
         }else{
             return {}
         }
    }
    getUrlParam('http://www.nowcoder.com?key=1&key=2&key=3&test=4#hehe');//{key: "3", test: "4"}
    //思路：要想获取当前页面携带的URL参数，首先要获取到当前页面的地址，我们可以通过location.search来获得。取到URL地址后，可以根据&进行数据拆分，拆分出一共有多少个参数，然后再根据=获得参数的值 在赋值给空对象 返回要的结果

### 25.列出浏览器对象模型中对象，并简要说明其用途。 ###

> window对象：是最顶层的对象，表示一个浏览器窗口或一个框架。
> 
> navigator对象：包含了有关访问者浏览器的所有信息。  
> location对象：用于设置和返回当前网页的URL信息。
> 
> history 对象：包含用户（在浏览器窗口中）访问过的 URL。
> 
> screen 对象：包含访问者系统显示屏幕的信息。

### 26.[rem与em的使用和区别详解][rem_em] ###

在css中单位长度用的最多的是px、em、rem，这三个的区别是：

px是固定的像素，一旦设置了就无法因为适应页面大小而改变。

em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。

对于em和rem的区别一句话概括：**em相对于父元素，rem相对于根元素。**

rem中的r意思是root（根源），这也就不难理解了。

**em**

*  子元素字体大小的em是相对于父元素字体大小
 *  元素的width/height/padding/margin用em的话是相对于该元素的font-size

rem:当使用 rem 单位，他们转化为像素大小取决于页根元素的字体大小，即 html 元素的字体大小。 根元素字体大小乘以你 rem 值。 例如，根元素的字体大小 16px，10rem 将等同于 160px，即 10 x 16 = 160。

**总结**：

在做项目的时候用什么单位长度取决于你的需求，我一般是这样的：

像素（px）：用于元素的边框或定位。

em/rem：用于做响应式页面，不过我更倾向于rem，因为em不同元素的参照物不一样（都是该元素父元素），所以在计算的时候不方便，相比之下rem就只有一个参照物（html元素），这样计算起来更清晰。

### **27.HTTP 与 HTTPS  的区别** ###

1、HTTPS** ** 协议需要到 CA （Certificate Authority，证书颁发机构）申请证书，一般免费证书较少，因而需要一定费用。(以前的网易官网是http，而网易邮箱是 https** **。)

2、HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。

3、HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

4、HTTP 的连接很简单，是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)ying'yong

### 28.闭包和应用场景： ###

闭包：

闭包是指有权访问另外一个函数作用域中的变量的函数。可以理解为(能够读取另一个函数作用域的变量的函数)，

本质上，就是将函数内部和函数外部连接起来的一座桥梁 ，

//闭包的场景  给定时器传递参数
        function funca(num){
            let age=num;
            return function(){
                console.log(num);
            }
        }
        let func=funca(20);
        setTimeout(func,1000)

##  29.浏览器如何解析HTML： ##

浏览器如何解析HTML  
)●1.浏览器接收到HTML模板文件，开始从上到下依次解析HTML;  
●2.遇到样式表文件style1.css, 这时候浏览器停止解析HTML, 接着去请求CSS  
文件;  
●3.服务端返回CSS文件，浏览器开始解析CSS;  
●4.浏览器解析完CSS, 继续往下解析HTML, 碰到DOM节点，解析DOM;  
)●5.浏览器发现img, 向服务器发出请求。此时浏览器不会等到图片下载完，而  
是继续渲染后面的代码;  
●6.服务器返回图片文件， 由于图片占用了一定面积，影响了页面排布，因此浏  
览器需要回过头来重新渲染这部分代码;  
●7.碰到脚本文件，这时停止所有加载和解析，去请求脚本文件，并执行脚本;  
8.加载完所有的HTML、CSS、 JS后，页面就出现在屏幕上了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70]: /images/20220317/8a4cfe2a18a74331b194579e453f69ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70 1]: /images/20220317/f04348873b4941be875fbbd96eaee5b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70 2]: /images/20220317/da7bf3ee399340f69d4bcd6a286ac5d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70 3]: /images/20220317/dc40c677db4e494e879e90843f872e19.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70 4]: /images/20220317/2441518188b74d03bd73f8cc29fe80c8.png
[display_none_visible_hidden]: http://www.cnblogs.com/nicholas_f/archive/2009/03/27/1423207.html
[js]: https://www.cnblogs.com/yxqd/p/10531225.html
[Vue_v-model]: https://www.cnblogs.com/zhiying/p/11323082.html
[70]: /images/20220317/af938dce3edd43c0abedd95b8d67ef70.png
[70 1]: /images/20220317/d1631084ba244fea9872ded2e7b0113a.png
[70 2]: /images/20220317/9a07c6d7bff34af68d3aa46cec68f7f4.png
[70 3]: /images/20220317/5983a74022a04d3c8f82b21b6b9d63cc.png
[70 4]: /images/20220317/6a5436678d38481c829b1f644d163b3a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200311000059800.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy,size_16,color_FFFFFF,t_70
[20200311000113989.png]: /images/20220317/9955c369c98c407c8a344f1f0390e3b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70 6]: /images/20220317/aebd9faffd52459d837053fe61c84edf.png
[rem_em]: http://caibaojian.com/rem-vs-em.html