VUE 过滤器以及插件

原创

粘你一身大鼻嘎 2022-06-23 12:45:33 ©著作权

文章标签 html 数据属性数据 文章分类 运维

©著作权归作者所有：来自51CTO博客作者粘你一身大鼻嘎的原创作品，请联系作者获取转载授权，否则将追究法律责任

VUE 过滤器以及插件

过滤器

什么是过滤器

过滤器对将要显示的文本，先进行特定格式化处理，然后在进行显示。
注意：过滤器并没有改变原本的数据，只是产生新的对应的数据。

使用方式

定义过滤器

全局过滤器

Vue.filter( 过滤器名称 , function(value) ){
  // 数据处理逻辑
})

局部过滤器

在 vue 实例中使用 filter 选项，当前实例范围可用。

new Vue({
  filters : {
    过滤器名称:function ( value ) {
      // 数据处理逻辑
    }
  }
})

使用过滤器

过滤器可以用在两个地方：双花括号{{}} 和 v-bind 表达式

<div> {{ 数据属性名称 | 过滤器名称 }} </div>
<div> {{ 数据属性名称 | 过滤器名称 }} </div>

<div v-bind:id=" 数据属性名称 | 过滤器名称 "> </div>
<div v-bind:id=" 数据属性名称 | 过滤器名称( 参数值 ) "> </div>

演示一下

需求

实现过滤敏感字符，如当文本中有 tmd、sb 都进行过滤。
过滤器传入多个参数，实现求和运算。

实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器和插件</title>
</head>

<body>
    <div id="app">
        <h3>测试过滤器单个参数</h3>
        <p>{{ content | contentFilter }}</p>
        <input type="text" :value=" content | contentFilter ">
        <hr>
        <h3>测试过滤器多个参数</h3>
        <p>{{ javaScore | add(vueScore,pythonScore) }}</p>
        <input type="text" :value="javaScore | add(vueScore,pythonScore)">
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        // 全局过滤器
        // Vue.filter('contentFilter', function (value) {
        //     if (!value) {
        //         return ''
        //     }
        //     return value.toString().toUpperCase().replace('TMD', '***').replace('SB', '**')
        // })
        new Vue({
            el: '#app',
            data: {
                content: '小伙子，你TMD就是个大SB！！！',
                javaScore: 99,
                vueScore: 88,
                pythonScore: 77
            },
            filters: {
                // 定义局部过滤器
                contentFilter(value) {
                    if (!value) {
                        return ''
                    }
                    return value.toString().toUpperCase().replace('TMD', '***').replace('SB', '**')
                },
                add(num1, num2, num3) {
                    // num1 其实就是 | 左边的数据
                    return num1 + num2 + num3;
                }
            }
        })
    </script>
</body>

</html>

VUE 过滤器以及插件_数据

自定义插件

插件的作用

插件通常会为Vue添加全局功能，一般是添加全局方法/全局指令/过滤器等。
Vue插件有一个公开的方法 install ，通过 install 方法给 vue 添加全局功能。
通过全局方法 Vue.use() 使用插件，他需要在你调用 new Vue() 启动应用之前完成。

案例

创建插件

首先定义一个插件，创建js文件夹，在js文件夹中创建 plugins.js 文件

(function(){

    // 声明 MyPlugin 插件对象
    const MyPlugin = {}

    MyPlugin.install = function (Vue, options) {
        // 1. 添加全局方法或 property
        Vue.myGlobalMethod = function () {
          alert("MyPlugin.myGlobalMethod 全局方法被调用了")
        }
      
        // 2. 添加全局指令
        Vue.directive('my-directive', {
          inserted (el, binding) {
            // 逻辑...
            el.innerHTML = "MyPlugin.my-directive 指令被调用了" + binding.value
          }
        })
      
        // 3. 注入组件选项
        // Vue.mixin({
        //   created: function () {
        //     // 逻辑...
        //   }
        // })
      
        // 4. 添加实例方法
        Vue.prototype.$myMethod = function (value) {
          // 逻辑...
          alert("Vue 实例方法myMethod被调用了:" + value)
        }
      }

      // 将插件添加到window对象
      window.MyPlugin = MyPlugin

})()

使用插件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义插件</title>
</head>

<body>

    <div id="app">
        <span v-my-directive='content'></span>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <!-- 引入插件一定一定要在引入vue下面！！！ -->
    <script src="js/plugins.js"></script>

    <script>

        // 引入插件，其实就是安装插件
        Vue.use(MyPlugin)

        var vm = new Vue({
            el: '#app',
            data: {
                content: 'hello,wjw'
            }
        })

        // 调用插件中的实例，注意，是vm调用，不是Vue。
        vm.$myMethod('王佳伟')
        // 调用全局方法，注意是Vue调用，不是vm。
        Vue.myGlobalMethod()

    </script>

</body>

</html>