VUE实现注册登录功能
首先使用vue-cli创建一个vue项目,需要用到vue.js 路由,可以先命令行输入”npm install vue-router“进行安装。
(关于创建项目前那些工具内容介绍等这里不再赘述)
在这里我们每个组件都放在一个单独的vue文件里,所以在src/components文件夹下创建Register.vue,Login.vue两个文件。
Register.vue
<!--
我们先在<template>里写一个注册表单。
其中用v-model指令在表单控件元素上创建双向数据绑定。
@click监听鼠标点击事件
-->
<template>
<form>
<!--表单名称-->
<div class="title">Register Now</div>
<!--用户名-->
<input class="username" placeholder="User name" v-model="username"/>
<!--错误提示,下同-->
<div class="error">{
{uError}}</div>
<!--密码-->
<input class="password" placeholder="Password" v-model="userpwd"/>
<div class="error">{
{pError}}</div>
<!--确认密码-->
<input class="pwdagain" placeholder="Confirm Password" v-model="pwdagain"/>