vue基本语法学习-4_自定义指令、钩子函数

1、全局自定义指令。
我们定义一个自己的指令 【v-focus】获取控件的焦点。
在main.js中加入

// 注册一个全局自定义指令 【v-focus】
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

在TestMyComponents.vue中使用

    <table>
      <tr>
        <td>
          <p>测试全局定义的指令v-focus</p>
        </td>
        <td>
          <input v-focus>
        </td>
      </tr>
    </table>

测试：首次进入页面的时候输入框就会获取焦点

2、局部自定义指令

定义一个局部指令

  //定义局部的自定义指令
  var localCommand = {
    inserted: function (el) {
      el.focus()// 聚焦元素
    },
  }

注册一个局部指令

   directives:{
     // 定义局部的自定义指令，功能就是获取焦点
     'local-focus':localCommand,
   }

使用：
2个元素同时设置，以下面一个获取焦点

<table>
      <tr>
        <td>
          <p>测试局部的自定义指令v-local-focus (2个元素同时设置，以下面一个获取焦点)</p>
        </td>
        <td>
          <!-- 使用局部的自定义指令 -->
          <input v-local-focus>
        </td>
      </tr>
    </table>

运行截图：

3、钩子_钩子函数
指令定义函数提供了几个钩子函数（可选）：

• bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
• inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
• update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
• componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
• unbind: 只调用一次， 指令与元素解绑时调用。
  

4、钩子_钩子函数参数

• el: 指令所绑定的元素，可以用来直接操作 DOM 。

• binding: 一个对象，包含以下属性：

  name: 指令名，不包括 v- 前缀。
  value: 指令的绑定值， 例如： v-my-directive=“1 + 1”, value 的值是 2。
  oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  expression: 绑定值的表达式或变量名。 例如 v-my-directive=“1 + 1” ， expression 的值是 “1 + 1”。
  arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 “foo”。
  modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。

• vnode: Vue 编译生成的虚拟节点。

• oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

一个演示钩子函数和参数的例子

<template>
  <div class = "mycomponents" >

    <div v-focus:test.a.b="count_total"></div>

  </div>
</template>

<script>
  export default {
    name: 'MyComponents',
    data () {
      return {
        count_total:123,
      }
    },

    directives: {
      // 定义局部的自定义指令，功能就是获取焦点
      'focus': {
        inserted: function (el) {
          el.focus()// 聚焦元素
          // alert("inserted")
        },

        bind: function (el, binding, vnode) {
          var s = JSON.stringify
            el.innerHTML =
              'name: '       + s(binding.name) + '
' +
              'value: '      + s(binding.value) + '
' +
              'expression: ' + s(binding.expression) + '
' +
              'argument: '   + s(binding.arg) + '
' +
              'modifiers: '  + s(binding.modifiers) + '
' +
              'vnode keys: ' + Object.keys(vnode).join(', ')
        },
      }
    }
  }
</script>
<style scoped>
  .mycomponents {
    text-align:left
  }
</style>

运行截图：