在我们这个 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 这个方法。
在控制台上会输出用户在用户名还有密码字符里填写的内容。