Vue如何创建自定义指令?

// directive.js
import Vue from 'vue';

const focus = Vue.directive('focus', {
    // 指令的钩子函数--第一次绑定元素时调用
    bind(el) {
        console.warn('指令的钩子函数：bind');
        console.log(el);
    },
    /**
    * inserted 在元素被插入到页面中的时候调用---vm实例的钩子函数
    * binding是一个对象，包括指令的所有信息
    */
    inserted: function (el, binding) {
        el.focus();
        el.setAttribute('placeholder', 'web秀');
        // 自动聚焦，input提示placeholder输入 "web秀"

        // 其中foo是指令参数--可以打印看看
        console.log(binding.arg);
    },
    // 指令的钩子函数，只调用一次，指令与元素解绑时调用（即当标签被删除时）。
    unbind() {
        // 当指令所在的元素，从页面中移除的时候，unbind钩子函数会被执行
        console.warn('指令的钩子函数：unbind');
    }
})

export {focus}

// main.js
import focus from 'xxx/directive'

<input type="text" v-focus:foo="我是指令参数">

<div>
    <input type="text" v-focus:foo="我是指令参数">
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
  },
  directives:{
    focus:{
      // 创建局部指令
      inserted: function (el, binding) {
        el.focus();
        el.setAttribute('placeholder', 'web秀');
      })
    }
  }
})
</script>

function padZero(number) {
  let tmp = "0" + number;
  return tmp.slice(-2, tmp.length);
}

function countDown(diff) {
  // 剩余毫秒
  let millisecond = diff % 1000;
  // 总秒
  let seconds = (diff - millisecond) / 1000;
  // 剩余秒数
  let realseconds = seconds % 60;
  // 剩余分钟数
  let minutes = (seconds - realseconds) / 60;
  // let realminutes = seconds % 60;
  // let hours = (diff - minutes - seconds) % 86400;
  return diff >= 0 ? padZero(minutes) + "分" + padZero(realseconds) + "秒" : "";
}
...
directives: {
    timer: {
      inserted(el, binding, vnode) {
        const me = vnode.context;
        const flight = me.$store.state.flight;
        // 获取参数，截止时间与当前时间差（单位毫秒）
        let val = +binding.value;
        let timer = window.setInterval(() => {
          val -= 1000; // 每秒减1000毫秒/1秒
          let instance = countDown(val);
          if (!instance) {
            // 倒计时结束，do something
            if (timer) {
              window.clearInterval(timer);
              timer = null;
            }
            return;
          }
          // 格式化的日期插入到页面
          el.innerHTML = instance;
        }, 1000);
      }
    }
}
...

<!-- 截止时间与当前时间差（单位毫秒） -->
<span v-timer='100000'></span>