vue2.0的登陆页面

以下是一个基本的Vue 2.0登录页面的示例代码：

<template>
  <div class="login-container">
    <h1>Login</h1>
    <form>
      <div class="form-group">
        <label for="username">Username</label>
        <input type="text" class="form-control" id="username" v-model="username">
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" class="form-control" id="password" v-model="password">
      </div>
      <button type="submit" class="btn btn-primary" @click.prevent="login">Login</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // perform login logic here
      // you can access the username and password values through this.username and this.password
    }
  }
}
</script>

<style>
.login-container {
  margin: 50px auto;
  width: 400px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

input[type=text], input[type=password] {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}
</style>

这是一个简单的表单，其中包含用户名和密码输入框以及一个登录按钮。当用户点击登录按钮时，`login()`方法会被调用，您可以在其中编写登录逻辑。在组件的`data`属性中，我们定义了`username`和`password`变量，并使用`v-model`指令将其绑定到输入框上，以实时更新这些变量的值。