本文是我在学习过程中记录学习的点点滴滴，目的是为了学完之后巩固一下顺便也和大家分享一下，日后忘记了也可以方便快速的复习。

自定义过滤器及开发插件

• 前言
• 一、自定义全局过滤器
• • 1.1、过滤器是什么？
  • 1.2、自定义全局过滤器及使用
• 二、自定义局部过滤器
• 三、开发插件
• • 3.1、如何使用插件
  • 3.1、开发插件

前言

今天主要学习的是关于自定义全局过滤器和局部过滤器的方法技能和自己开发插件的一般方法技能。

一、自定义全局过滤器

1.1、过滤器是什么？

概念：用来对 vue 中的属性或数据进行过滤，即在显示之前进行数据处理或筛选

作用：过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)
语法：
{{data|filter(参数) }
注意：data 实际上是 filter 的第一个参数（隐性参数），参数是 第 2 个及后面的参数

用法示例：

{{ message | capitalize }}<div v-bind:id="rawId | formatId"></div>

1.2、自定义全局过滤器及使用

使用全局方法 Vue.filter(过滤器 ID,过滤器执行的函数)，所谓全局方法就是在多个实例中都可以使用。比如再定义一个 new Vue({}), 这个实例挂载的元素中也可以使用。
过滤器执行的函数一般建议用箭头函数来表示（就是lambda
表达式写法）

注意：过滤器要先定义，然后再 new vue 实例，否则会失效且 报错。（也就是过滤器要写在 new Vue（）前面哦）

<div id="app"><h3>{{8|addZero}}</h3><h3>{{12.345678|filterNum(3)}}</h3><h3>{{12.045|filterNum(2)}}</h3><h3>{{12.3051|filterNum(2)}}</h3></div><script>//自定义过滤器,当数字为 1 位数字时，在前面加 0，变成 2 位数//过滤器执行的函数第一个参数 data 就表示要过滤处理的数据（隐性参数），过滤器名称后面还可以有很多个参数，这个含义就要具体根据过滤器的不同决定Vue.filter("addZero", function (data) {// console.log(data);//data 就表示要格式化的数据，此处就为 8return data<10?"0"+data:data;})//过滤器执行的函数用箭头函数表示，对 data 保留 n 位小数Vue.filter("filterNum",(data,n)=>{// console.log(data,n)return data.toFixed(n);//toFixed 是 js 的一个固有方法，用来保留几位小数的，参数就是要保留的几位小数// 注意：当要保留 2 位数字时，第 3 位数字为 5，且 5 后面不再有数字时，不进位，有数字且为 1 及以上就进位})var vm = new Vue({el: "#app", data: {}})</script>

结果：

addZero是自定义的方法，filterNum是js的内置函数，其后面的参数是要保留的小数，改方法当要保留 2 位数字时，第 3 位数字为 5，且 5 后面不再有数字时，不进位，有数字且为 1 及以上就进位，其余以此类推。

二、自定义局部过滤器

局部过滤器就是写在实例内部，通过 filters 选项设置，只能应用在对应的 vue 实例挂载的 dom 上 。

<div id="app">{{ msg | formatmy }}</div><script>new Vue({el: "#app",data: {msg:'hello vue' },filters: {// 此处 vaule 就是表示 formatmy 要修饰的字符串，即是msg ；过滤器也就是一个方法，因此下面的function代码去掉也行（简写方法）formatmy: function (value) {return value.split("").reverse().join("")}/* formatmy: value=>{return value.split("").reverse().join("")} */}});</script>

运行结果：

说明：如果觉得自己写过滤器函数麻烦，也可以使用第三方工具库，里面有很多函数，与过滤器功能类似。都是些 js 文件，引入就可以用了。如:
（1）lodash：里面的函数基本带有下划线开头，俗称下划线库。
（2）date-fns。要对日期进行操作，可以使用 date-fns 工具库【date-fns 是一个现代的 JavaScript 日期工具类库，提供了最全面、最简单和一致的工具集，用于在浏览器和 Node.js 中操作JavaScript 日期。】
（3）Accounting.js。用来将一个数字格式化为货币格式
在简单项目中一般不会使用，在需要使用的时候，你记得有，再去具体查找资料看下就可

三、开发插件

作用：
【官网】插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：
（1）添加全局方法或者属性。如: vue-custom-element
（2）添加全局资源：指令/过滤器/过渡等。如 vue-touch
（3）通过全局混入来添加一些组件选项。如 vue-router
（ 4 ） 添 加 Vue 实 例 方 法 ， 通 过 把 它 们 添 加
到 Vue.prototype 上实现。

3.1、如何使用插件

通过全局方法 Vue.use() 使用插件。它需要在你调用 new
Vue() 启动应用之前完成：

// 调用 `MyPlugin.install(Vue)` Vue.use(MyPlugin)new Vue({// ...组件选项})

也可以传入一个可选的选项对象：

Vue.use(MyPlugin, { someOption: true })

3.1、开发插件

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

MyPlugin.install = function (Vue, options) {// 1. 添加全局方法或属性Vue.myGlobalMethod = function () {// 逻辑... }// 2. 添加全局资源Vue.directive('my-directive', {bind (el, binding, vnode, oldVnode) {// 逻辑... }... })// 3. 注入组件选项Vue.mixin({created: function () {// 逻辑... }... })// 4. 添加实例方法Vue.prototype.$myMethod = function (methodOptions) {// 逻辑... }}

vue 官网给我们提供了 Vue-Router、Vuex 等插件，下面我们来开发一个插件。

定义插件 plugin.js，一般是一个 js 文件，放在 js 文件夹下。固定格式：
（function（）{
…
}）（）

plugin.js具体代码：

(function(){// 先声明自己开发的插件对象 MyPluginconst MyPlugin={}//一定要通过一个 install 方法进行定义，可理解为外面调用这个插件就是去安装这个插件MyPlugin.install = function (Vue, options) {// 1. 添加全局方法或属性Vue.myGlobalMethod = function () {// 逻辑要看你想实现什么功能,这里简单测试alert('MyPlugin 插件的全局方法 myGlobalMethod 被调用了')}// 2. 添加全局指令Vue.directive('my-directive', {inserted (el, binding) {//钩子函数 bind 换为 inserted// 逻辑... //binding.value 就获取到绑定到指令上的值el.innerHTML="MyPlugin 插件的指令 my-directive 被调用了"+binding.value}})// 3. 添加实例方法,Vue.prototype 得到 Vue 的原型，$myMethod 为方法名，$不能少Vue.prototype.$myMethod = function (methodOptions) {// 逻辑... alert('Vue 实例的方法 myMethod 被调用了')}// 4.定义全局过滤器，首字母大写Vue.filter("upcase", function(value) {// value 为 null 就什么都不做if (!value) return '' value = value.toString()// slice 表示从第 1 个字符取后面所有的return value.charAt(0).toUpperCase() + value.slice(1)})}//最后还要将插件暴露出来，即将插件添加到 window 对象，固定格式window.MyPlugin=MyPlugin})()//最后这个()不能少，让它立即执行

主代码：

<script src="js/vue.js"></script><script src="js/plugin.js"></script></head><body><div id="app"><span v-my-directive="msg"></span><h3>{{msg|upcase}}</h3></div><script>// 引入插件 MyPlugin，MuPlugin 两端没有单引号，实质就是去安装 MyPlugin 插件Vue.use(MyPlugin)var vm = new Vue({el: "#app", data: {msg: "hello world"}});// 调用 vue 实例的方法，注意是 vm 调用，不是 Vue，因为不是全局方法，是实例方法vm.$myMethod("徐照兴")// 调用 Vue 的全局方法，注意这里是 Vue，而不能用 vm，因为是全局的方法Vue.myGlobalMethod()</script></body>

结果：
运行结果：弹出二个弹框，并在页面上显示【MyPlugin 插件的指令my-directive 被调用了 helloworld】

创作打卡挑战赛 赢取流量/现金/CSDN周边激励大奖