跳到主要内容位置

Vue 3 事件与响应性入门

张旭乾

到现在,我们把 Vue 基本的展示逻辑介绍完了,覆盖了常见的场景:

  • 在开合标签内引用 data 里的数据。
  • 在标签属性中引用 data 的数据。
  • 展示列表数据。
  • 根据条件展示数据。

不过,这些都是静态的展示,没有数据的变化,体现不了 vue 的优点。这篇文章我们将通过处理 html DOM 事件,来修改 data 里的数据,并看到页面根据 data 的变化而变化,也就是 vue 的响应性机制。

Vue 3 使用 v-if/v-show 根据条件渲染页面内容

张旭乾

在前端开发中,除了需要经常展示列表内容外,还经常会根据一定条件展示页面内容,例如点击按钮的时候弹出对话框,当列表内容为空时,显示空白提示,或者在表单中展示验证错误等。那么在 Vue 3 中,我们使用 v-if 以及相关的 v-else-if 和 v-else 指令来实现条件判断,或者使用 v-show 指令。我们分别看一下它们的作用、使用方法和区别。

v-if、v-else-if 和 v-else

v-if、v-else-if 和 v-else 和 JavaScript 中的 if...else if...else 功能是一样的:

if (books.length === 0) {
} else if (books.length === 1) {
} else {
}

Vue 3.x 列表渲染 v-for 指令使用方法

张旭乾

这篇文章我们来看一下在 vue 中展示列表内容。在前端开发中,经常会有展示列表的需求,例如博客列表,任务列表等等,那么 vue 中提供了 v-for 指令,来让我们方便的展示列表数据。

展示纯数组数据

我们知道,data() 函数返回的对象中,它的属性可以是任何类型,那么要展示列表数据,最合适的就是数组类型了:

data() {
return {
todos: ["把项目做完", "去超市购物", "看10分钟的书"],
};
},

假设我们要把 todos (待办事项)数组渲染到由 ul 和 li 构成的无序列表中,那么我们可以先定好结构:

Vue 3.x:使用 data 配置项提供响应性数据

张旭乾

这篇文章我们看一下如何使用 data 来为 HTML 模板提供数据。在普通 HTML 中,我们编写的文本都是静态的,如果要改变一段文字,需要使用 JavaScript 来修改:

// html
<div>原始文本</div>;

// js
const div = document.querySelector("div");
div.innerHTML = "新文本";

而在 Vue 中,我们可以通过它的 data 属性,来把数据绑定到 HTML 中:

<div>{{ msg }}</div>

{ data() { return { msg: "你好" } } }

配置 Rust 开发环境

张旭乾

Rust 是一款操作系统级的通用编程语言,由 Mozilla 组织开发,对标 C++ 等语言。因为是通用编程语言,我们可以使用 Rust 开发前端、后端、移动端、嵌入式、系统通信等的各类软件工具。

Rust 语言有下面这些特性:

  • 没有垃圾回收器,能够避免内存泄漏,提高程序的运行效率,这是最重要的特性。
  • 有丰富的类型系统,并保证类型安全,使用 Rust 编写的代码,只要编译通过,在运行时基本上就没有什么问题了。
  • 生态丰富,有类似于 npm 的 crate 库,由第三方开发者提供多种多样的工具,例如 http、文本处理、文件处理等等。

Rust 在 stackoverflow 开发者调查中,连续 7 年作为开发者最爱的编程语言,在 2022 年以 86.73% 的支持率排名第一:

stackoverflow developer survey

Rust 语言如此受欢迎,那么作为爱钻研的程序员,避免不了试一试了,这篇文章我们就来看看如何配置 Rust 的开发环境,并看看一个简单的 Rust 项目长什么样。如果你有 Node.js 开发经验,会更容易了解 Rust 项目的创建和开发流程。

使用 v-bind 在 HTML 属性中绑定 data 中的数据 - Vue 3.x 基础教程

张旭乾

在了解了如何使用 data 定义模板中所需要的数据,以及如何在模板开合标签中绑定数据之后,我们来看一下如何在 HTML 属性中绑定 data 提供的数据。 在模板中,我们不能直接使用大括号的方式绑定数据,到 HTML 属性中:

X 错误
<a href="{{link}}">链接</a>

data() { return { link: "https://zxuqian.cn" } }

也不能直接使用 data 中的属性名,这样会被认为是普通的 html 属性:

<a href="link">链接</a>

data() { return { link: "https://zxuqian.cn" } }

正确的做法是使用 v-bind 指令。

创建 Vue 3.x 模板项目

张旭乾

我们在之前创建第一个 Vue 项目的时候,已经熟悉了 Vue 项目的开发流程,这节课我们再复习一遍 Vue 项目的创建和初始化过程,加深一下印象。

大体步骤

  1. 一个简单的 Vue 项目,就是从普通的 HTML 页面开发起步的,那么就需要约定俗成的一套文件:HTML、CSS 和 JavaScript:
├── index.html
├── index.js
├── lib
│ └── vue.global.js
└── style.css

创建第一个 Vue 3.x 应用

张旭乾

我们来开发第一个 Vue 3.x 的应用。我们会创建一个音乐播放列表,展示歌曲名称,还会提供一个搜索框,让用户搜索歌曲。

创建项目

首先打开 VS Code,在一个合适文件夹下边创建项目的工作空间目录,工作空间就是一个文件夹,所有跟项目有关的文件都在这个目录下,VS Code 会把它们作为一个整体看待。 然后,像开发普通 HTML 页面一样,创建 index.html、style.css 和 index.js 文件。

引入 Vue

打开 index.html 文件,在里面引入 style.css 和 index.js,这里把 index.js 的引入放到了 </body> 闭合处,这样在页面加载完成之后,才会执行 index.js 文件的代码。 接着,新建一个 lib 目录,把我们下载好的 vue 的 js 文件复制过来。 在 index.html 中,<head />标签结束前,引入 vue。

配置 Vue 3.x 项目的开发环境

张旭乾

在开发 Vue 项目之前,需要配置好一个顺手的开发工具,目前比较流行的前端开发工具是 VS Code,我们需要安装一些相关的插件,来方便我们的开发,例如代码提示、自动补全、格式化等。

VS Code

VS Code 可以从官网下载:

https://code.visualstudio.com/

选择对应的操作系统版本下载,完成之后进行安装。 安装完成之后,打开 VS code,我们需要安装几个插件:

如何出版一本技术书籍:《JavaScript 基础语法详解》出版过程总结

张旭乾

早在 2018 年开始写博客的时候,就收到过编辑的出书邀请,当时答应了要写,但出了点意外就没有写成。后来 2019 年开始做 B 站,做了几个月后又收到清华大学出版编辑的邀请,而我想把曾经的愿望实现,于是就答应了,这样出版了我人生的第一部书籍《JavaScript 基础语法详解》。现在总结一下出版过程,除了好好欣赏一下劳动成果外,也给你提供一些经验,如果哪天你也决定出书了,可能会对你有所帮助。