Vue全家桶--07 Vue过滤器和插件

Vue全家桶--07 Vue过滤器和插件

7.1 过滤器 

 7.1.1 什么是过滤器

 过滤器对将要显示的文本，先进行特定格式化处理，然后再进行显示.

 注意：过滤器并没有改变原本的数据，只是产生新的对应的数据

 

7.1.2 使用方式

**定义过滤器：

 全局过滤器

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

 局部过滤器

new Vue({

        filter:{
            过滤器名称:function(value1,[,value2,...]){

            }
        }
    })

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

<!-- 在双花括号中 -->
<div>{{数据属性名称 | 过滤器名称}}</div>
<div>{{数据属性名称 | 过滤器名称(参数值)}}</div>
<!-- 在 `v-bind` 中 -->
<div v-bind:id="数据属性名称 | 过滤器名称"></div>
<div v-bind:id="数据属性名称 | 过滤器名称(参数值)"></div>

 Demo

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <h3>过滤器单个参数</h3>
        <p>{{content | contentFilter}}</p>
        <input type="text" :value="content | contentFilter">

        <h3>过滤器多个参数</h3>
        <p>{{ Net | add(Java,Vue) }}</p>
    </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', 'XXX').replace('SB', 'XX');
        })

        new Vue({
            el: '#app',
            data: {
                content: 'tmd是个sb',
                Net:90,
                Java:89,
                Vue:85
            },
            filters: {
                add (num1, num2, num3) {//add 过滤名，num1就是 | 左表的第一个参数
                    return num1 + num2 + num3;
                }
            }
        });
    </script>
</body>

</html>

 

7.2 自定义插件

 插件：1.插件通常会为Vue添加全局功能，一般是添加全局方法/全局指令/过滤器等

　　　 2.Vue插件有一个公开方法 install，通过 install方法给Vue添加全局功能

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

 

plugins.js

(function(){
  　// 声明 MyPlugin 插件对象
　  const MyPlugin = {}
　　MyPlugin.install = function (Vue, options) {
　　　　// 1. 添加全局方法
　　　　Vue.myGlobalMethod = function () {
　　　　　　alert('MyPlugin插件: 全局方法生效')
　　　　}
　　　　// 2. 添加全局指令
　　　　Vue.directive('my-directive', {
　　　　　　　　inserted: function (el, binding) {
　　　　　　　　el.innerHTML = "MyPlugin插件 my-directive:" + binding.value
　　　　　　}
　　　　})
　　　　// 3. 添加实例方法
　　　　Vue.prototype.$myMethod = function (methodOption) {
　　　　　　　　alert('Vue 实例方法生效：' + methodOption)
　　　　}
　　}
　　// 将插件添加到 window 对象中
　　window.MyPlugin = MyPlugin
})() // 不要少了括号()，让它立即执行

 html页面

<body>
    <div id="app">

        <span v-my-directive="content"></span>

    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./js/plugins.js"></script>
    
    <script>
        // 1.引入自定义插件 MyPlugin
        // 如果报错:Uncaught ReferenceError: MyPlugin is not defined
        // 解决方法: 查看 plugins.js 是否引入，如果引入还是报错，检查 js 语法，特别是最后一行不要少了括号 ()
        Vue.use(MyPlugin);

        // 2. 创建 Vue 实例, 模板中使用引用全局指令 v-my-directive="content"
        var vm = new Vue({
            el: '#app',
            data: {
                content:'hello'
            }
        });
        
        //3.调用自定义全局方法 Vue调用
        Vue.myGlobalMethod();

        //4.调用Vue实例方法 vm调用
        vm.$myMethod('123');
    </script>
</body>

 

posted @ 2021-11-03 13:26  youguess  阅读(88)  评论(0)  编辑  收藏  举报