- 创建一个登录页面在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事件处理方法。
- 可在浏览器中测试登录功能,填写信息后点击登录,组件将输出填写的用户名和密码值。