Vue ： 24 篇

软件工程师 / B站UP主

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

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

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

2022年8月

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

软件工程师 / B站UP主

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

2022年8月

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

软件工程师 / B站UP主

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

展示纯数组数据

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

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

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

2022年8月

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

软件工程师 / B站UP主

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

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

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

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

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

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

2022年8月

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

软件工程师 / B站UP主

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

2022年8月

创建 Vue 3.x 模板项目

软件工程师 / B站UP主

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

大体步骤

一个简单的 Vue 项目，就是从普通的 HTML 页面开发起步的，那么就需要约定俗成的一套文件：HTML、CSS 和 JavaScript：

├── index.html
├── index.js
├── lib
│   └── vue.global.js
└── style.css

2022年7月

创建第一个 Vue 3.x 应用

软件工程师 / B站UP主

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

2022年7月

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

软件工程师 / B站UP主

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

VS Code

VS Code 可以从官网下载：

https://code.visualstudio.com/

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

2022年7月

如何使用 <script> 引入 Vue 3.x 框架

软件工程师 / B站UP主

在了解到 Vue 能够解决的众多问题之后，你是不是已经开始跃跃欲试了呢？那么这节课我们就看一下如何在项目中引入 Vue。引入 Vue 的方式大体有两种：

使用 <script/> 标签。
使用脚手架。

使用脚手架是比较高级的用法，这个我们在讲完组件之后再来看它怎么使用。

2022年7月

Vue.js 是什么样的框架？解决了传统前端开发中的哪些问题？

软件工程师 / B站UP主