vue directive定义全局和局部指令及指令简写

请允许我用详细的方式来讲解一下"Vue Directive定义全局和局部指令及指令简写"的完整攻略。

Vue Directive指令

Vue Directive指令是Vue中最常用和最重要的部分之一，它可以让你在DOM模板中通过特定的方式操作DOM元素及其属性。Vue指令以"v-"开头，例如"v-if"，"v-for","v-bind"等等。我们可以通过自定义指令来拓展Vue的基本指令。

基本定义

定义一个Vue Directive指令需要使用Vue.directive()方法，该方法需要两个参数：

Vue.directive('directiveName', {
  bind: function(el, binding, vnode) {
    // 操作DOM
  }
});

directiveName表示指令的名称
函数参数：el表示指令绑定的元素，binding表示一个对象，包含了一些指令的信息，例如指令参数，绑定值等等，vnode表示虚拟DOM节点。

全局指令

在Vue中，我们可以通过Vue.directive方法来定义全局指令，这意味着该指令可以在所有组件的模板中使用。可以在创建 Vue 实例之前或之后注册全局指令。

下面是一个简单的"v-focus"指令示例，在元素被绑定时自动获得焦点。

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

局部指令

局部指令只有在使用该指令的组件中才能使用，通过在组件定义中添加directives属性来定义局部指令。例如：

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

指令简写

指令的定义可以使用简写方式，例如"v-on:click"可以简写成"@click"，"v-bind:title"可以简写成":title"。Vue内置了一些常见的指令简写，例如：

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写语法 -->
<a :href="url">...</a>

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写语法 -->
<a @click="doSomething">...</a>

如果你想定义自己的指令简写，可以通过Vue.config.keyCodes属性来实现：

Vue.config.keyCodes.f1 = 112

示例说明

示例一：自定义指令"v-careu"实现换行操作

下面我们自定义一个"v-careu"指令来实现在textarea输入中按回车键时自动添加"\r\n"的功能。

<textarea v-model="textareaContent" v-careu></textarea>

Vue.directive('careu', {
  inserted: function(el) {
    el.addEventListener('keydown', function(event) {
      if (event.keyCode === 13) {
        event.preventDefault();
        let t = el,
          ss = t.scrollTop,
          s = t.value;
        let cp = t.selectionStart,
          ep = t.selectionEnd,
          ct = s.substring(0, cp),
          et = s.substring(ep),
          nt = ct + "\r\n" + et;
        t.value = nt;
        t.scrollTop = ss;
        t.selectionStart = cp + 1;
        t.selectionEnd = cp + 1;
      }
    })
  },
});

示例二：自定义指令"v-countdown"实现倒计时功能

我们还可以使用Vue Directive指令来实现更加复杂的功能。下面我们自定义一个"v-countdown"指令来实现一个简单的30秒倒计时功能。

<span v-countdown="30">30s</span>

Vue.directive('countdown', {
  bind: function(el, binding) {
    let timer = null,
      remain = parseInt(binding.value) || 30;
    el.innerText = remain + "s";
    el.disabled = true;
    timer = setInterval(function() {
      remain--;
      if (remain === 0) {
        el.innerText = '重新获取';
        el.disabled = false;
        clearInterval(timer);
      } else {
        el.innerText = remain + "s";
      }
    }, 1000);
  }
});