指令和过滤器的区别及用法

共同点

无论是指令，还是过滤器，都是写在模板中的；都可以注册局部和全局的。

---

不同点

过滤器只是对数据进行处理，指令还可以操作DOM；指令有内置的，过滤器没有。

---

过滤器

有两种使用方式：

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

定义局部过滤器

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

定义全局过滤器

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

---

 内置指令

① 内容渲染指令：v-text、v-html
② 属性绑定指令：v-bind
③ 事件绑定指令：v-on: 简写是 @
④ 双向绑定指令：v-model
⑤ 条件渲染指令：v-show、v-if、v-else、v-else-if
⑥ 列表渲染指令：v-for

---

自定义指令

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind：只调用一次，指令与元素解绑时调用。

---

自定义指令使用场景

• 防抖
• 图片懒加载
• 一键复制功能