用vue框架编写一个简单的登陆注册界面
时间: 2024-01-26 22:42:50 浏览: 26
好的,我会为您展示如何用Vue框架编写一个简单的登录注册界面。
首先,我们需要在Vue项目中安装Vue Router来实现页面路由跳转。在终端中运行以下命令:
```
npm install vue-router --save
```
接下来,在src目录下创建一个components文件夹,里面分别创建一个Login.vue和Register.vue组件作为登录和注册页面。
Login.vue代码如下:
```
<template>
<div>
<h2>Login</h2>
<form>
<div>
<label>Email</label>
<input type="email" v-model="email">
</div>
<div>
<label>Password</label>
<input type="password" v-model="password">
</div>
<button @click.prevent="login">Login</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
email: '',
password: ''
}
},
methods: {
login() {
// 这里写登录逻辑
}
}
}
</script>
```
Register.vue代码如下:
```
<template>
<div>
<h2>Register</h2>
<form>
<div>
<label>Name</label>
<input type="text" v-model="name">
</div>
<div>
<label>Email</label>
<input type="email" v-model="email">
</div>
<div>
<label>Password</label>
<input type="password" v-model="password">
</div>
<button @click.prevent="register">Register</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
name: '',
email: '',
password: ''
}
},
methods: {
register() {
// 这里写注册逻辑
}
}
}
</script>
```
接下来,我们需要在router/index.js中设置路由,代码如下:
```
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Register from '@/components/Register'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Login',
component: Login
},
{
path: '/register',
name: 'Register',
component: Register
}
]
})
```
最后,在App.vue文件中添加路由视图代码:
```
<template>
<div id="app">
<router-view/>
</div>
</template>
```
这样,我们就完成了一个简单的登录注册界面。当用户访问项目根目录时,会自动跳转到登录页面,输入账号密码后点击登录按钮,会进入到主页面;当用户点击注册按钮时,会进入到注册页面进行注册。
希望这个示例能够帮助您理解如何使用Vue框架编写登录注册界面。