Vue自定义指令详解-优快云博客

本文链接：https://blog.youkuaiyun.com/cfr1994/article/details/102669345

自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下：
当页面加载时，该元素将获得焦点 (注意：autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态

<body>
  <div id="app">
    <input type="text" v-focus.stop = "info">
    <input type="text" v-my-focus >
  </div>

  <div id="root">
      <input type="text" v-focus.stop = "info">
      <input type="text" v-my-focus>
  </div>

</body>
<script src="../../lib/vue.js"></script>
<script>
  /* 
    自定义指令有两种定义形式
      1. 全局定义
      2. 局部定义  
  */

  // Vue.directive( 指令名称, 指令的配置选项 )
  /*  v-focus  */
  // 全局定义
  Vue.directive('focus',{
    // 5个javascript钩子，5个中掌握2个
    /* 每一个选项中都有四个参数 */
    bind: function ( el,binding,vnode,oldVnode ) { // 当自定义指令绑定到dom元素时触发
      console.log('bind')
    },
    inserted: function ( el,binding,vnode,oldVnode ) { // 当自定义指令绑定的dom元素插入页面时触发
      console.log( 'el', el ) // 这个就是指令绑定的dom
      console.log( 'binding',binding )
	  console.log( 'vnode',vnode )
	  console.log( 'oldVnode',oldVnode )
	  console.log( 'inserted' )
	  
      el.focus()
      // el.style.background = 'red'
      console.log("b", b)
      if ( binding.modifiers.stop ) {
        //true 
        el.style.background = 'green'
      } else {
        //false 
        el.style.background = 'red'
      }

      el.value = binding.expression
      console.log("c  -  vNode", c)
      console.log("d  - oldVNode", d)
      
	  el.focus()
    },
    updated () { // 当自定义指令的元素或是他的子元素发生变化式触发
    },
    componentUpdate () { //当自定义指令的元素或是他的虚拟子节点 发生变化式触发
    },
    unbind () { // 当自定义指令绑定的元素解绑时触发
    }
  })

  // 局部定义
  new Vue({
    el: '#app',
    data: {
      info: '焦点'
    },
    directives: {
      // 指令名称：选项
      'my-focus': {
        bind () {
        },
        inserted: function ( el ) {
          el.focus()
        }
      }
    }
  })
  
  new Vue({
    el: '#root'
  })
</script>
</html>

钩子函数
- bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
- inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
- update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
- componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用
- unbind：只调用一次，指令与元素解绑时调用
钩子函数参数
- el：指令所绑定的元素，可以用来直接操作 DOM
- binding：一个对象
- vnode：Vue 编译生成的虚拟节点
- oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

自定义事件

<body>
  <div id="app">
    <!-- 自定义事件 -->
    <button @click = "myEvent"> 自定义事件 </button>
  </div>
</body>
<script src="../../lib/vue.js"></script>
<script>
  /* 
    扩展： 自定义事件 - node.js的events模块
      事件的发布  $on    发布【 声明一个事件 】
      事件的订阅  $emit  订阅【 触发一个事件 】
  */
var vm = new Vue({
    el: '#app',
    methods: {
      myEvent () {
        vm.$emit('aa',20000)
      },
    }
  })
    // 事件的发布
    // vm.$on( 事件名称，事件处理程序 )
    vm.$on('aa',function ( val ) {
      console.log( 'aa' + val )
    })
    // vm.$emit(事件名称，事件参数)
    // vm.$emit( 'aa',100 )
</script>
</html>