{{ price | currency }}
``` ### 结语 自定义指令和全局过滤器是Vue.js赋予开发者的两大利器，它们不仅让DOM操作和数据格式化变得更加灵活和高效，还极大地提升了代码的可维护性和复用性。通过合理使用这些特性，你可以轻松打造出功能丰富、体验优良的Vue.js应用。在码小课的学习旅程中，深入探索这些高级功能，将让你的Vue开发技能更上一层楼。
在Vue.js的广阔天地里，自定义指令与全局过滤器是两大强大且灵活的特性，它们为开发者提供了深度定制和扩展Vue应用的能力。今天，我们就来深入探讨如何在Vue.js项目中优雅地利用这些特性，让你的代码更加高效、可维护，并赋予项目更多的个性化色彩。
### 自定义指令：让DOM操作更灵活
Vue.js的自定义指令是一个强大的功能，它允许你封装对DOM的重复操作，使得这些操作能够像Vue组件一样可重用。通过自定义指令，你可以轻松实现一些Vue内置指令（如`v-bind`、`v-model`）难以直接达成的复杂DOM交互逻辑。
**创建自定义指令**
Vue.js提供了两种方式来注册自定义指令：全局注册和局部注册。全局注册的指令在整个Vue应用中都可用，而局部注册的指令则仅在其被注册的组件内部可用。
```javascript
// 全局注册自定义指令 'v-focus'
Vue.directive('focus', {
// 当被绑定的元素插入到DOM中时……
inserted: function (el) {
// 聚焦元素
el.focus();
}
});
// 或者，局部注册（在组件的directives选项中）
export default {
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus();
}
}
}
}
```
**使用自定义指令**
一旦自定义指令被注册，你就可以在模板中像使用Vue内置指令一样使用它了。
```html
```
### 全局过滤器：数据处理的优雅之道
在Vue.js中，全局过滤器允许你定义一些可复用的文本格式化函数，这些函数可以在模板中通过管道符`|`来调用，极大地简化了数据的展示逻辑。
**注册全局过滤器**
全局过滤器通过`Vue.filter()`方法来注册，它们接收两个参数：过滤器的名称和一个函数。这个函数接收一个值作为参数，并返回处理后的新值。
```javascript
// 注册一个全局过滤器，用于格式化货币
Vue.filter('currency', function (value) {
if (!value) return '0.00';
value = parseFloat(value).toFixed(2);
return `$${value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}`;
});
```
**在模板中使用全局过滤器**
注册后的全局过滤器可以在任何组件的模板中通过管道符`|`来调用。
```html