首页 > 其他分享> 文章详细

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

2021-11-03 13:31:32 阅读：154 来源： 互联网

标签：function 插件 Vue 07 MyPlugin 过滤器全局

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>

标签：function,插件,Vue,07,MyPlugin,过滤器,全局
来源： https://www.cnblogs.com/youguess/p/15465346.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

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

7.1 过滤器

7.2 自定义插件