Vue实现手机号、验证码登录（60s禁用倒计时）

首先，这篇攻略将分为三个部分来讲解，

• 第一部分：介绍如何使用Vue构建登录表单
• 第二部分：介绍如何在Vue中添加倒计时功能
• 第三部分：介绍如何使用Vue和后端API实现手机号、验证码登录。

第一部分：用Vue构建登录表单

使用Vue编写登录表单需要先新建一个Vue实例，可以通过以下代码来创建并挂载Vue实例。

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <!-- 此处是登录表单内容 -->
  <form>
    <label for="username">手机号</label>
    <input type="text" name="username" v-model="username"/>
    <label for="code">验证码</label>
    <div>
      <input type="text" name="code" v-model="code"/>
      <button @click.prevent="getCode">{{ btnTxt }}</button> <!-- 获取验证码按钮 -->
    </div>
    <button @click.prevent="login">登录</button> <!-- 登录按钮 -->
  </form>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      username: '',
      code: '',
      btnTxt: '获取验证码'
    },
    methods: {
      // 获取验证码方法
      getCode() {
        // TODO...
      },
      // 登录方法
      login() {
        // TODO...
      }
    }
  })
</script>

在上面的代码中，我们使用了Vue的MVVM模式，用v-model来实现双向数据绑定。我们可以通过在Vue实例的data选项中定义需要双向绑定的数据，然后在HTML代码中使用v-model来绑定。比如上面的例子中，我们需要绑定的数据包括username(手机号)、code(验证码)和btnTxt(获取验证码按钮文本)

第二部分：在Vue中添加倒计时功能

要实现禁用 60s 前获取验证码按钮的倒计时功能，我们需要使用Vue中的计时器。我们可以在mounted()生命周期钩子中定义一个计时器，用于更新按钮上的文本和判断是否启用禁用状态。

我们还需要为倒计时提供一个状态标识符，用于控制倒计时是否在运行。在Vue示例中也需要添加这个状态标识符。

<script>
  new Vue({
    el: '#app',
    data: {
      username: '',
      code: '',
      btnTxt: '获取验证码',
      countdown: 60, // 倒计时秒数
      isCountdown: false // 倒计时状态标识符
    },
    methods: {
      // 获取验证码方法
      getCode() {
        if(this.isCountdown) return; // 如果正在计时，不允许继续获取验证码
        // 启动倒计时并发送验证码...
        this.isCountdown = true;
        this.countdown = 60;
        this.btnTxt = '重新获取(' + this.countdown + 's)';
        let timer = setInterval(() => {
          this.countdown--;
          this.btnTxt = '重新获取(' + this.countdown + 's)';
          if(this.countdown <= 0) {
            clearInterval(timer);
            this.btnTxt = '获取验证码';
            this.isCountdown = false;
          } 
        }, 1000)
      },
      // 登录方法
      login() {
        // TODO...
      }
    },
    mounted() {
      // TODO...
    }
  })
</script>

第三部分：使用Vue和后端API实现手机号、验证码登录

当用户在前端输入手机号和验证码并点击登录按钮后，我们需要向后端API发送登录请求，验证用户信息是否正确。如果验证成功，我们可以保存用户信息到前端的localStorage。

在Vue示例中，我们可以定义一个login方法来发送登录请求，接收后端API的返回数据并保存用户信息。

<script>
  new Vue({
    el: '#app',
    data: {
      username: '',
      code: '',
      btnTxt: '获取验证码',
      countdown: 60, // 倒计时秒数
      isCountdown: false // 倒计时状态标识符
    },
    methods: {
      // 获取验证码方法
      getCode() {
        if(this.isCountdown) return; // 如果正在计时，不允许继续获取验证码
        // 启动倒计时并发送验证码...
        this.isCountdown = true;
        this.countdown = 60;
        this.btnTxt = '重新获取(' + this.countdown + 's)';
        let timer = setInterval(() => {
          this.countdown--;
          this.btnTxt = '重新获取(' + this.countdown + 's)';
          if(this.countdown <= 0) {
            clearInterval(timer);
            this.btnTxt = '获取验证码';
            this.isCountdown = false;
          } 
        }, 1000)
      },
      // 登录方法
      login() {
        // 向后端API发送登录请求
        // 使用axios库来发送请求，需要记得先安装（npm install axios）
        axios.post('/login', { phone: this.username, code: this.code })
          .then(res => {
            // 请求成功，保存用户信息到localStorage中
            localStorage.setItem('user', JSON.stringify(res.data.user));
            // TODO...跳转到用户首页或其他页面
          })
          .catch(e => {
            // 请求失败，提示用户输入的手机号或验证码不正确
            alert('手机号或验证码不正确!')
          })
      }
    },
    mounted() {
      // TODO...
    }
  })
</script>

最后需要注意，上述示例中的一些TODO部分需要根据实际后端API和页面逻辑来进行具体实现。