在 Vue 中处理表单输入数据处理有两种方式，一种是使用传统的事件监听方式，另一种是使用 v-model，这篇文章我们看一下如何使用事件监听的方式处理表单输入数据。
要监听 input 输入框的事件，我们使用 @input 事件，在用户输入每个字符的时候，都会触发这个事件。
<input id="username" type="text" @input="handleInput" />
我们可以在事件处理函数中，直接访问到 event 这个 javascript 原生事件对象，这样可以像普通 js 一样，使用 event.target.value 来访问输入框的值：
这篇文章我们看一下方法和 watch 监听器之间的区别。
Methods 和 Watch 之间其实并没有什么太大的可比性，只是当 methods 方法作为 computed 计算属性那样使用时，那么它和 Watch 监听器之间的区别和计算属性跟监听器中间的区别就很类似了，当在 HTML 模板中调用方法时，会把方法的返回值计算出来并显示：
<ul>
<li v-for="vueBlog in getVueBlogs()">{{ vueBlog }}</li>
</ul>
methods: {
getVueBlogs() {
return this.blogPosts.filter((blog) => blog.includes("Vue"));
},
},
计算属性和 watcher 监听器都可以监听 data 中的数据的变化，然后根据具体的业务逻辑对数据进行操作。它们两个的区别是，computed() 计算属性一般是把 data 中的数据进行一番包装和计算之后，返回新的值，例如对数组进行过滤后的值，而并不会直接修改 data 中的属性：
data() {
return {
blogPosts: [
"Vue 3.0x 入门实战",
"Vue 3.x 完全指南",
"React 18 新特性介绍",
"JavaScript 基础语法概览",
],
};
},
computed: {
count() {
return this.blogPosts.length;
},
},
到现在，我们接触了 computed 计算属性，methods 方法和 watchers 监听器，这三者使用起来好像没有什么区别，都能响应数据的变化，那么这三者之间该怎们进行选择呢？计算属性、方法和监听器这三种方式是有一定的区别的，但有时候也并不严格区分，接下来的几节课我们看一下它们的区别，之后你就会自己决定什么时候使用哪一个了，这些课的内容如果觉得听不太懂也没关系，后面你会见到它们更多的用法，在以后使用 Vue 的过程中，你也能慢慢的理解了。
我们看一下计算属性和方法的区别，在这之前，看一下它们的相同点。在讲计算属性的时候，我们说过，它适合根据 data 里的属性作一些稍微复杂的计算，例如数组过滤，筛选等，并且需要复用的情况：
<ul>
<li v-for="vueBlog in vueBlogs">{{ vueBlog }}</li>
</ul>
data() {
return {
blogPosts: [ "Vue 3.0x 入门实战", "Vue 3.x 完全指南", "React 18 新特性介绍", "JavaScript 基础语法概览", ],
};
},
computed: {
vueBlogs() {
return this.blogPosts.filter((blog) => blog.includes("Vue"));
},
}
我们知道在 Vue 应用中，当 data 里边的属性变化的时候，HTML 模板中使用到这个属性的地方，会自动更新，但是如果我们想在 JavaScript 中，监听某个属性的变化，并做一些操作，该怎么办呢？这个时候可以使用 Vue 提供的 watch 选项，为属性添加一个监听器。
watch 适合根据属性的变化，做一些开销比较大的操作，或者异步操作，例如设置定时器，请求远程 API 等，它不会返回任何值，而是根据属性的变化，直接修改其它属性的值，这样其它属性修改之后，就能够在 Vue 的响应性机制下，自动更新依赖这个属性的 HTML 视图部分。
Vue 中的 methods 方法，或者也可以叫做函数。无论是在 Vue 中，还是在原生的 JavaScript 中，处理事件总是会涉及到比较复杂的业务逻辑，例如说表单验证，发起异步请求，或者是和产品具体业务有关的计算，这个时候，如果都像之前的例子那样直接把事件处理的代码写在 HTML 模板中，是不推荐的：
<button @click="showAnswer = !showAnswer">{{ label }}</button>
这种写法虽然简单，但是和 html 杂糅到了一起，另外也不方便逻辑复用，对于大量的业务逻辑代码，这种方式写起来就是灾难。好在 vue 提供了 methods 方法这个配置项，可以让我们定义一些方法来处理事件。
在上一篇文章的示例里边，我们通过点击一个按钮来展示一个问题的答案，而按钮的文案会根据答案的显示与否，而动态的发生变化。但是呢，这个文案的判断逻辑我们是写在 html 模板里边的，用了一串三目运算符：
<button @click="showAnswer = !showAnswer">
{{ showAnswer ? "隐藏" : "显示" }}答案
</button>
对于只在一个地方使用这个逻辑的时候，可能并没有什么问题，但是如果有多次使用到这个逻辑的地方，那么我们需要反复复制粘贴这个逻辑：
到现在，我们把 Vue 基本的展示逻辑介绍完了，覆盖了常见的场景：
不过，这些都是静态的展示，没有数据的变化，体现不了 vue 的优点。这篇文章我们将通过处理 html DOM 事件，来修改 data 里的数据，并看到页面根据 data 的变化而变化，也就是 vue 的响应性机制。
在前端开发中，除了需要经常展示列表内容外，还经常会根据一定条件展示页面内容，例如点击按钮的时候弹出对话框，当列表内容为空时，显示空白提示，或者在表单中展示验证错误等。那么在 Vue 3 中，我们使用 v-if 以及相关的 v-else-if 和 v-else 指令来实现条件判断，或者使用 v-show 指令。我们分别看一下它们的作用、使用方法和区别。
v-if、v-else-if 和 v-else 和 JavaScript 中的 if...else if...else 功能是一样的：
if (books.length === 0) {
} else if (books.length === 1) {
} else {
}
这篇文章我们来看一下在 vue 中展示列表内容。在前端开发中，经常会有展示列表的需求，例如博客列表，任务列表等等，那么 vue 中提供了 v-for 指令，来让我们方便的展示列表数据。
我们知道，data() 函数返回的对象中，它的属性可以是任何类型，那么要展示列表数据，最合适的就是数组类型了：
data() {
return {
todos: ["把项目做完", "去超市购物", "看10分钟的书"],
};
},
假设我们要把 todos （待办事项）数组渲染到由 ul 和 li 构成的无序列表中，那么我们可以先定好结构：