鸿神
鸿神

前端随笔：HTML/CSS/JavaScript和Vue

前端随笔：HTML/CSS/JavaScript和Vue_第1张图片

前端随笔 1：HTML、JavaScript和Vue

最近因为工作需要，需要接触一些前端的东西。之前虽然大体上了解过HTML、CSS和JavaScript，也知道HTML定义了内容、CSS定义了样式、JavaScript定义了行为，但是却没有详细的学习过前端三件套的细节。而最近的工作中需要使用Vue，并且想到未来的工作中使用Vue能够更好地展示成功，所以认真的学习了一些前端的知识。

因此特地准备写一些文章，将自己的一些心得和感悟记录下来，作为学习的见证和方便未来使用。

一、HTML

1. HTML语言

HTML全称是HyperText Markup Language，即超文本标记语言，一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。

需要注意的是，HTML不是一门编程语言，只是一种用于定义内容和结构的标记语言。之所以称为标记语言，是因为HTML由一系列的标签（Tag）组成，这些标签可以用来包围不同部分的内容，使其以某种方式呈现或者工作。

例如将一段文字设置为斜体：

前端随笔：HTML/CSS/JavaScript和Vue_第2张图片

需要注意的是，HTML的设计初衷是为了能够在不同的计算机系统和浏览器之间共享文档，并以一种易于阅读和编写的方式呈现信息。因此，需要经过浏览器解析，才能看到具体效果。

2. HTML标签

HTML标签是用于定义网页结构和内容的元素。它们由尖括号包围，并以标签名开始和结束，例如content。标签通常以成对的形式出现，其中包括一个开始标签和一个结束标签，中间是标签的内容。

前端随笔：HTML/CSS/JavaScript和Vue_第3张图片

不同的标签有不同的功能，例如：

被不同的标签包裹的文字将会产生不同的效果，例如超链接、粗体、斜体、……。而且，HTML标签可以嵌套在彼此之内，形成层次结构，从而为一段文字设置多个属性，例如加粗斜体，以构建复杂的网页布局和内容。

此外，HTML标签还可以具有属性包含了关于元素的一些额外信息，这些信息本身不应显现在内容中。例如下面的例子中，class 是属性名称，editor-note 是属性的值。class 属性可为元素提供一个标识名称，以便进一步为元素指定样式（即元素的外观，例如字号、字体、……）或进行其他操作时使用。

在这里插入图片描述

最后，除了开始和结束标签，有些标签也可以是自闭合的，即在开始标签中就结束。直观的理解就是标签只有一个。例如：

  • 标签用于插入图像

  • 标签用于插入换行符等
  • ……

需要注意的是，HTML标签的属性和（被包裹的）内容是两种截然不同的文本。稍后再Vue中我们还会强调这一点。

3. HTML文档

使用HTML语言编写的文档称为HTML文档，后缀名一般保存为.html、.htm、……

前端随笔：HTML/CSS/JavaScript和Vue_第4张图片

前面介绍过，HTML的设计初衷是为了能够在不同的计算机系统和浏览器之间共享文档，并以一种易于阅读和编写的方式呈现信息。因此，需要经过浏览器解析，才能看到具体效果。因此HTML自然需要通过浏览器打开。

前端随笔：HTML/CSS/JavaScript和Vue_第5张图片

通过文本编辑器打开的HTML文档只能看到其中的字符：

前端随笔：HTML/CSS/JavaScript和Vue_第6张图片

一般来说：

  • 编写HTML文档的时候，我们一般是通过文本编辑器打开HTML文档，以方便我们编写HTML源代码
  • 调试HTML文档的时候则是通过浏览器打开，以方便我们查看HTML文档的内容是否正确显示

最后在编写完HTML文档之后，我们将HTML文档发布给用户的时候，即需要阅读内容的时候，则是通过浏览器打开，从而能够浏览到具有丰富格式的网页。

最后，这里只是对HTML进行简单的介绍，还有很多内容没有介绍，例如：

  • HTML的所有标签
  • HTML文档的结构
  • ……

因为这只是随笔，我觉得这些内容应该是在编程教学书、教学视频中的，并不是我这个随笔该讲解的。所以就直接略过了。

二、JavaScript

JavaScript 堪称世界上被人误解最深的编程语言。虽然常被嘲为“玩具语言”，但在它看似简洁的外衣下，还隐藏着强大的语言特性。JavaScript 目前广泛应用于众多知名应用中，对于网页和移动开发者来说，深入理解 JavaScript 就尤为必要。

1. 历史

我们有必要先从这门语言的历史谈起。在 1995 年 Netscape 一位名为 Brendan Eich 的工程师创造了 JavaScript，随后在 1996 年初，JavaScript 首先被应用于 Netscape 2 浏览器上。

最初的 JavaScript 名为 LiveScript，但是当时社交媒体在铺天盖地的宣传 Sun Microsystem 公司所开发的 Java 语言，所以为了蹭热度， NetScape 公司将它的名字从最初的 LiveScript 更改为 JavaScript——尽管两者之间并没有什么共同点。这便是之后人们对 Java 和 JavaScript混淆产生的根源。

但是事实上，JavaScript原先的名字，LiveScript更能显示这门语言的能力：JavaScript让网页具有动态特性（Live）

具体来说，HTML编写的网页是静态的，用户只能看到一个页面。可是很多时候，我们试图和网页进行交互，例如，我们会在输入账号和密码之后点击一个登录按钮，而后我们就能在网页上浏览淘宝、将商品加入购物车。

点击登录按钮、添加购物车等等这些功能是动态地，意味着需要一定的动作的执行，但是HTML只定义了网页看起来是什么样的，正是JavaScript让静态的网页动了起来。

几个月后，Microsoft 随 IE 3 发布推出了一个与之基本兼容的语言 JScript。又过了几个月，Netscape 将 JavaScript 提交至 Ecma International（一个欧洲标准化组织），ECMAScript 标准第一版便在 1997 年诞生了。ECMAScript标准中定义了一个脚本语言应该具有的语言特性和能力，而JavaScript则是这个标准的具体实现。

我们可以简单的理解为：ECMAScript中规定了JavaScript这门语言的语法。

随后在 1999 年以 ECMAScript 第三版的形式进行了更新，从那之后这个标准没有发生过大的改动。由于委员会在语言特性的讨论上发生分歧，ECMAScript 第四版尚未推出便被废除，但随后于 2009 年 12 月发布的 ECMAScript 第五版引入了第四版草案加入的许多特性。第六版标准已经于 2015 年 6 月发布。

2. 运行时环境/宿主环境

一般来说，各种语言编写的程序需要一个运行时环境，或者说宿主环境。只有在宿主环境下，程序才能够正确运行并且产生功能。例如：

  • C/C++的运行时环境/宿主环境就是操作系统，在嵌入式开发的基础下，C/C++的运行时环境也可以是没有操作系统的裸机
  • Python的运行时环境就是Python解释器
  • Java的运行时环境是Java虚拟机
  • ……

和Python类似，JavaScript是一个在宿主环境（host environment）下运行的脚本语言。

但是和其他语言都具备输入输出能力不同，JavaScript中没有输入或输出的概念。在任何与外界沟通的机制都是由宿主环境提供的。例如JavaScript读写文件是通过浏览器的File API来读取和写入文件的。

JavaScript有多种宿主环境。浏览器是最常见的宿主环境，但在非常多的其他程序中也包含 JavaScript 解释器，如 Adobe Acrobat、Adobe Photoshop、SVG 图像、Yahoo！的 Widget 引擎，Node.js 之类的服务器端环境，NoSQL 数据库（如开源的 Apache CouchDB）、嵌入式计算机，以及包括 GNOME（注：GNU/Linux 上最流行的 GUI 之一）在内的桌面环境等等。

这些宿主环境都能够解析JavaScript语言编写程序，而后执行指定的功能。

3. JavaScript的语法特性

JavaScript 是一种多范式的动态语言。它包含类型、运算符、标准内置（built-in）对象和方法。它的语法来源于 Java 和 C，所以这两种语言的许多语法特性同样适用于 JavaScript。

JavaScript是一个支持面向对象编程的语言。但是需要注意的是JavaScript通过原型链而不是类来支持面向对象编程（有关 ES6 类的内容参考这里Classes，有关对象原型参考见此继承与原型链）。

在其他语言中，一般会有类和对象两种概念。类是创建对象的模板，创建对象的时候根据类的定义来创建，而在类中我们定义了类的继承关系，从而实现对象之间的继承等关系。所以，其他语言是根据最终依据类中的定义来决定对象之间的关系，而在运行阶段，对象与对象的关系是确定的，是无法修改的

但是在JavaScript中只有对象。每个对象（object）都有一个私有属性指向另一个名为原型（prototype）的对象。原型对象也有一个自己的原型，层层向上直到一个对象的原型为 null。根据定义，null 没有原型，并作为这个原型链（prototype chain）中的最后一个环节。可以改变原型链中的任何成员，甚至可以在运行时修改原型链。即在运行阶段对象与对象间的关系是可以修改的

JavaScript 同样支持函数式编程——因为它们也是对象，函数也可以被保存在变量中，并且像其他对象一样被传递。

4. JavaScript与事件

浏览器、Node.js这类宿主环境一般运行在操作系统中。因此这就意味着宿主环境能够和操作系统交互，从而得知用户是否按下鼠标、是否敲击键盘、……

前面介绍了，JavaScript是运行在一个宿主环境中的，因此当用户按下键盘之后，JavaScript能够通过其宿主环境得知用户按下了键盘。而后采取特定的行动来处理用户按下键盘这一行为。例如读取用户按键是否为回车，如果是则提交账号和密码，如果是一般字符则视为账号的一部分在输入框中显示……

类似的，将鼠标点击这样的事实称为事件。事件是发生在你正在编程的系统中的事情——当事件发生时，系统产生（或“触发”）某种信号，并提供一种机制，当事件发生时，可以自动采取某种行动（即运行一些代码）。

事件的概念不仅仅是在JavaScript中，在其他很多编程场景都存在这一概念。例如：

  • 使用C++编写的电脑应用，例如QT框架编写的播放器，当用户点击空格就需要暂停播放，再次点击空格就继续播放
  • ……

此时，对于事件的捕捉就是由语言自己去完成的，一般是通过框架（例如QT）。而后框架提供了执行处理对应的事件的函数的机制。对于JavaScript，事件是由宿主环境负责捕捉的，JavaScript负责处理这些事件。

有不同类型的事件可以发生，例如：

  • 用户选择、点击或将光标悬停在某一元素上。
  • 用户在键盘中按下某个按键。
  • 用户调整浏览器窗口的大小或者关闭浏览器窗口。
  • 网页结束加载。
  • 表单提交。
  • 视频播放、暂停或结束。
  • 发生错误。

为了对一个事件做出反应，你要给它附加一个事件处理器。这是一个代码块（通常是你作为程序员创建的一个 JavaScript 函数），在事件发生时运行。当这样一个代码块被定义为响应一个事件而运行时，我们说我们在注册一个事件处理器。注意，事件处理器有时候被叫做事件监听器——从我们的用意来看这两个名字是相同的，尽管严格地来说这块代码既监听也处理事件。监听器留意事件是否发生，处理器对事件发生做出回应。

例如下面的代码：


<p id="myParagraph">这是一个段落。p>
<button id="myButton">点击我button>

// JavaScript代码
const button = document.getElementById('myButton');
const paragraph = document.getElementById('myParagraph');

function random(number) {
    return Math.floor(Math.random() * (number + 1));
}

button.addEventListener('click', function () {
    const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
    paragraph.style.backgroundColor = rndCol;
});

在上面这段代码中，我们在HTML定义的网页中定义了一个按钮和一段文字，而后在JavaScript中我们为这个按钮的点击事件绑定了一个函数，这个函数随机产生一个颜色，而后将HTML中这段文字的背景颜色设置为这个随机颜色。

具体运行的效果访问链接去试一试

正如我们在上面的例子中所看到的，能够触发事件的对象有一个 addEventListener() 方法，这就是通过这个函数，我们能够为HTML中指定的标签所触发的事件添加事件处理器。

但是一个网页中，需要处理的时间很多很多，一个个手动添加很难顶。因此JavaScript中就出现了类似于Vue这样的框架，通过框架我们能够快速的添加事件处理器。不过在介绍Vue之前，我们还需要介绍JavaScript的和HTML文档的交互。

5. JavaScript与HTML文档

网页所有的内容的显示都是由HTML决定的，JavaScript只是决定了一个事件是如何被处理的。

然后在上面的例子中，我们看到了当按钮被点击之后，网页的部分的颜色直接改变了。这就意味着决定网页内容（包括背景颜色）的HTML改变了。可是在点击按钮之后，只有JavaScript的函数被运行了，我们没有重新加载网页（即刷新）网页的颜色就变了。这就意味着，JavaScript具有动态修改HTML的能力。

事实上，这就是JavaScript让网页从静态变成动态的核心：我们可以在JavaScript中动态修改HTML的元素。例如：

  • 点击按钮之后添加一个

    标签，从而添加一段文字。点击链接查看效果

  • 点击按钮之后修改

    标签的内容，从而修改原先的文字。点击链接查看效果

  • ……

正是因为JavaScript可以动态修改HTML的内容，才使得网页具有了各种各样丰富多彩的功能，才使得网页从一个单纯的文章变成了应用。

6. DOM对象

关于JavaScript修改HTML我们还需要多讲一点，就是DOM对象。其实修改HTML非常简单，无非就是增加、删除或者修改标签即可。

然而，前面在介绍HTML标签的时候介绍过，标签是可以嵌套的，例如：

<div>div标签里嵌套一个<p>p标签p>是完全合法的div>
<div>你甚至可以在div标签里嵌套另外一个<div>div标签div>，这也是完全合法的div>

此外一个网页中一个标签完全可以出现多次，例如可以出现多个

标签：

<p>p标签可以出现多次，这是第0次p>
<p>p标签可以出现多次，这是第1次p>
<p>p标签可以出现多次，还能<p>嵌套p>出现p>

可是JavaScript在进行修改的时候，到底要修改哪个

标签？由此引发的，是对HTML中的标签定位问题。

类似于操作系统的文件系统使用树状的路径来确定一个个文件、区分同名文件，HTML也可以使用树状的结构来区分所有的

标签：

  • 将最外层的标签表示为根节点，其余所有标签都是其子节点
  • 将嵌套的标签表示为父子节点
  • 将并列的标签表示为兄弟节点

从而构建出来一个表示了HTML中所有标签的树：

前端随笔：HTML/CSS/JavaScript和Vue_第7张图片

通过这个树，我们就能够去定位到具体我们需要去修改的标签，然后进行修改即可。

我们发现，HTML是一个既可以在浏览器窗口中显示的文档，也可以作为 HTML 源代码的文档被文件编辑器编辑。使用浏览器查看和使用文本编辑器编辑提供了HTML文档两种不同的访问方式。

**这里我们通过这种树形的方式去访问、修改其信息的方式，提供了第三种访问方式：通过编程语言访问。**由此，我们将此时被抽象为树的HTML称为文档对象模型（DOM），以表示此时的HTML文件是内部具有结构的对象的集合。而上面的树则称为DOM树。

通过的DOM表示方式使得HTML可以被操作。作为一个面向对象的网页表示，其中的每一个对象（即标签），可以用编程语言（如 JavaScript、Python）进行修改。

我们再来看看上面那个改变背景颜色的JavaScript代码：

// JavaScript代码
const button = document.getElementById('myButton');
const paragraph = document.getElementById('myParagraph');

function random(number) {
    return Math.floor(Math.random() * (number + 1));
}

button.addEventListener('click', function () {
    const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
    paragraph.style.backgroundColor = rndCol;
});

我们发现其实这个JavaScript代码的功能就是：

  • 首先在DOM树中找到按钮标签和

    标签，即：

    const button = document.getElementById('myButton');
const paragraph = document.getElementById('myParagraph');

  • 然后为按钮这个标签的点击事件添加事件处理函数，即：

    btn.addEventListener("click", () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  paragraph.style.backgroundColor = rndCol;
});

  • 事件处理函数中：

    • 首先产生随机颜色，即：

      const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;

    • 然后修改

      的属性值，这里是修改背景颜色，即：

      paragraph.style.backgroundColor = rndCol;

我们会发现，JavaScript中这样通过原生的方式去修改HTML实在是太繁琐了。这里只是修改背景颜色而已，还别说别的功能了。例如我们要实现美团外卖的添加购物车功能，那么JavaScript代码里面要写死我们。

正是因为这样，目前JavaScript会借助框架来快捷的帮我们处理这些事情，我们只需要关注具体得事件处理函数的编写即可，而接下来要介绍的Vue就是这样的一个框架。

三、Vue

我们上面在介绍JavaScript和HTML的交互的时候，讲到了标准的JavaScript修改HTML以实现动态网页的方式比较繁琐，代码写起来烦得要死。为此，就出现了很多的框架（例如：React、Angular，他们帮助我们快捷的绑定函数到指定标签的事件上去。

实际上，框架能干的事情、为我们干的事情远不止如此，不过在目前阶段，我们这样理解框架就行了。Vue就是诸多JavaScript框架中最成功的那一个。所以接下来就介绍介绍Vue

1. 简介

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue都可以胜任。

最初Vue是一个个人项目，时至今日，已成为全世界三大前端框架之一，Github上拥有3.8万Star。 领先于另外两个前端框架：React和Angular，在国内更是首选。

2. 发展历史

  • 2013年，在 Google 工作的尤雨溪，受到 Angular 的启发，开发出了一款轻量级框架，最初命名为 Seed 。
  • 2013年12月，更名为 Vue，图标颜色是代表勃勃生机的绿色，版本号是 0.6.0。
  • 2014.01.24，Vue 正式对外发布，版本号是 0.8.0。
  • 2014.02.25，0.9.0 发布，有了自己的代号：Animatrix，此后，重要的版本都会有自己的代号。
  • 2015.06.13，0.12.0，代号Dragon Ball，Laravel 社区（一款流行的 PHP 框架的社区）首次使用 Vue，Vue 在 JS 社区也打响了知名度。
  • 2015.10.26，1.0.0 Evangelion 是 Vue 历史上的第一个里程碑。同年，vue-router、vuex、vue-cli 相继发布，标志着 Vue从一个视图层库发展为一个渐进式框架。
  • 2016.10.01，2.0.0 是第二个重要的里程碑，它吸收了 React 的虚拟 Dom 方案，还支持服务端渲染。自从Vue 2.0 发布之后，Vue 就成了前端领域的热门话题。
  • 2019.02.05，Vue 发布了 2.6.0 ，这是一个承前启后的版本，在它之后，推出了 3.0.0。
  • 2019.12.05，在万众期待中，尤雨溪公布了 Vue 3 源代码，此时的 Vue 3仍 处于 Alpha 版本。
  • 2020年09月18日，Vue.js 3.0 正式发布。

前两年国内大厂的网页前端基本都是用Vue 2.0写的，可是截止本文发布时间2023年，不少大厂已经切换到了Vue 3.0了。

作为一个计算机科学家，理应了解计算机的方方面面。

3. Vue文件

Vue是JavaScript的框架，Vue通过组件的形式来组织网页，即将一个页面分为不同的组件，每个组件以单独的文件形式保存，称为Vue文件，后缀一般为.vue。

前端随笔：HTML/CSS/JavaScript和Vue_第8张图片

一个典型的Vue文件一般分为三个部分：