使用vue编写登录页面代码

使用 Vue 编写登录页面代码的一种方法是：

1. 在页面中引入 Vue 库，并创建 Vue 实例。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      // 在这里定义绑定到登录表单的数据
      username: '',
      password: '',
    },
    methods: {
      // 在这里定义提交登录表单的方法
      login: function() {
        // 在这里发起登录请求，并处理返回结果
      }
    }
  });
</script>

2. 在 HTML 中创建登录表单。

<div id="app">
  <form @submit.prevent="login">
    <label for="username">用户名：</label>
    <input type="text" v-model="username" id="username" required>
    <br>
    <label for="password">密码：</label>
    <input type="password" v-model="password" id="password" required>
    <br>
    <button type="submit">登录</button>
  </form>
</div>

上面的代码中，登录表单的数据(用户名和密码)通过 v-model 绑定到 Vue 实例的数据，提交表单时调用了 Vue 实例的 login 方法。

这只是一种简单的方法，实际应用中还可能有很多其他的细节需要处理，比如：

• 表单验证
• 表单提交时的加载动画
• 登录失败时的错误提示

希望这些内容能对你有所帮助。