用户登录

在我们这个 vue 应用里添加一个用户登录组件,放在 src/user/components 目录的下面,文件的名字可以是 user-login.vue。

在组件里添加一组 template,设置一下组件的模板,一组 div,先随便添加一行文字。 然后打开 app 组件,可以在这个组件里用一下刚才创建的 UserLogin 组件,先在组件里导入 UserLogin,位置是 @/user/components/user-login.vue

然后在组件的脚本里面,添加一个 components 属性,把导入的 UserLogin 放进来。这样就可以在这个组件的模板里使用 UserLogin 了。 找到组件的模板,找个地方可以添加一个 UserLogin 。

在浏览器上观察一下,界面上会显示 UserLogin 这个组件里的内容。 回来继续编辑一下这个组件,这里可以先添加一个 text 类型的 input, 设置一下 placeholder 属性的值,比如用户名。 再用 v-model 绑定一个数据,名字是 name 。

复制一份,修改一下,绑定的数据是 password,占位符文字是 密码,再改一下这个元素的类型,把 text 换成 password 。

下面再添加一个按钮,一组 button,按钮文字是 登录,在这个按钮元素上面绑定一个 click 事件,点击这个按钮的时候执行一下组件里的 login 这个方法,等会儿再去定义这个方法。

在组件里面再添加一组 script ,里面默认导出一个对象,先添加一个 data 方法,这个方法返回的东西是组件里的数据,里面需要 name ,默认让它等于一个空白的字符,再添加一个 password,也让它等于一个空白的字符。

然后再添加一个 methods,里面可以添加一些组件需要的方法,用 async 标记一个方法,名字叫 login,这个方法可以处理用户登录。

暂时我们先在控制台上输出这个组件里的 name 还有 password 数据的值。

回到浏览器,现在界面上会显示一个用户名,密码,还有一个 登录按钮。这个密码字段的样式可以再改一下,打开 app/styles 下面的 app 样式表,这里可以再添加一个样式选择器, input type=password。

再回到浏览器,打开控制台,然后在 用户名 这里输入要登录的用户的名字,在密码这里输入用户的密码。然后点击 登录。会执行 UserLogin 组件里的 login 这个方法。

在控制台上会输出用户在用户名还有密码字符里填写的内容。

创建用户登录组件《 Vue.js 前端应用 #10:身份验证 》

统计

13052
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点