vue指令

 // 日历组件 点击输入框 可以显示下面的面板
<div v-click-outside="hide">
   // 不能使用@blur="hide"
  <input  type="text" @focus="show">
  <div v-if="isShow"></div>
   //  autofocus="true"不能自动获取焦点
  <input type="text" v-focus>
</div>
data () {
  directives: {
    focus: { 
      inserted (el, bindings, vnode) {
         // Vue.nextTick() // 等待下一轮页面更新好之后
         el.focus()
      }
    }
    // bindings 绑定的一些属性 , vnode虚拟节点 vnode.context表示当前上下文 指令有生命周期 钩子函数 只调用一次
   // bind 当指令绑定上的时候 会执行一次
  // inserted 插入的时候
  // update 当引用得到数据变化时会执行一个钩子
  // componentUpdate 组件变化或者子vnode 全部更新后调用
 // unbind 指令解绑时调用 只调用一次
    clickOutside: {
        bind(el, bindings, vnode) {
          el.handler = function(e) {
              if(!el.contains(e.target)) {
                 // 拿到表达式
                let method = bindings.expression
                vnode.context[method]()
              }
          }
          document.addEventListener('click' , el.handler)
        },
        unbind (el) {
          document.removeEventListener('click', el.handler)
        } 
      
    }
  },
  return {
    msg: 'hello',
    isShow: false
  },
  methods: {
    show () {
      this.isShow = true
    },
    hide () {
      this.isShow = false
    }
  }
}