前端知识学习01

前端知识学习01

1.跨域

什么是跨域?

协议,域名,端口,只要有一个不一样的就认为是跨域。

怎么解决,设置请求头

response.setHeader(“Access-Control-Allow-Origin”,”*”); 中文意思:访问控制允许来源

2.基本数据类型

7种基本类型:stringnumberbigintbooleannullundefinedsymbol (ECMAScript 2016新增)。

3.vue2和vue3有哪些不同?

响应式上:

vue2的响应式是通过object.defineproperty实现的,JavaScript对象传入vue实例的时候,vue,会遍历所有的peoperty,并通过object.defineporperty把这些property转化为getter和setter,当数据发生变化的时候触发视图的更新,有缺陷,不能监听对象属性的添加和删除

vue3通过Proxy(代理)实现数据读取和拦截,在拦截trap中实现数据依赖和触发视图更新的操作。

写法上:

  1. vue3的Template标签支持多个根标签,vue2不支持。
  2. 用v-model代替v-model和.sync
  3. 新增context.emit与this.$emit作用相同
  4. 父组件使用v-slot:插槽名

生命周期:

vue3:

  • setup开始创建组件
  • onbeforeMount组件挂载到页面之前执行
  • onMounted 组件挂载到页面之后执行
  • onBeforeUpdate组件更新之前
  • onUpdated组件更新之后

ps:生命周期在调用前需要先引入

vue3新加入了对TS和PWA的支持

声明基础类型变量与对象变量时一样区别使用 ref 和 reactive

组合函数返回响应式对象时使用 toRefs

4.怎么实现一个垂直居中布局

  1. 父绝子相,子元素top:50%;left:50%;transform: translate(-50%,-50%);
  2. 采用flex布局,对align-items和justify-content设置center属性
  3. 采用grid布局,父元素display:flex;子元素设置margin:auto;

5.怎么实现一个左侧固定300px,右侧自适应布局

  1. .left{
        flex-basis: 300px;
        flex-shrink:0 ;
    }
    .main{
        flex-grow: 1;
    }
    
  2. .left{
       width:300px
    }
    .main{
        flex:1;
    }
    
  3. 左侧300px,右侧100%

  4. grid布局 grid-template-columns:300px 1fr;

6.怎么实现图片懒加载

可以利用getBroundingCliendRect() API来实现,如果elem.getBoundingClientRect().top < document.documentElement.clientHeight

就让elem.src = elem.dataset.src,还可以加上一个节流函数,具体实现代码如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0px;
        padding: 0px;
      }

      body {
        margin: 0px;
        padding: 0px;
      }

      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    </style>
  </head>

  <body>
    <div class="demo">
      <img
        data-src="https://cdn.pixabay.com/photo/2021/08/24/15/38/sand-6570980_960_720.jpg"
        alt="1"
      />
      <img
        data-src="https://cdn.pixabay.com/photo/2013/02/21/19/06/drink-84533_960_720.jpg"
        alt="2"
      />
      <img
        data-src="https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_960_720.jpg"
        alt="3"
      />
      <img
        data-src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"
        alt="4"
      />
      <img
        data-src="https://cdn.pixabay.com/photo/2017/03/26/21/54/yoga-2176668_960_720.jpg"
        alt="5"
      />
      <img
        data-src="https://cdn.pixabay.com/photo/2021/08/24/15/38/sand-6570980_960_720.jpg"
        alt="1"
      />
      <img
        data-src="https://cdn.pixabay.com/photo/2013/02/21/19/06/drink-84533_960_720.jpg"
        alt="2"
      />
      <img
        data-src="https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_960_720.jpg"
        alt="3"
      />
      <img
        data-src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"
        alt="4"
      />
      <img
        data-src="https://cdn.pixabay.com/photo/2017/03/26/21/54/yoga-2176668_960_720.jpg"
        alt="5"
      />
    </div>
  </body>
  <script>
    
    const demo = document.querySelectorAll("img");
    // 懒加载函数
    function lazy() {
      //循环
      for (let elem of demo) {
        //如果getBoundingClientRect().top小于视窗高度
        if (elem.getBoundingClientRect().top < document.documentElement.clientHeight) {
          if (elem.dataset.src && elem.src == "") {
            elem.src = elem.dataset.src;
          }
        }
      }
    }
    // 节流
    function throttle(t, fn) {
      let time;
      return function () {
        if (!time) {
          time = setTimeout(() => {
            time = null;
            fn();
          }, t);
        }
      };
    }
    lazy();
    window.addEventListener("scroll", throttle(500, lazy));
  </script>
</html>
    原文作者:侠客小飞
    原文地址: https://www.cnblogs.com/ma1998/p/16226837.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞