修改日期备注2025.1.2初版 一、前言
Vue.js 学习第一天——学会一个带有简单表单验证的登录页面。通过这个项目，会对 Vue.js 的焦点概念有了更深入的理解，加深掌握怎样运用 Vue 的一些强大特性来实现动态交互和数据处理。
二、项目的基本结构
首先，让我们来看一下这个项目的 HTML 结构：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Vue.js 登录页面</title>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <link href="style.css" rel="stylesheet" />
- <script src="https://unpkg.com/vue@latest"></script>
- </head>
- <body>
- <div id="app">
- <form>
- <input type="text"
- v-bind:class="{ 'input-error':!usernameIsValid }"
- placeholder="enter your username"
- v-model="username"/>
- <br />
- <input type="password"
- v-bind:class="{ 'input-error':!passwordIsValid }"
- placeholder="enter your password"
- v-model="password"/>
- <br />
- <button type="submit" v-on:click.prevent="submit">Login</button>
- </form>
- </div>
- <script>
- const app = {
- data() {
- return {
- username:"",
- password:"",
- };
- },
- computed: {
- usernameIsValid() {
- return this.username.length >= 3;
- },
- passwordIsValid() {
- return this.password.length >= 3;
- }
- },
- methods: {
- submit() {
- if (!this.usernameIsValid ||!this.passwordIsValid) {
- alert("The input length smaller than 3");
- } else {
- alert(`Your input is username: ${this.username}; password: ${this.password}`);
- }
- }
- }
- };
- Vue.createApp(app).mount("#app");// vue的挂载
- </script>
- </body>
- </html>
它的首页展示为：
它包含以下几个部门：
三、引入 Vue.js 及页面设置
在 <head> 部门，我们进行了一些底子的页面设置和 Vue.js 的引入：
- <head>
- <title>Vue.js 登录页面</title>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <link href="style.css" rel="stylesheet" />
- <script src="https://unpkg.com/vue@latest"></script>
- </head>
- <title> 为我们的页面设置了一个标题，方便在浏览器标签上显示。
- <meta charset="UTF-8" /> 确保页面可以正确显示各种字符，制止出现乱码。
- <meta name="viewport" content="width=device-width, initial-scale=1" /> 使页面在不同装备上能根据装备的宽度自适应显示，对于移动装备的适配非常告急哦。
- <link href="style.css" rel="stylesheet" /> 引入了外部的样式表文件，我们会在反面的部门看到它是如作甚页面添加样式的。
- <script src="https://unpkg.com/vue@latest"></script> 是引入 Vue.js 的最新版本，如许我们就可以在页面中使用 Vue 的各种功能啦。
四、表单元素与 Vue 的双向绑定
在 <body> 部门，我们有一个 Vue 应用的根元素 <div id="app">，在这个元素内部是我们的表单：
- <div id="app">
- <form>
- <input type="text"
- v-bind:class="{ 'input-error':!usernameIsValid }"
- placeholder="enter your username"
- v-model="username"/>
- <br />
- <input type="password"
- v-bind:class="{ 'input-error':!passwordIsValid }"
- placeholder="enter your password"
- v-model="password"/>
- <br />
- <button type="submit" v-on:click.prevent="submit">Login</button>
- </form>
- </div>
- 这里有两个输入框，一个用于输入用户名，一个用于输入暗码。它们都使用了 v-model 指令进行双向绑定。以用户名输入框为例：
- v-model="username" 把输入框的值和 Vue 实例中的 username 数据属性绑定在一起。这意味着当用户在输入框中输入内容时，username 的值会主动更新，反之，当我们在 Vue 代码中修改 username 的值，输入框的内容也会随之改变。这是 Vue 中非常方便的双向数据绑定特性哦 让数据的处理变得简单又直观。
- 输入框还使用了 v-bind:class 指令：
- v-bind:class="{ 'input-error':!usernameIsValid }" 是一种动态绑定类名的方式。这里，我们将输入框的类名和一个计算属性 usernameIsValid 关联起来。当 usernameIsValid 为 false 时，输入框会被添加 input-error 类，当 usernameIsValid 为 true 时，这个类不会被添加。如允许以根据用户输入的有用性动态地改变输入框的样式，是不是很酷呢？
五、Vue 实例中的数据和方法
接着我们来看看 <script> 部门的 Vue 实例：
- const app = {
- data() {
- return {
- username:"",
- password:"",
- };
- },
- computed: {
- usernameIsValid() {
- return this.username.length >= 3;
- },
- passwordIsValid() {
- return this.password.length >= 3;
- }
- },
- methods: {
- submit() {
- if (!this.usernameIsValid ||!this.passwordIsValid) {
- alert("The input length smaller than 3");
- } else {
- alert(`Your input is username: ${this.username}; password: ${this.password}`);
- }
- }
- }
- };
- Vue.createApp(app).mount("#app");
- 数据部门（data）：
- data() 函数中定义了 username 和 password 两个数据属性，它们分别存储用户输入的用户名和暗码，初始值都为空字符串。这是我们用来保存用户输入的地方，它们会通过 v-model 与输入框进行双向绑定。
- 计算属性（computed）：
- usernameIsValid 计算属性用于判断用户名是否有用，通过 return this.username.length >= 3; 来查抄 username 的长度是否大于或等于 3 个字符。如许，只要 username 的长度发生变化，usernameIsValid 的值就会主动更新。
- 同样，passwordIsValid 计算属性会根据 password 的长度来判断暗码是否有用。计算属性的优点是它会根据其依靠的数据主动更新，制止了我们手动更新状态，使代码更加简洁和易于维护。
- 方法部门（methods）：
- submit() 方法是在用户点击登录按钮时调用的。
- if (!this.usernameIsValid ||!this.passwordIsValid) {...} 这里会查抄用户名或暗码是否长度不足 3 个字符。如果是，会弹出一个警告信息，告诉用户输入长度太短。
- else {...} 部门则会在输入合法时，显示用户输入的用户名和暗码，这里使用了模板字符串来方便地显示用户输入的信息。
六、样式处理（CSS）
我们的 style.css 文件也起着告急的作用，让我们看看其中的代码：
- .input-error {
- border: 2px solid red;
- }
七、总结
通过这个简单的 Vue.js 登录页面项目，我们学习了许多告急的 Vue 特性：
- 怎样使用 v-model 进行双向数据绑定，使数据在页面和 Vue 实例之间轻松同步。
- 利用 v-bind:class 进举措态的类名绑定，根据条件为元素添加不同的样式，让页面更加生动和具有交互性。
- 使用计算属性来主动更新数据的状态，制止了手动更新和复杂的逻辑判断。
- 实现了简单的表单验证逻辑，处理用户输入并提供反馈。
这个小项目只是 Vue.js 的冰山一角，但通过如许的实践，我们可以逐渐掌握 Vue 的焦点概念和使用技巧。盼望你也能动手实行一下，相信你会对 Vue 有更深刻的理解和熟悉哦 继续加油，一起探索 Vue.js 的更多可能性吧 等待在 Vue 的世界里创造出更棒的项目！
八、后续改进
固然，这个项目还有许多可以改进的地方哦，好比：
- 可以将验证逻辑扩展为更复杂的规则，例如查抄用户名是否包含特殊字符，暗码是否包含数字和字母等。
- 可以将表单提交改为异步利用，通过调用后端 API 来验证用户信息，实现真正的登录功能。
- 可以添加更多的用户反馈，例如使用 Vue 的组件系统创建一个专门的消息提示组件，取代 alert 函数，使页面更加雅观。
注意：记得将 style.css 文件和上述 HTML 文件放在同一个目录下，如许才能正常加载样式哦。
户名是否包含特殊字符，暗码是否包含数字和字母等。
- 可以将表单提交改为异步利用，通过调用后端 API 来验证用户信息，实现真正的登录功能。
- 可以添加更多的用户反馈，例如使用 Vue 的组件系统创建一个专门的消息提示组件，取代 alert 函数，使页面更加雅观。
注意：记得将 style.css 文件和上述 HTML 文件放在同一个目录下，如许才能正常加载样式哦。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
