vue2.X Vue过滤器及插件
1. 过滤器
(1) 过滤器没有改变原有数据，只是产生新的对应的数据
(2) 定义过滤器：
全局过滤器：
Vue.filter(自定义过滤器名称,function(value1,[value2,....]){ //数据处理 })
局部过滤器：
new Vue({
filters:{
自定义过滤器名称:function(value1,[value2,....]){ //数据处理 }} })
(3)使用：{{ 数据名|过滤器名}} 和 v-bind:id=”数据名|过滤器名”
多个参数过滤器：{{ 数据名|过滤器名(参数) }} 和 v-bind:id=”数据名|过滤器名(参数)”
<body>
<script src="./node_modules/vue/dist/vue.js"></script>
<div id="app">
<h3>过滤器</h3>
<!-- 要过滤的内容 | 过滤器的名字-->
<p>{{content | contentFilter}}</p>
<h3>多个参数的过滤器</h3>
<!-- 左侧书写的第一个参数是第一个传入过滤器的实参，局部过滤器名小括号后面的参数再依次传入进去 -->
<p>{{num1 | add(num2,num3)}}</p>
</div>
<script>
// 定义全局过滤器
// contentFilter是全局过滤器的自定义名称
Vue.filter("contentFilter",(value)=>{
return value.toUpperCase().replace("AABB","*****").replace("CC","#####");//将要过滤掉的字母全部转换成大写字母统一处理,bb已经被转换成大写字母，替换时要书写已经转换后的字母形式
})
new Vue({
el:"#app",
data:{
content:"嘎嘎哈哈AAbbCC",
num1:10,
num2:20,
num3:30,
},
// 定义局部过滤器
filters:{
// add是自定义的局部过滤器名称,n1,n2,n3是参数
add(n1,n2,n3){
return n1 + n2 + n3
}
}
})
</script>
</body>运行效果：
2.自定义插件
Vue自定义插件部分官方文档：插件 — Vue.js
插件通常为vue添加全局功能，一般添加全局指令/全局方法/过滤器等,没有严格的限制。
vue插件有一个公开方法install,通过install方法给vue添加全局功能。
通过全局方法Vue.use()使用插件,它在new Vue()启动之前完成。
(1) 开发插件：自定义插件：
// 一般插件都有自调用函数
(function () {
//声明MyPlugin插件对象
const MyPlugin = {}//默认空对象
// Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或 property
// 自定义全局方法名为myGlobalMethod
// 构造函数 静态方法 通过构造函数名调用
Vue.myGlobalMethod = function () {
// 逻辑...
alert("MyPlugin插件全局调用方法myGlobalMethod")
}
// 2. 添加全局指令
// 自定义指令名称my-directive
Vue.directive('my-directive', {
inserted(el,binding){
el.innerHTML = "MyPlugin插件 my-directive:" + binding.value
}
})
// 3. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
alert("vue实例方法" + methodOptions)
}
}
//添加window的全局变量
window.MyPlugin = MyPlugin
})()(2) 使用插件
<body>
<!-- 先引用vue 再引用插件 -->
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./js/plugins.js"></script>
<div id="app">
<!-- 自定义插件 -->
<p v-my-directive="content"></p>
</div>
<script>
// 通过全局的方法使用vue插件，需要再调用new vue 之前完成
// 使用插件 通过Vue.use(插件名)
Vue.use(MyPlugin)
const vm = new Vue({
el:"#app",
data:{
content:"嘎嘎",
}
})
// 使用全局方法 通过构造函数名调用
Vue.myGlobalMethod()
// 使用实例方法 vm就是那个实例 插件实例方法$myMethod
vm.$myMethod("调用vue实例方法")
</script>
</body>输出效果：
i.
ii.
iii. 
