vue基础学习笔记 --- 过滤器和插件-优快云博客

本文链接：https://blog.youkuaiyun.com/MImi_0612/article/details/126107834

本文详细介绍了Vue中的过滤器，包括过滤器的定义、使用方式及应用场景。同时，深入讲解了自定义插件的制作过程和作用，包括install方法、全局功能添加以及如何在Vue应用中使用自定义插件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

过滤器

1.什么是过滤器？

过滤器就是把要显示的文本进行特定的格式化处理，再进行显示

但是过滤器并没有改变原本的数据，只是产生了格式化之后新的数据

2.使用方式

过滤器分为全局过滤器和局部过滤器

（1）全局过滤器：Vue.filter(过滤器名称，function（value1，[value2,...]){ 数据处理步骤 })

（2）局部过滤器：在vue实例中使用filter选项，只在当前实例范围内可用

new Vue({

filter:{

过滤器名称：function（value1，[value2，...]）{

数据处理步骤

}

})

3.过滤器可以用在两个地方：{{}}和v-bind表达式

自定义插件

1.插件的作用：

（1）插件一般会为vue添加全局功能，如：全局方法，全局指令，过滤器等

（2）vue插件通过install 方法来给vue添加全局功能

（3）通过vue.use使用插件，他需要在你调用new Vue（）启动之前完成

2.使用自定义插件的步骤:

（1）创建一个plugins.js文件，在此文件中声明myPlugin插件对象 : const MyPlugin = {} , MyPlugin.install = function (vue,options){}

（2）在上述方法中添加全局方法、全局指令、实例方法

（3）window.MyPlugin = MyPlugin 将插件添加到window对象中

(function(){
    const MyPlugin = {}
    MyPlugin.install = function(Vue,options){
    //添加全局方法
    Vue.myGlobalMethod = function(){
        ...
    }
    //添加全局指令
    Vue.directive('my-directive',{
        inserted:function(el,binding){
            el.innerHTML = 'MyPlugin插件 my-directive：'+binding.value
        }
    })
    //添加实例方法
    Vue.prototype.$myMethod = function(methodOption){
    ...
    }
}
//将插件添加到window对象中
window.MyPlugin = MyPlugin
})()

（4）在html文件中引入plugins.js

（5）创建vue实例

（6）调用自定义的全局方法，是vue调用

（7）调用vue实例方法，用vm调用，不是vue调用

<body>
    <div id='app'>
        <span v-my-directive = 'content'></span>
    </div>
    <script src='...vue.js' type='text/javascript'></script>
    <script src='...plugins.js' type='text/javascript'></script>
    <script>
        Vue.use(MyPlugin)
//创建vue实例
        var vm = new Vue({
        el:'#app',
        data:{content:'hello'}
        })
//调用自定义的全局方法，用vue调用
        Vue.myGlobalMethod()
//调用vue实例方法，用vm调用
        vm.$myMethod('11')
    </script>
</body>