可以使用`ref`和`onMounted`来获取滚动高度。

首先，在模板中给需要获取滚动高度的元素加上`ref`属性，例如：

<template>

<div ref="scrollWrapper" class="scroll-wrapper">

<!-- 内容 -->

</div>

</template>

图片懒加载

前端发展过程中有许多性能优化的操作，比如防抖、节流和图片懒加载等。在这里我们首先聊聊图片懒加载操作。

在最近的618中，我们会经常逛像淘宝和京东等购物平台。那你觉得在淘宝页面中的图片资源是打开页面时就一次性全部加载完了呢，还是在你滚轮滚动到的区域才加载图片呢。

一次性全部加载会导致加载时间长、网络资源消耗大、内存占用率高和发出大量图片请求给服务器带来的巨大压力。

本内容是《Web前端开发之Javascript视频》的课件，请配合大师哥《Javascript》视频课程学习。

文档坐标和视口坐标：

元素的位置是以像素来度量的，向右代表x坐标的增加，向下代表y坐标的增加；但是，有两个不同的点作为坐标系的原点：元素的x和y坐标可以相对于文档的左上角或者相对于视口的左上角，也就是对于一个元素来说，会有两种坐标：文档坐标和视口坐标；视口坐标也被称为窗口坐标；

在CSS中，height: 100vh; 是一个用于设置元素高度的属性值。这里，vh 是一个相对单位，它代表“视口高度”（Viewport Height）的百分比。具体来说，1vh 等于视口高度的 1%。

当你为一个元素设置 height: 100vh; 时，你实际上是在告诉浏览器，你希望这个元素的高度占据整个视口（通常是浏览器窗口或包含它的框架）的高度。

以下是一个设置了100vh的例子，看到登录注册离顶部到该100高度

最近，我的大学同学和他的几个前同事在筹备开公司，准备合伙创业了，要我帮他们做一个网站，我选择了Django这个框架来开发，因为相对其他的框架我对它更熟悉，Django也是一款快速开发网站的优秀框架，Pinterest、纽约时报等不少知名网站也都使用了Django框架。

在使用Django进行Web开发时，上传和显示图片是一个非常常见的需求。然而，有时我们可能会遇到图片上传成功后无法在前端正确显示的问题。以下是一个我实际遇到的解决案例，我将通过这个案例来介绍如何正确地在Django中处理上传图片的显示问题。

您好，我是“前端就业加油站”的面试官。请问，在网页开发中，有哪些方法可以加载CSS呢？在网页开发中，可以通过以下四种方式加载CSS：

·1.在标签内部添加内部样式：例如，在下面这个div标签中，使用红色字体：div style="color：red">红色字体：</div>。

·2.通过内嵌样式，即在head头部标签之间添加<style>...</style>。

考虑对人的描述方式

人 {
   身高:175cm;   
    体重:70kg;   
    肤色:黄色
}

CSS基本语法结构

今天要学习的是CSS，CSS是什么？

CSS指的是层叠样式表，它和HTML是一对好朋友，可以对HTML网页进行修饰。

为什么要学CSS？

要想让浏览器显示以下内容：

以我们所学的知识，就需要一个一个的去添加 font 样式：

非常麻烦，一个网页可能有几百个样式要设置，难道一个一个的去添加吗？即使你很有耐心，这么多的样式全写在一个页面（CSS会新建一个专门存放样式的页面），别说别人了，自己看了都觉得乱。

组件式开发选择合适的css解决方案尤为重要

第01阶段.前端基础.CSS初识

CSS层叠样式表

学习目标