自定义过滤器及开发插件

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

---

前言

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

一、自定义全局过滤器

1.1、过滤器是什么？

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

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

用法示例：

<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<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 就表示要格式化的数据，此处就
为 8
return 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">
<!-- 下面用过滤器方法来实现字符串的倒置 formatmy 为过滤
器，formatmy 在下面 vue 实例中定义-->
{{ 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(){
// 先声明自己开发的插件对象 MyPlugin
const 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>
<!-- 导入插件 plugin.js ，而且前面要先导入 vue.js,因为插件开发过
程中就需要用到 Vue-->
<script src="js/plugin.js"></script>
</head>
<body>
<div id="app">
<!-- v-一定要加在自定义指令最前面 -->
<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】