面试题：Vue自定义指令中如何获取绑定元素及指令参数

Question

请描述在Vue自定义指令的钩子函数中，如何获取绑定指令的DOM元素，以及如何获取指令绑定的值和参数。并给出一个简单示例代码说明。

Answer 1

获取方式

1. 获取绑定指令的DOM元素：在Vue自定义指令的钩子函数中，第一个参数 el 就是绑定指令的DOM元素。
2. 获取指令绑定的值：通过钩子函数的第二个参数 binding 的 value 属性获取。
3. 获取指令绑定的参数：通过钩子函数的第二个参数 binding 的 arg 属性获取。

示例代码

<template>
  <div>
    <input v-highlight="'red'" :arg="'underline'">
  </div>
</template>

<script>
export default {
  directives: {
    highlight: {
      mounted(el, binding) {
        el.style.color = binding.value;
        if (binding.arg) {
          el.style.textDecoration = binding.arg;
        }
      }
    }
  }
}
</script>

在上述示例中，v-highlight="'red'" 指令绑定的值为 'red'，通过 binding.value 获取，arg 参数为 'underline'，通过 binding.arg 获取，然后将输入框文字颜色设为红色，并根据参数添加下划线。