Global filter

// Define a global filter

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

  var dt = new Date(input);

  // Date of acquisition

  var y = dt.getFullYear();

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

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

  // If the string type passed in is equal to yyyy MM DD after being converted to lowercase, then the year month day is returned

  // Otherwise, return year month day hour: minute: Second

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

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

  } else {

    // Get time, minute and second

    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}`;

  }

});

Note: when there are two filters with the same name, they will be called according to the principle of proximity, that is, the local filter takes precedence over the global filter!
Keyboard modifier and custom keyboard modifier 1.x

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

Custom keyboard modifiers in 2.x
To customize the alias of the case modifier, Vue.config.keyCodes. Name = key value:

Vue.config.keyCodes.f2 = 113;
Use the custom key modifier:

Custom instruction
Customize global and local custom instructions:

// Customize the global instruction v-focus to automatically get the focus for the bound elements:

   Vue.directive('focus', {

     inserted: function (el) { // Inserted means called when the bound element is inserted into the parent node

       el.focus();

     }

   });

   // Customize the local instructions v-color and v-font-weight to set the specified font color and font weight for the bound elements:

     directives: {

       color: { // Sets the specified font color for the element

         bind(el, binding) {

           el.style.color = binding.value;

         }

       },

       'font-weight': function (el, binding2) { // The shorthand form of the custom instruction is equivalent to defining two hook functions: bind and update

         el.style.fontWeight = binding2.value;

       }

     }

How to use custom instructions:

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