Vue3 前端学习（登陆界面，input 与 button的使用）

1.router-view跳转

APP.vue可以类比主函数理解，里面可以写很多内容，但这是个很局限的做法，只适合学习一些前端知识点时候使用，不适合做项目。于是我们使用 将要写的内容拆分开，理解为拆成诸多函数。在函数里实现相关功能。

于是APP.vue写的很简单，因为他只实现路由功能

<template>
  <router-view />
</template>

2.呈现一个登陆界面（纯前端）

LoginVue.vue

<template>
        <div id="login">
            <h3 align="center"> 一个登陆界面 </h3><br />
            <p align="center">
                <label>账号：</label><input type="text" v-model="username" /><br>
                <label>密码：</label><input type="password" v-model="password" /><br>
            </p>
            <p align="center"><button @click="check_account">登录</button></p>
            <p align="center">
                <router-link to="enroll">申请注册</router-link>
            </p>
            <el-button>I am ElButton</el-button>
        </div>
</template>

<script>
import {
          
    ElButton } from element-plus
export default {
          
   
    name: App,
    components: {
          
   
        ElButton
    },
    data() {
          
   
        return {
          
   
            username: "",
            password: "",
        }
    },
    methods: {
          
   
        check_account() {
          
   
            if (this.username == "admin") {
          
   
                this.$router.push("/hello");
            }
        },
    }
}
</script>

<style>
#app {
            
     
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 0px;
}
</style>

3.代码讲解：

属性名	        		说明	类型	             可选值			     默认值
type	        		类型	string	        原生input的type值		  text
modelValue/v-model     绑定值	string/number	        —	               —

在后续的data()函数中为username，password赋予了默认值为空，用户可在前端输入账号密码，账号密码要进一步传到后端验证。

<label>账号：</label><input type="text" v-model="username" /><br>
<label>密码：</label><input type="password" v-model="password" /><br>

当点击“登录”按钮时进行check_account（），函数判断用户提供的账号，密码是否可以通过

check_account() {
          
   
            if (this.username == "admin") {
          
   
                this.$router.push("/hello");
            }
        },

界面呈现： 因为是纯前端，后端没得数据验证，所以设置username为admin时自动登录成功。 后期check_account（）函数要做一些数据验证的修改，目前先这样