vue自定义指令和过滤器

一. 注册自定义指令

1. 全局注册指令

• 全局注册一个自定义指令 v-focus

Vue.drective('focus', {
	// 当被绑定的元素插入到 DOM 中时,触发此钩子
	inserted: (el) => {
		el.focus();
	}
})

• 局部注册自定义指令，组件中接受一个 directives 的选项

directives: {
    focus: {
      inserted: (el, binding) => {
        if (binding.value) {
          el.focus();
        }
      }
    }
  }

• 在模板中使用 v-focus

<input v-focus>

二. 指令的钩子函数

1. 一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind：只调用一次，指令与元素解绑时调用。

2. 钩子函数参数

• el：指令所绑定的元素，可以用来直接操作 DOM 。
• binding：一个对象，包含以下属性：
  1. name：指令名，不包括 v- 前缀。例如 v-focus，name为focus。
  2. value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
  3. oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都 可用。
  4. expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
  5. arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
  6. modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
• vnode：Vue 编译生成的虚拟节点。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

三. 自定义指令简写

当你想在 bind 和 update 时触发相同行为，而不关心其它的钩子。可以简写

1. 全局注册时

Vue.directive('color', function (el, binding, vnode) {
  el.style.backgroundColor = binding.value;
})

2. 局部注册时，在directives选项中

color(el, binding, vnode) {
      el.style.backgroundColor = binding.value;
}

注意： 如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法的 JavaScript 表达式。

四. 过滤器

1. 用处：过滤器用于一些常见的文本格式化
2. 现有一个 toBig 过滤器，用来把字符串转成大写

• 在一个组件的filters选项中注册 局部过滤器

filters: {
    toBig(value) {
      if (value) {
        return value.toString().toUpperCase();
      } else {
        return "";
      }
    }
  }

• 全局注册过滤器

Vue.filter('toBig', function (value) {
  if (value) {
        return value.toString().toUpperCase();
    } else {
        return "";
    }
})

• 调用过滤器

<!-- 在双花括号中 -->
{{str | toBig}}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | toBig "></div>

• 过滤器接收参数

{{ message | filterA('arg1', arg2) }}

这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 ‘arg1’ 作为第二个参数，表达式 arg2 的值作为第三个参数。