跳到主要内容位置

前端55

查看所有标签(分类)

Vue3 表单提交事件处理

张旭乾

这篇文章我们看一下对于表单整体的提交事件应该如何处理,并引入一个事件修饰符的概念。 我们继续使用上篇文章的项目示例,这里我把 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>

Vue 3 常见表单控件事件处理

张旭乾

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

示例

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

单选按钮

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

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

Vue 3 表单输入控件数据处理

张旭乾

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

input 事件处理

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

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

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

Vue methods 方法和 watch 监听器的区别

张旭乾

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

Methods 方法和 Watch 监听器的区别

MethodsWatch 之间其实并没有什么太大的可比性,只是当 methods 方法作为 computed 计算属性那样使用时,那么它和 Watch 监听器之间的区别和计算属性跟监听器中间的区别就很类似了,当在 HTML 模板中调用方法时,会把方法的返回值计算出来并显示:

<ul>
<li v-for="vueBlog in getVueBlogs()">{{ vueBlog }}</li>
</ul>

methods: {
getVueBlogs() {
return this.blogPosts.filter((blog) => blog.includes("Vue"));
},
},

Vue computed 计算属性和 watch 监听器的区别

张旭乾

计算属性和 watcher 监听器都可以监听 data 中的数据的变化,然后根据具体的业务逻辑对数据进行操作。它们两个的区别是,computed() 计算属性一般是把 data 中的数据进行一番包装和计算之后,返回新的值,例如对数组进行过滤后的值,而并不会直接修改 data 中的属性:

data() {
return {
blogPosts: [
"Vue 3.0x 入门实战",
"Vue 3.x 完全指南",
"React 18 新特性介绍",
"JavaScript 基础语法概览",
],
};
},
computed: {
count() {
return this.blogPosts.length;
},
},

Vue 计算属性和方法的区别

张旭乾

到现在,我们接触了 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 3 使用 watch 监听数据的变化

张旭乾

我们知道在 Vue 应用中,当 data 里边的属性变化的时候,HTML 模板中使用到这个属性的地方,会自动更新,但是如果我们想在 JavaScript 中,监听某个属性的变化,并做一些操作,该怎么办呢?这个时候可以使用 Vue 提供的 watch 选项,为属性添加一个监听器。

Watch 的应用场景

watch 适合根据属性的变化,做一些开销比较大的操作,或者异步操作,例如设置定时器,请求远程 API 等,它不会返回任何值,而是根据属性的变化,直接修改其它属性的值,这样其它属性修改之后,就能够在 Vue 的响应性机制下,自动更新依赖这个属性的 HTML 视图部分。

Vue 3 中的 methods 方法使用教程

张旭乾

Vue 中的 methods 方法,或者也可以叫做函数。无论是在 Vue 中,还是在原生的 JavaScript 中,处理事件总是会涉及到比较复杂的业务逻辑,例如说表单验证,发起异步请求,或者是和产品具体业务有关的计算,这个时候,如果都像之前的例子那样直接把事件处理的代码写在 HTML 模板中,是不推荐的:

<button @click="showAnswer = !showAnswer">{{ label }}</button>

这种写法虽然简单,但是和 html 杂糅到了一起,另外也不方便逻辑复用,对于大量的业务逻辑代码,这种方式写起来就是灾难。好在 vue 提供了 methods 方法这个配置项,可以让我们定义一些方法来处理事件。

Vue 3.x: 使用 computed 计算属性处理稍复杂的业务逻辑

张旭乾

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

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

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

Vue 3 事件与响应性入门

张旭乾

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

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

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