Vue： 23 篇

这篇文章我们看一下对于表单整体的提交事件应该如何处理，并引入一个事件修饰符的概念。 我们继续使用上篇文章的项目示例，这里我把 html 中，class 为 form 的 div 改成了 form 元素，CSS 的样式也作了对应的调整。

<div class="form">
  ->
  <form></form>
</div>

现在，我们在 form 元素的结束标签之前，添加一个 button 按钮元素，作为表单的提交按钮，点击它表单就会提交。

<textarea id="intro" rows="10" v-model="intro"></textarea>
<!-- 在这里添加 -->
<button type="submit">提交</button>

上篇文章我们学习了如何使用 v-model 绑定 input 输入框和 data 中的属性，这篇文章我们来看一下其它表单控件的绑定方法。

示例​

这里示例大体的样式和结构我已经写好了，你可以从视频里附带的源代码示例里，直接编写代码。用户名这个我们上篇文章介绍了，这个就先不管它了。

单选按钮​

我们先看一下单选框的数据绑定。假如我们让用户选择一下性别，男和女。我们在 HTML 模板中：

• 定义一个 type 为 radio 的 input，name 设置为 gender，这里的 name 相同的 radio 单选框才能形成一个单选按钮组，这样选择是互斥的。
• value 设置为 male，表示男性，这个是单选按钮选中之后，实际获取到的值。这里之所以用英文，是遵循了软件开发的一些最佳实践，方便后端程序或数据库，用枚举的形式存储数据，而枚举的属性名一般用英文。
• 在 input 后面，我们用一个 span 元素显示给用户看的值，这里写上『男』。
• 这里用 v-model 绑定一个名为 gender 的属性，这个我们稍后再在 data 里定义。

在 Vue 中处理表单输入数据处理有两种方式，一种是使用传统的事件监听方式，另一种是使用 v-model，这篇文章我们看一下如何使用事件监听的方式处理表单输入数据。

input 事件处理​

要监听 input 输入框的事件，我们使用 @input 事件，在用户输入每个字符的时候，都会触发这个事件。

<input id="username" type="text" @input="handleInput" />

我们可以在事件处理函数中，直接访问到 event 这个 javascript 原生事件对象，这样可以像普通 js 一样，使用 event.target.value 来访问输入框的值：

这篇文章我们看一下方法和 watch 监听器之间的区别。

Methods 方法和 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 的过程中，你也能慢慢的理解了。

Computed 计算属性和 Methods 方法的区别​

我们看一下计算属性和方法的区别，在这之前，看一下它们的相同点。在讲计算属性的时候，我们说过，它适合根据 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 的应用场景​

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 基本的展示逻辑介绍完了，覆盖了常见的场景：

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

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