logo

该视频仅会员有权观看

立即开通课程「Nuxt.js 前端应用开发实践」权限。

¥
199
/ 年

在 Nuxt 应用里定义登录页面组件

  • 创建一个登录页面在nx应用的pages目录下,命名为log in the view。
  • 页面地址设置为log in template。
  • 在页面中使用form标签构建登录表单,通过prevent阻止表单提交事件默认行为以避免刷新页面。
  • 表单包含两个input元素,一个用于输入用户名(类型text,autocomplete设置为user name),另一个用于输入密码(类型password,autocomplete设置为current password)。
  • 添加登录按钮,使用primary类为其添加额外样式,按钮文字设置为登录。
  • 在默认布局的header部分添加一个账户图标(icon es目录下的accounts.s v g),设置out属性值。
  • 添加脚本并使用use head设定页面标题为“登录”。
  • 准备表示用户名(name)和密码(password)的数据,初始值为空字符串。
  • 创建用户登录方法log in,用于输出输入的用户名和密码值。
  • 在组件模板中给name和password输入框绑定v-model指令,将对应数据绑定到指令。
  • 登录按钮绑定log in事件处理方法。
  • 可在浏览器中测试登录功能,填写信息后点击登录,组件将输出填写的用户名和密码值。