两个月亮

文档流是指网页上元素的 默认布局顺序。在 CSS 中，显示模式指的是 HTML 元素在文档流中 如何被渲染和布局的一种特性，不同的显示模式决定了元素如何占据空间以及与其他元素相互交互的方式。CSS 中存在 三种十分常见的显示模式，即块级元素，内联元素，内联块级元素。想象你有一本书，这本书中的内容是 从上到下，从左到右 顺序阅读的。同样的，HTML文档的元素默认也是从上到下，块级元素会垂直排列，内联元素会水平排列。

HTML 实体编码的解释是与当前 HTML 解析器的状态相关的。在某些状态下，HTML 解析器可以正确地解析实体编码，而在其他状态下，它可能无法正确地解析实体编码。HTML 解析器仅能够在部分状态下解析 HTML 实体编码，这是为了避免在不应该使用实体编码的上下文中使用它们，从而导致解析错误或安全漏洞。HTML 规范对实体编码的使用有详细的规定，开发人员应该遵守这些规定来确保 HTML 代码的正确解析和安全性。HTML 解析器能够在属性值状态、文本状态及 RCDATA 状态（包括但不限于）下解析 HTM

HTML 解析器是一种将 HTML 文本解析为 DOM（Document Object Model） 树的程序。HTML 解析器通常分为两个部分：词法分析器和语法分析器。词法分析器将 HTML 文本分解成一个个词法单元（token），例如标签、属性、文本等。语法分析器将这些词法单元组合成一棵 DOM 树，并验证 HTML 文档的语法正确性。状态机（State Machine）是一种用来描述对象或系统的行为的抽象概念。它是由一组状态、一组转移条件和一组动作组成的。在任何时候，状态机只能处于其中一种状态。当满足

CSS 是一系列的样式声明，当多个 CSS 片段对同一目标的同一CSS 属性进行赋值操作时，将发生冲突。CSS 层叠提出了一系列规则，它决定了如何解决冲突，是 CSS 语言的基础。首先，你将使用 CSS 层叠规则中的 权级规则对声明的优先级进行判断。在判断无果后，你将使用权重规则对声明的优先级进行判断。若仍旧没有结果，那么你将使用顺序规则对声明的优先级进行判断。

实现界面自适应，避免产生窗口尺寸变化导致的空白区域，影响美观。这里我们将实现双击页面进入或退出全屏显示的效果。在三维计算机图形学中，视锥体（英语：viewing frustum）又称视景体、视锥，是三维世界中在屏幕上可见的区域，即虚拟摄像机的视野。仅改变了画布大小，并没有改变视锥体的宽高比，所以在我们更改画布大小后场景中的元素将被拉伸。

在浏览器中，网页的缩放改变的内容其实是当前页面所使用的设备像素比，放大页面将增大设备像素比，缩小页面将减小设备像素比。在 JavaScript 中，你可以使用 console.log(window.devicePixelRatio);来输出当前设备在当前页面使用的设备像素比。

在浏览器提供 requestAnimationFrame() API 前，这类工作是通过 setInterval() 函数来进行的。现代浏览器通过 requestAnimationFrame() 函数为稳定而连续的渲染场景提供了良好的解决方案。通过 requestAnimationFrame() 函数，你可以向浏览器提供一个回调函数。你无需定义回调间隔，浏览器将自行决定最佳回调时机。你需要做的是在这个回调函数中完成每一帧的需要进行的绘制操作，然后将剩下的工作交由浏览器处理，浏览器将赋值使场景绘制尽量高效和平

Vite 采用了与 Webpack 截然不同 unbundle 机制。Vite 在将项目打包到生产环境时，使用的工具是 Rollup。因此，Vite 相比于 Webpack 的优势主要体现在开发阶段。Vite 使用原生 ESM 文件，无需打包，可以更快速的为客户提供服务。

全局前置守卫是导航守卫中的一种，是最常使用的导航守卫。全局前置守卫将在当前网站的任何页面发生跳转时触发，因此，你可以使用该守卫控制用户对某一路径的访问权限。

Vue Router 是 VueJS 官方提供的路由插件，使用该插件你将能更加便利的管理 VueJS 创建的单页面应用程序（Single Page Web Application，SPA）中的组件间的动态切换。你可以使用 a 元素代替 router-link 元素，但并不推荐这么做。使用 router-link 而不是 a 元素可以使你获得来自 vue-router 的更多帮助。

在 VueJS 中，路由可以理解为 Hash 地址 与 组件 的映射关系。由于 VueJS 构建的是单页面应用程序，在构造具有如下效果的页面时，无法直接切换页面（因为仅有一个页面），但可以通过切换组件来达到相同的效果。路由在 VueJS 及 Web 后端中的概念稍有不同，但都表示某两者之间的映射关系。锚点是网页制作中超级链接的一种，是一种能够定位当前页面的元素的超级链接。

VueJS 允许你注册自定义指令，以便封装对 DOM 元素的重复处理行为，提高代码的复用率。VueJS 中的自定义指令分为两类，即全局自定义指令及私有自定义指令。其中，私有自定义指令仅允许当前组件（定义该指令的组件）使用，而全局自定义指令允许当前项目中的任何组件使用。你可以通过终端directives节点来定义私有自定义指令。

在对组件进行封装时，我们可能需要提供一个接口，使得组件的使用者可以向该组件提供模板或其他组件以供当前组件使用，而这个接口就是插槽。在为插槽命名后，你可以通过插槽的名称向对应的插槽提供内容。如果你需要向插槽的使用者提供一些数据，那么你可以通过作用域插槽的方式向插槽的使用者提供数据。在对组件进行封装时，我们可能需要提供一个接口，使得组件的使用者可以向该组件提供模板或其他组件供当前组件使用，而这个接口就是插槽。父组件模板中的表达式只能访问父组件的作用域，子组件模板中的表达式只能访问子组件的作用域。

在组件的动态切换过程中，存在组件的生成与销毁过程。在切换组件后，原组件将被销毁。再次切换为原组件时，由于组件经历了再生成的过程，组件中的数据都将处于初始状态。在实现组件的动态切换功能时，你可能会想保持这些组件的状态，以避免反复重新渲染导致的性能问题。我们可以使用 keep-alive 元素达成该目的。

你将能够获得该组件对应的 Vue 实例对象，这意味着父组件对子组件的每一个属性和方法都拥有有完全的访问权。虽然 Vue 的声明性渲染模型为我们抽象了大部分对 DOM 的直接操作，但在某些情况下，我们仍然需要直接访问底层 DOM 元素。当你在 Vue 中更改响应式状态时，最终的 DOM 更新并不是同步生效的，而是由 Vue 将它们缓存在一个队列中，直到下一个。密码输入框中的内容与数据达成了双向绑定，密码输入框中的内容变换将导致数据发生变化，组件将因此进入。按钮添加 “状态”，在进入生命周期函数后，我们将对。

组件从创建到销毁的这一系列过程被称为组件的生命周期。在Vue中，组件生命周期的节点会被定义为一系列的方法，这些方法称为生命周期钩子。有了这些生命周期方法，我们可以在合适的时机来完成合适的工作。下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。每一个 Vue 组件都是一个通过 Vue 构造函数创建的实例。// 使用生命周期钩子（在 DOM 节点更新前执行该函数）// 使用生命周期钩子（在 DOM 节点更新后执行该函数）

为了选择当前组件的子组件中的元素进行样式设置，先使用属性选择器选择自定义属性以指定当前组件（不同的组件 ，VueJS 为其分配的自定义属性 data-v-* 不同），再通过后代选择器选择当前组件的后代组件中的相应元素。深度选择器可以在保证不发生全局样式冲突的前提下，将父组件中的样式应用到子组件（准确来说应该是当前组件的所有后代组件）中。在使用深度选择器时，你的编辑器也许会在深度选择器下显示红色波浪线以提示开发者代码编写错误，请不要理会，深度选择器在 VueJS 中是合理的。元素中，就能够避免发生样式冲突。

组件实例的作用域是孤立的。也就是说，子组件的是无法直接获取到父组件中的数据的。VueJS 为组件开发提供了 props，通过 props ，父组件中的数据将能够传递给子组件，而子组件则需要提前对 props 进行声明以便接收父组件传递过来的数据。在对通用组件进行封装时，合理地使用 props 能够提升组件的复用性。我们可以在使用组件时，通过使用在子组件中使用 props 定义的属性来向子组件传递数据。细节驼峰式命名排斥现象HTML 是 不区分大小写的。如果在一个 HTML 元素中存在多个同名属

组件化的目的，是为了让页面中的各个部分可以被复用，以减少重复的代码。另一方面，也可以更好地使团队分工协作，让不同的人负责编写不同的组件。

在下图中，左下角的红色方块代表第一个控制点，右上角的红色方块代表第二个控制点。函数的最后一个参数我们可以获得一个可以与当前图形互补成圆形的图形。函数会将绘制的图形的首尾进行连接，所以我们仅使用。/* 使 body 元素内的元素均居中显示 *//* 设置 Canvas 元素的边框样式 */// 如需运行示例，请将后续示例代码插入此处。/* 去除部分元素的默认属性 *//* 设置圆角半径 */

Canvas 元素已被大多数浏览器所支持，如果你担心旧版本浏览器无法显示 Canvas 元素，你可以在 Canvas 元素内部嵌套另一个元素（替补元素）。如果浏览器支持 Canvas 元素，则 Canvas 元素内部嵌套的另一个元素将被忽略；如果浏览器不支持 Canvas 元素，则 Canvas 元素将被忽略，而其内部的元素将正常发挥作用。，否则该元素后的元素都将被认为是 canvas 元素的替补元素。函数来为直线的绘制指定绘制的起点，那么上一条直线的终点将作为下一条直线的起点（第一条直线的起点必须使用。

filter 属性可以为当前元素添加滤镜，blur() 函数用于将元素中的像素进行适当的偏移，以产生到模糊的效果。该伪元素的面积比 #card 元素稍大，将该元素压在 #card 的下方，通过适当的偏移，就能得到一个具有流光的边框效果。

@property CSS Houdini API 的一部分，它允许开发者显式地定义他们的 CSS 自定义属性, 允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。接下来，我们将探索 CSS 变量与自定义属性的区别以及适合使用自定义属性的部分场景。

在该部分代码中，你如果没有为 ul 设置宽高，则 li 标签在动画过程中将发生轻微的抖动（在 li 标签使用的动画处于静止状态时）。animation 在 CSS 中常用来为选中的元素指定使用的动画并对动画的播放进行设置（如指定动画的持续时间）。

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统。栅格系统实现的原理非常简单，仅仅是通过定义容器大小，平分为 12 份，再调整内外边距，最后结合媒体查询，即制作出强大的响应式栅格系统。

Vue CLI 是 Vue.js 开发的标准工具，它简化了开发者基于 webpack 创建工程化 Vue 项目的过程。Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作，基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。为了确保适当的渲染和触摸缩放所有设备，添加响应的。源码包包含了编译版中的所有文件并在此基础上有所扩充，这里我将下载 Bootstrap 的编译版本。如果你需要在你的 WEB 项目中使用 Bootstrap，你需要进行如下的准备工作。文件，并将其包含于项目文件中，具体的包含规则已在本文前面讲述。

将 jQuery 对象转换为 DOM 对象得到的将是一个包含 DOM 对象的数组，我们还需要将 DOM 对象从这个数组中取出来。，即倡导写更少的代码，做更多的事情。可以看到控制台中打印了该 DOM 对象，DOM 对象中包含了一些列属性和方法，你可以使用它们。由于使用 jQuery 时常需要操作 DOM，所以将 jQuery 代码放入。方法将 jQuery 对象转换为 DOM 对象时我们得到了这个结果。方法，我们可以将 jQuery 对象转换为 DOM 对象。也就是说，你可以将 jQuery 代码中出现的。

该项目文件中我已对代码进行了注释。如遇不懂的地方，请尝试查看相关注释。// 鼠标悬停于目标元素上时，目标元素的放缩倍数。// 指定用于创建日历的 HTML 容器。// 显示 ">" 及 "

当使用 data-tilt-{option} 及 VanillaTilt.init() 同时对配置选项进行设置时，将优先使用 data-tilt-{option} 提供的配置，VanillaTilt.init() 的所有配置都将失效。

仅用于指定日历应用 dyCalendarJS 提供的样式的 HTML 容器，不为 HTML 容器应用该类时，你将无法使用 dyCalendarJS 提供的样式。你可以通过为 HTML 容器添加类名来设置日历的样式（这些样式由 dyCalendarJS 提供，你也可以自由发挥为日历添加自定义样式）。在创建日历前，我们需要为 HTML 容器提供您选择的 ID。函数的对象的属性来改变日历的样式，我们将在后续对这些属性进行详细的讲解。你可以通过为 HTML 容器添加类来为日历添加阴影，类的大致格式为。

即使不适用 deep 选项，我们同样也可以侦听对象中的属性的值的变化，只不过不能使得目标对象中的多个属性触发监听器，仅目标对象中的目标属性可以触发侦听器。3. 利用 deep 选项，我们可以使得多个数据共同使用同一个侦听器（使用 deep 选项后，监听的目标对象中的属性值发生变化都将触发侦听器）。当监听的目标数据为一个对象时，对象中的属性的值发生变化并不会触发侦听器。// 当输入的文本不存在于 users 中时，我们将更改输入。// 当输入的文本不存在于 users 中时，我们将更改输入。

无论你使用过滤器函数对文本进行了怎样的操作，使用过滤器对文本进行格式化的结果都将为过滤器函数的返回值，所以在对文本进行一顿操作后，请记得将结果作为过滤器函数的返回值进行返回。Vue.filter() 接收两个参数，其中第一个参数为全局过滤器函数的名称，第二个参数则为全局过滤器的处理函数。但从这个示例中由引出了一个问题，若同时存在同名的全局过滤器及私有过滤器，含有私有过滤器会优先使用哪一个过滤器呢？私有过滤器仅能被创建该过滤器的。// 使用空格来分割获取到的文本，得到包含所有英语单词的数组对象。

Promise.catch() 与 Promise.then() 类似，Promise.catch() 仅接收一个参数，你可以为该参数提供一个实参（函数），用于指定 Promise 对象的状态为。返回了一个 Promise 对象，则 Promise.then() 返回的 Promise 对象依据此类情况（Promise 对象转换为 Promise 对象）进行判断。我们可以尝试在第二个 Promise.then() 中的调用函数中返回一个特定状态（在这个例子中需要的 Promise 对象的状态应该为。

内容渲染指令能够更新元素的 textContent。{{}} 与 v-text 的功能类似，都能够更新元素的 textContent，但两者存在两个不同。v-text 会使用指定的值覆盖元素的 textContent，而 {{}} 不会影响元素 textContent 中的其他内容。执行结果：执行结果：在页面首次加载时，{{}} 中的内容如果还未编译完成，就会出现闪现问题。v-text 指令在 textContent 存在原有内容时会发生闪现现象。v-text 在 textContent 不存在原有内

html-webpack-plugin 插件可以自动地将某个路径下的文件复制到其他路径下，该文件并不会存在于物理磁盘中，在 webpack 运行过程中，该文件都将暂存于内存中，在 webpack 停止运行时，将该文件写入物理磁盘（复制的文件中所发生的修改在 webpack 中止运行后将写入原文件中）中。在对 webpack 进行配置之前，需要在项目根目录下新建 webpack 配置文件，该文件的名称为。在 webpack 结束运行前，打包后的文件都将存储在内存中，可以在项目文件根目录中访问到该文件。