全域性過濾器

// 定義一個全域性過濾器

Vue.filter('dataFormat', function (input, pattern = '') {

  var dt = new Date(input);

  // 獲取年月日

  var y = dt.getFullYear();

  var m = (dt.getMonth() + 1).toString().padStart(2, '0');

  var d = dt.getDate().toString().padStart(2, '0');

  // 如果 傳遞進來的字串型別，轉為小寫之後，等於 yyyy-mm-dd，那麼就返回 年-月-日

  // 否則，就返回  年-月-日 時：分：秒

  if (pattern.toLowerCase() === 'yyyy-mm-dd') {

    return `${y}-${m}-${d}`;

  } else {

    // 獲取時分秒

    var hh = dt.getHours().toString().padStart(2, '0');

    var mm = dt.getMinutes().toString().padStart(2, '0');

    var ss = dt.getSeconds().toString().padStart(2, '0');

    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;

  }

});
 

注意：當有區域性和全域性兩個名稱相同的過濾器時候，會以就近原則進行呼叫，即：區域性過濾器優先於全域性過濾器被呼叫！
鍵盤修飾符以及自定義鍵盤修飾符1.x中自定義鍵盤修飾符【瞭解即可】

Vue.directive('on').keyCodes.f2 = 113;

2.x中自定義鍵盤修飾符
通過Vue.config.keyCodes.名稱 = 按鍵值來自定義案件修飾符的別名：

Vue.config.keyCodes.f2 = 113;
使用自定義的按鍵修飾符：

自定義指令
自定義全域性和區域性的 自定義指令：

// 自定義全域性指令 v-focus，為繫結的元素自動獲取焦點：

   Vue.directive('focus', {

     inserted: function (el) { // inserted 表示被繫結元素插入父節點時呼叫

       el.focus();

     }

   });

   // 自定義區域性指令 v-color 和 v-font-weight，為繫結的元素設定指定的字型顏色 和 字型粗細：

     directives: {

       color: { // 為元素設定指定的字型顏色

         bind(el, binding) {

           el.style.color = binding.value;

         }

       },

       'font-weight': function (el, binding2) { // 自定義指令的簡寫形式，等同於定義了 bind 和 update 兩個鉤子函式

         el.style.fontWeight = binding2.value;

       }

     }
 

自定義指令的使用方式：

<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">