vue自定义全局指令和局部指令实现网站登陆页面

抱歉，作为语言AI模型，我没有具体的实现能力，无法为您提供需要的答案。但是，我可以为您提供一些有关Vue自定义指令的基本知识。

Vue中自定义指令可以全局注册或者局部注册。全局注册指令可以在任何Vue实例中使用，而局部注册指令只能在特定的Vue实例中使用。

全局注册自定义指令的方法是：

Vue.directive('directiveName', {
  //指令的定义
})

其中，'directiveName' 是指令的名称，{}内是指令的定义。

局部注册自定义指令的方法是：

new Vue({
  directives: {
    directiveName: {
      // 指令的定义
    }
  }
})

在实现一个网站的登陆页面时，我们可以用自定义全局指令和局部指令来实现一些交互效果，例如：

全局指令：

1. 自动聚焦：当页面加载完成后，输入框自动聚焦。

Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

在输入框中加入 v-focus 即可实现自动聚焦效果。

2. 防抖动：在输入框中输入时，延迟一定时间后再发生请求，防止因为输入过于频繁而发生多次请求。

Vue.directive('debounce', {
  inserted: function (el, binding) {
    let timer
    el.addEventListener('input', () => {
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        binding.value()
      }, 500)
    })
  }
})

在输入框中加入 v-debounce="sendRequest"，sendRequest为方法的名称即可实现防抖动效果。

局部指令：

1. 自动聚焦：同全局指令中的自动聚焦。

directives: {
  focus: {
    inserted: function (el) {
      el.focus()
    }
  }
}

加入 v-focus 即可实现自动聚焦效果。

2. 双向绑定密码框的内容：使输入的密码随着输入动态显示到页面上。

directives: {
  password: {
    twoWay: true,
    priority: 1000,
    bind: function () {
      this.handler = () => {
        this.set(this.el.value)
      }
      this.el.addEventListener('input', this.handler)
    },
    update: function (newValue) {
      this.el.value = newValue
    },
    unbind: function () {
      this.el.removeEventListener('input', this.handler)
    }
  }
}

在密码框中加入 v-model="password | password" 即可实现双向绑定效果。