事件 1:@submit.prevent
LibraryRegistrationForm.vue 第 85 行:
<form @submit.prevent="submitForm">
在 Vue.js 中,我们使用 @submit.prevent 来处理表单提交事件。
这在我们希望用 JavaScript 来管理表单提交(如验证表单数据)时非常有用,因为它可以避免页面重新加载。通过 @submit.prevent="submitForm",我们能够触发组件中定义的 submitForm 方法,从而实现自定义的表单处理逻辑,同时阻止表单的默认提交。
事件 2:@blur
LibraryRegistrationForm.vue 第 93 行:
@blur="() => validateName(true)"
在 Vue.js 中,@blur="() => validateName(true)" 表示为输入框绑定 blur 事件处理函数,当元素失去焦点时触发。
这里的处理函数是一个箭头函数,它调用 validateName(true)。这种用法通常用于输入验证:当用户离开输入框时,blur 事件触发,从而调用验证函数检查输入内容是否合法。
事件 3:@input
LibraryRegistrationForm.vue 第 94 行:
@input="() => validateName(false)"
在 Vue.js 中,@input="() => validateName(false)" 表示为输入框绑定 input 事件处理函数,每当输入框的值发生变化时触发。
这里的处理函数调用 validateName(false),常用于实时验证输入内容:用户每输入一个字符,input 事件都会触发,从而持续调用验证函数,实现即时的输入校验。
事件 4:@click
LibraryRegistrationForm.vue 第 145 行:
Q: v-on:click 和 @click 有什么区别?
在 Vue.js 中,@click 是 v-on:click 的简写,两者的作用完全相同,都是用于监听点击事件。
在上面的示例中,按钮绑定了 @click="clearForm",表示当用户点击按钮时,会调用组件中定义的 clearForm 方法。这个方法通常包含清空表单字段的逻辑,将它们重置为默认值,从而让表单更具交互性和用户友好性。
clearForm 方法的作用
当用户点击 “Clear” 按钮时:
👉 简单来说,就是清空表单内容,让用户可以从头重新填写。