Vue.js基础语法（三）

佚名 6年前 (2019-04-24) 随笔 555人围观抢沙发百度已收录

1过滤器filter

例如商城中商品的价格，既是动态的，而且重复出现的频率非常高，这就意味着，一些信息是重复的，像前面可以加一个“￥”，后面接一个单位“元”：￥10元。想实现只传价格10，其他信息让其自动生成，vue里提供了过滤器filter来实现。

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

例1：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>过滤器</title>
    </head>
    <body>
        <div id="app">
            <div>
                <input v-model="price">
                {{price | currency}}
            </div>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        Vue.filter('currency', function(val, unit) {
            val = val || 0;
            unit = unit || '元';
            return val + unit;
        });

        var app = new Vue({
            el: '#app',
            data: {
                price: 10
            }
        })
    </script>
</html>

说明：

通过管道符|，将前面的数据price传到后面的过滤器currency中，

Vue.filter()，第一个参数是过滤器的名字，第二个参数是一个function，function也有两个参数（可以自定义的），第一个是传进来的值，第二个是过滤器的值，可以写在括号中传过来，就像调用函数时带着参数一样。

例2：单位换算

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>过滤器2</title>
    </head>
    <body>
        <div id="app">
            <div>
                请输入毫米数：<input type="text" v-model="length"> 
                <br>换算成米：{{length|meter}}
            </div>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        Vue.filter('meter', function(val, unit) {
            val = val || 0;
            unit = unit || '米';
            return (val / 1000).toFixed(2) + unit;  //保留两位小数
        });

        var app = new Vue({
            el: '#app',
            data: {
                length: 100
            }
        })
    </script>
</html>

总结：filter就是解决一些格式的问题，可以提升用户体验的。如果filter内部非常复杂，建议写成计算属性computed，因为computed带有缓存，可重用性强。而filter都是做一些简单的事情。

2自定义指令

2.1基础配置

如果vue自带的指令无法满足需求，就要自定义一个指令，用法就像自定义属性一样，只要在元素上加上这个属性，就具有相应的功能，

组件和指令的区别，组件就像一个人物角色，指令就是人物所拥有的技能，一个人物可以有多种技能，不同的人物也可以有相同的技能。

用v-来自定义一个属性，

用directive来定义一个指令，第一个参数是指令名，这里就不用以v-开头了，第二个参数是回调函数，函数中第一个参数el是元素，就是指令所在的元素会自动传进来，这个元素可以用原生api来调用，也可以用jquery来调用$(el)，第二个参数binding是指令传进来的值和其他基本信息，值在binding.value中

实例：钉住指令

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>自定义指令</title>
        <style>
            .card {
                border: 1px solid #ccc;padding: 10px;margin: 10px;width: 20%;background: #eee;
            }
        </style>
    </head>

    <body style="height: 2000px;">        
        <div id="zyx">
            <div v-pin='card1.pinned' class="card">
                这是一张卡片
                <p><button @click="card1.pinned=!card1.pinned">钉住/取消</button></p>
            </div>
            <div v-pin='card2.pinned' class="card">
                这是一张卡片
                <p><span @click="card2.pinned=!card2.pinned">钉住/取消</span></p>
            </div>            
        </div>

        <script src="lib/vue.js"></script>
        <script>
            Vue.directive('pin',function(el,binding){
                console.log(binding);
                //var $el=$(el);                
                if(binding.value){
                    el.style.position='fixed';
                    el.style.top='10px';
                    el.style.left='10px';
                }else{
                    el.style.position='static';
                }
            });
            
            var zyx = new Vue({
                el: '#zyx',
                data: {
                    card1:{
                        pinned:false
                    },
                    card2:{
                        pinned:false
                    }
                }
            });
        </script>
    </body>
</html>

2.2配置传参及修饰符

上面的钉住指令，想进一步实现，可以钉在不同的方向位置，可以通过加修饰符，是指令后面加.，然后通过binding.modifiers来获取，

传参是指令后面加:,然后通过binding.arg来获取，

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>自定义指令2</title>
        <style>
            .card {
                border: 1px solid #ccc;padding: 10px;margin: 10px;width: 20%;background: #eee;
            }
        </style>
    </head>

    <body style="height: 2000px;">        
        <div id="zyx">
            <div v-pin:true.bottom.left='card1.pinned' class="card">
                这是一张卡片
                <p><button @click="card1.pinned=!card1.pinned">钉住/取消</button></p>
            </div>
            <div v-pin.top.right='card2.pinned' class="card">
                这是一张卡片
                <p><span @click="card2.pinned=!card2.pinned">钉住/取消</span></p>
            </div>            
        </div>

        <script src="lib/vue.js"></script>
        <script>
            Vue.directive('pin',function(el,binding){    
                var pined=binding.value; //值
                var posi=binding.modifiers; //修饰符
                var waring=binding.arg;  //参数              
                                
                if(pined){
                    el.style.position='fixed';
                    for(var key in posi){                    
                        if(posi[key]){
                            el.style[key]='10px';
                        }
                    }
                    if(waring==='true'){
                        el.style.background='pink';
                    }
                }else{
                    el.style.position='static';
                }
            });
            
            var zyx = new Vue({
                el: '#zyx',
                data: {
                    card1:{
                        pinned:false
                    },
                    card2:{
                        pinned:false
                    }
                }
            });
        </script>
    </body>
</html>