vue 过滤器和自定义指令的使用

当我们在使用 Vue.js 构建应用程序时，我们有时需要对数据进行格式化或者在 DOM 元素上添加特殊功能。这时，Vue.js 提供了两种方案：过滤器和自定义指令。

Vue 过滤器

过滤器是应用于文本转换的 Vue 函数。它们可以用于一些常见的文本格式化任务，例如通过将字符串转换为大写或小写。

全局过滤器

我们可以使用 Vue.filter() 方法创建一个全局过滤器，语法如下：

Vue.filter('filterName', function(value) {
  // 处理值的逻辑
  return newValue;
})

其中，第一个参数是过滤器的名称，第二个参数是处理值的函数。例如：

// 定义一个全局的过滤器，将字符串的首字母转换成大写
Vue.filter('capitalize', function(value) {
  if (!value) return '';
  value = value.toString();
  return value.charAt(0).toUpperCase() + value.slice(1);
})

在 HTML 模板中使用过滤器，可以通过 {{ value | filterName }} 的形式调用，例如：

<!-- 原始的数据 -->
<p>{{ message }}</p>
<!-- 将 message 的首字母转换成大写 -->
<p>{{ message | capitalize }}</p>

局部过滤器

除了全局过滤器，我们还可以在组件中定义局部过滤器，例如：

Vue.component('my-component', {
  // 注册局部过滤器
  filters: {
    filterName: function(value) {
      // 处理值的逻辑
      return newValue;
    }
  },
  data() {
    return {
      message: 'hello world',
    };
  },
  template: `
    <div>
      <p>{{ message }}</p>
      <p>{{ message | filterName }}</p>
    </div>
  `
})

Vue 自定义指令

与过滤器不同，自定义指令是用于操作 DOM 元素的，可以用于实现一些特殊的交互和动画效果。

注册和使用自定义指令

我们可以使用 Vue.directive() 方法注册一个全局自定义指令，语法如下：

Vue.directive('directiveName', {
  // 指令的定义
})

其中，directiveName 是指令的名称，可以在模板中使用 v-directiveName 的形式调用。例如：

// 定义一个全局的自定义指令，用于改变背景颜色
Vue.directive('bg-color', {
  bind(el, binding, vnode) {
    el.style.backgroundColor = binding.value;
  }
})

在模板中使用自定义指令，可以写成 v-directiveName 的形式，例如：

<div v-bg-color="'red'">这个 div 的背景颜色会变成红色</div>

自定义指令的钩子函数

自定义指令有多个钩子函数，可以用于在不同的阶段操作 DOM。下面是常用钩子函数的说明：

• bind：只调用一次，指令第一次绑定到元素时调用，可以在这里进行一些初始化工作；
• inserted：被绑定元素插入父节点时调用；
• update：被绑定元素所在的模板更新时调用，但是可能发生在其子元素的更新之前；
• componentUpdated：被绑定元素所在模板完成一次更新周期时调用；
• unbind：只调用一次，指令与元素解绑时调用，可以在这里进行一些清理工作。

我们可以在定义指令时指定一个或多个钩子函数。例如：

Vue.directive('my-directive', {
  bind(el, binding, vnode) {
    // 绑定时的逻辑
  },
  inserted(el, binding, vnode) {
    // 插入父节点时的逻辑
  },
  update(el, binding, vnode, oldVnode) {
    // 更新时的逻辑
  }
  // ……
})

自定义指令的参数

自定义指令可以接受参数，参数可以在指令的钩子函数中使用。在模板中，参数可以通过 v-directiveName:parameterName 来传递，例如：

Vue.directive('my-directive', {
  bind(el, binding, vnode) {
    // 获取参数
    const arg = binding.arg;
    // 获取值
    const value = binding.value;
    // ……
  }
})

在模板中使用时：

<!-- 调用 my-directive 指令，并传递参数 foo -->
<div v-my-directive:foo="'bar'"></div>

自定义指令的修饰符

自定义指令还可以接受修饰符，修饰符可以在指令的钩子函数中使用。在模板中，修饰符可以通过 v-directiveName.modifier 来传递，例如：

Vue.directive("my-directive", {
  bind(el, binding, vnode) {
    // 判断是否存在修饰符
    if (binding.modifiers.hide) {
      el.style.display = "none";
    }
  },
});

在模板中使用时：

<!-- 调用 my-directive 指令，并传递修饰符 hide -->
<div v-my-directive.hide></div>

示例说明

示例一：使用过滤器格式化日期

我们可以使用过滤器来格式化日期。在下面的例子中，我们定义一个全局过滤器 date，用于将时间戳格式化为可读性更好的日期格式：

Vue.filter('date', function(value) {
  if (!value) return '';
  const date = new Date(value);
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  return `${year}-${month}-${day}`;
})

在 HTML 模板中，我们可以这样使用过滤器：

<p>{{ timestamp | date }}</p>

示例二：使用自定义指令实现懒加载图片

懒加载是一种优化技术，通过延迟加载页面上的图片，可以提高页面加载速度。下面的例子中，我们定义一个自定义指令 lazy，用于实现图片的懒加载：

Vue.directive('lazy', {
  bind: function(el, binding) {
    let lazyImage;
    // 创建一个观察器
    const io = new IntersectionObserver(function(entries) {
      // 如果元素进入视窗，则设置 img 元素的 src 属性
      if (entries[0].isIntersecting) {
        lazyImage.src = binding.value;
        io.unobserve(el);
      }
    });
    // 将观察器绑定到元素上
    io.observe(el);
    // 在 img 元素中添加一个占位符
    lazyImage = document.createElement('img');
    lazyImage.src = 'https://via.placeholder.com/350x150';
    el.appendChild(lazyImage);
  }
})

使用这个自定义指令非常简单，只需要将图片的路径绑定到指令中即可：

<img v-lazy="'https://example.com/image.jpg'">