跳到主要内容位置
13
2022年8月

Vue 3 事件与响应性入门

张旭乾
前端Vue

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

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

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

12
2022年8月

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

张旭乾
前端vue

在前端开发中，除了需要经常展示列表内容外，还经常会根据一定条件展示页面内容，例如点击按钮的时候弹出对话框，当列表内容为空时，显示空白提示，或者在表单中展示验证错误等。那么在 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 {
}
11
2022年8月

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

张旭乾
前端Vue

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

展示纯数组数据​

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

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

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

7
2022年8月

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

张旭乾
前端Vue

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

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

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

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

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

{ data() { return { msg: "你好" } } }
6
2022年8月

配置 Rust 开发环境

张旭乾
前端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 项目的创建和开发流程。

5
2022年8月

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

张旭乾
前端vue

在了解了如何使用 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 指令。

4
2022年8月

创建 Vue 3.x 模板项目

张旭乾
前端Vue

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

大体步骤​

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

24
2022年7月

创建第一个 Vue 3.x 应用

张旭乾
前端vue

我们来开发第一个 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。

19
2022年7月

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

张旭乾
前端Vue

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

VS Code​

VS Code 可以从官网下载：

https://code.visualstudio.com/

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

18
2022年7月

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

张旭乾
前端软技能

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