上篇文章我们学习了如何使用 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 方法这个配置项，可以让我们定义一些方法来处理事件。

市面上的编程语言越来越多，如果你考虑到后续的工作中有可能需要用到新的编程语言，或者你想转型成新的、热门的编程语言开发，那么就可能会有这样的顾虑：到底需不需要学习新的编程语言？如果要学的话，该怎么快速的学会？这篇文章我们就来看看，为何要学习多门编程语言，以及如何学会任何一门编程语言。

学习多门编程语言有什么好处？​

对于软件工程师来说，我们可以把编程语言当做一个工具，当你有不同的需求的时候，可以选择最合适的工具来实现它。不同的编程语言有不同的优势，比如说 Node.js 是单线程的，它对于处理高并发的应用会很有帮助，而 Java 是完全面向对象的编程语言，类型系统丰富并且完善，编写起来非常整洁，简单易用，那对于大型的项目开发和团队开发来说，选择 Java 是最合适的。

学习多种编程语言也能够让你发现当前使用的编程语言有什么缺陷，进而拓宽你的知识水平和眼界。当你知道一个问题可以用其他语言能够更好、更快速的解决，你也可以尝试把其他编程语言的特性拿到你当前使用的编程语言上来，看看能不能用类似的技巧实现功能需求，来提高你的开发效率。

如果你想转型为其他编程语言的开发， 或者公司内部转岗需要你学会新的编程语言，而你正好学过这门编程语言，你就能够更快的进入状态。

这样看来，学习多个编程语言是很有必要的。

在上一篇文章的示例里边，我们通过点击一个按钮来展示一个问题的答案，而按钮的文案会根据答案的显示与否，而动态的发生变化。但是呢，这个文案的判断逻辑我们是写在 html 模板里边的，用了一串三目运算符：

<button @click="showAnswer = !showAnswer">
  {{ showAnswer ? "隐藏" : "显示" }}答案
</button>

对于只在一个地方使用这个逻辑的时候，可能并没有什么问题，但是如果有多次使用到这个逻辑的地方，那么我们需要反复复制粘贴这个逻辑：

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

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

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