当前位置: 首页> 汽车> 报价 > 推广费用怎么算_seo导航_百度seo入驻_站长网站seo查询

推广费用怎么算_seo导航_百度seo入驻_站长网站seo查询

时间:2025/7/11 7:38:29来源:https://blog.csdn.net/weixin_65106708/article/details/144896405 浏览次数: 0次
推广费用怎么算_seo导航_百度seo入驻_站长网站seo查询
修改日期备注
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>

在这个 HTML 页面中,我们使用 Vue.js 构建了一个简单的登录表单。

它的首页展示为:

image-20250102222208013

它包含以下几个部分:

三、引入 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 关联起来。当 usernameIsValidfalse 时,输入框会被添加 input-error 类,当 usernameIsValidtrue 时,这个类不会被添加。这样可以根据用户输入的有效性动态地改变输入框的样式,是不是很酷呢?

五、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() 函数中定义了 usernamepassword 两个数据属性,它们分别存储用户输入的用户名和密码,初始值都为空字符串。这是我们用来保存用户输入的地方,它们会通过 v-model 与输入框进行双向绑定。
  • 计算属性(computed

    • usernameIsValid 计算属性用于判断用户名是否有效,通过 return this.username.length >= 3; 来检查 username 的长度是否大于或等于 3 个字符。这样,只要 username 的长度发生变化,usernameIsValid 的值就会自动更新。

      image-20250102222257302

    • 同样,passwordIsValid 计算属性会根据 password 的长度来判断密码是否有效。计算属性的优点是它会根据其依赖的数据自动更新,避免了我们手动更新状态,使代码更加简洁和易于维护。

      image-20250102222333990

  • 方法部分(methods

    • submit() 方法是在用户点击登录按钮时调用的。
    • if (!this.usernameIsValid ||!this.passwordIsValid) {...} 这里会检查用户名或密码是否长度不足 3 个字符。如果是,会弹出一个警告信息,告诉用户输入长度太短。
    • else {...} 部分则会在输入合法时,显示用户输入的用户名和密码,这里使用了模板字符串来方便地显示用户输入的信息。

六、样式处理(CSS)

我们的 style.css 文件也起着重要的作用,让我们看看其中的代码:

.input-error {border: 2px solid red;
}

这里定义了 .input-error 类,当输入框被添加这个类时,会显示一个 2 像素宽的红色边框。这与我们在 v-bind:class 中使用的类名相对应,当输入不满足长度要求时,输入框会显示红色边框,让用户知道输入有问题,增强了用户体验。

七、总结

通过这个简单的 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 文件放在同一个目录下,这样才能正常加载样式哦。

关键字:推广费用怎么算_seo导航_百度seo入驻_站长网站seo查询

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: