vue如何自定義指令？

自定義獲取元素焦點的指令，v-focus

一、區域性註冊的寫法

需求：當頁面載入時，該元素將獲得焦點；

1. 第一種，通過input的自帶autofocus屬性實現（autofocus在移動版Safari上不工作）
2. 第二種 利用自定義指令實現
   

<template>
  <div class="test-directives">
    <input v-focus />
  </div>
</template>
<script>
export default {
// 元件接收一個 directives 的選項,實現自定義指令的區域性註冊 （區域性註冊指令）,
  directives: {
    focus: { // 指令名稱
      inserted: function(el) { // el是繫結了該自定義指令的dom，就是上面那個input
        el.focus();// 呼叫該input元素的focus方法，實現聚焦
      }
    }
  }
};
</script>

二、全域性註冊的寫法：

1. 可在src下新建一個directives資料夾，該資料夾下定義一個index.js，內容如下：

import Vue from "vue";
Vue.directive("focus", {
  inserted: function(el) {
    el.focus();
  }
});

2. 在main.js中引入剛剛的index.js檔案：

import "@/directives/index.js";

3. 在元件中直接使用該指令即可

<template>
  <div class="test-directives">
    <input v-focus />
  </div>
</template>

該方法，可用於需要定義多個全域性指令的時候。
參考：vue官網