vue.js之過濾器，自定義指令，自定義鍵盤信息以及監聽數據變化

本文轉載自查看原文 2018-01-02 22:56 1379 vue

一、監聽數據變化

　　1、監聽數據變化有兩種，深度和淺度，形式如下：

　　　　vm.$watch(name,fnCb); //淺度
　　　　vm.$watch(name,fnCb,{deep:true}); //深度監視

　　2、實例用法

　　　　2.1-1淺度監聽：當點擊頁面，彈出發生變化了，a的值變為1，b的值變為101

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淺度監聽1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>


        window.onload=function(){
            var vm=new Vue({
                el:'#box',
                data:{
                    a:111,
                    b:2
                }
            });

            vm.$watch('a',function(){
                alert('發生變化了');

                this.b=this.a+100;
            });

            document.onclick=function(){
                vm.a=1;
            };
        };

    </script>
</head>
<body>
    <div id="box">
        {{a}}
        <br>
        {{b}}
    </div>

</body>
</html>

　　2.1-2淺度監聽：點擊頁面之后，彈出“發生變化了”，頁面變為

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淺度監聽2</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>


        window.onload=function(){
            var vm=new Vue({
                el:'#box',
                data:{
                    json:{name:'strive',age:16},
                    b:2
                }
            });

            vm.$watch('json',function(){
                alert('發生變化了');
            });

            document.onclick=function(){
                vm.json.name='aaa';
            };
        };

    </script>
</head>
<body>
    <div id="box">
        {{json | json}}
        <br>
        {{b}}
    </div>

</body>
</html>

2.2深度監聽：可以監視對象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>深度監聽</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>


        window.onload=function(){
            var vm=new Vue({
                el:'#box',
                data:{
                    json:{name:'strive',age:16},
                    b:2
                }
            });

            vm.$watch('json',function(){
                alert('發生變化了');
            },{deep:true});

            document.onclick=function(){
                vm.json.name='aaa';
            };
        };

    </script>
</head>
<body>
    <div id="box">
        {{json | json}}
        <br>
        {{b}}
    </div>

</body>
</html>

　　　　運行結果：

二、自定義指令

vue中自帶的指令往往有時候滿足不了我們實際的需求，例如當小於9時顯示為09，當大於9時顯示為原本的數。所以我們這個時候就需要自己定義一些指令

1、基本語法

自定義指令:
    屬性:

    Vue.directive(指令名稱,function(參數){
        this.el    -> 原生DOM元素
    });

    <div v-red="參數"></div>

    指令名稱:     v-red  ->  red

    * 注意: 必須以 v-開頭

2、基本用法

　　2.1 v-red -> red

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定義指令</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        Vue.directive('red',function(){　　　　　　　　　　　　//和下面的v-red相對應
            this.el.style.background='red';
        });

        window.onload=function(){
            var vm=new Vue({
                el:'#box',
                data:{
                    msg:'welcome'
                }
            });
        };

    </script>
</head>
<body>
    <div id="box">
        <span v-red>
            asdfasd
        </span>
    </div>

</body>
</html>

運行結果：

　　2.2、自定義指令參數為變量的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定義指令參數用法</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        Vue.directive('red',function(color){　　　　　　　　//將下面的a的值傳給color
            this.el.style.background=color;
        });

        window.onload=function(){
            var vm=new Vue({
                el:'#box',
                data:{
                    a:'blue'
                }
            });
        };

    </script>
</head>
<body>
    <div id="box">
        <span v-red="a">　　　　　　　　//是上面的變量a
            asdfasd
        </span>
    </div>

</body>
</html>

運行結果：

　　2.3參數為值的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>參數為值的用法</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        Vue.directive('red',function(color){
            this.el.style.background=color;
        });

        window.onload=function(){
            var vm=new Vue({
                el:'#box'
            });
        };

    </script>
</head>
<body>
    <div id="box">
        <span v-red="'blue'">　　　　　　　　　　　　//這里的blue就是普通的值
            asdfasd
        </span>
    </div>

</body>
</html>

運行結果：

2.4自定義指令就是默認綁定的bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定義指令</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script> Vue.directive('red',{ bind:function(){ this.el.style.background='red'; } });

        window.onload=function(){
            var vm=new Vue({
                el:'#box'
            });
        };

    </script>
</head>
<body>
    <div id="box">
        <span v-red>
            asdfasd
        </span>
    </div>

</body>
</html>

運行結果：

2.5自定指令進行拖拽小實例：可以進行拖拽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定義指令--拖拽小實例</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
    </style>
    <script src="vue.js"></script>
    <script> Vue.directive('drag',function(){ var oDiv=this.el; oDiv.onmousedown=function(ev){ var disX=ev.clientX-oDiv.offsetLeft; var disY=ev.clientY-oDiv.offsetTop; document.onmousemove=function(ev){ var l=ev.clientX-disX; var t=ev.clientY-disY; oDiv.style.left=l+'px'; oDiv.style.top=t+'px'; }; document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; }; }; });

        window.onload=function(){
            var vm=new Vue({
                el:'#box',
                data:{
                    msg:'welcome'
                }
            });
        };

    </script>
</head>
<body>
    <div id="box">
        <div v-drag :style="{width:'100px', height:'100px', background:'blue', position:'absolute', right:0, top:0}"></div>
        <div v-drag :style="{width:'100px', height:'100px', background:'red', position:'absolute', left:0, top:0}"></div>
    </div>

</body>
</html>

三、過濾器

　　3.1、配合事件使用的過濾器：debounce—>延遲執行事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>debounce--延遲執行</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>

    </script>
</head>
<body>
    <div id="box">
        <input type="text" @keyup="show | debounce 2000">　　　　　　//按鍵之后，將過2秒彈出1
    </div>
    <script>

        var vm=new Vue({
            data:{

            },
            methods:{
                show:function(){
                    alert(1);
                }
            }
        }).$mount('#box');

    </script>
</body>
</html>

3.2配合數據使用的過濾器

　　3.2.1：limitBy用法

　　　　基本用法　

        limitBy    限制幾個
        limitBy 參數(取幾個)
        limitBy 取幾個  從哪開始

limitBy    限制幾個，

limitBy 參數(取幾個)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>limitBy 限制幾個</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>

    </script>
</head>
<body>
    <div id="box">
        <ul>
            <li v-for="val in arr | limitBy 2">　　　　　　　　//限制顯示為2個，也可改為參數
                {{val}}
            </li>
        </ul>
    </div>
    <script>

        var vm=new Vue({
            data:{
                arr:[1,2,3,4,5]
            },
            methods:{

            }
        }).$mount('#box');

    </script>
</body>
</html>

運行結果：

  limitBy 取幾個  從哪開始

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>limitBy</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>

    </script>
</head>
<body>
    <div id="box">
        <ul>
            <li v-for="val in arr | limitBy 2 arr.length-2">
                {{val}}
            </li>
        </ul>
    </div>
    <script>

        var vm=new Vue({
            data:{
                arr:[1,2,3,4,5]
            },
            methods:{

            }
        }).$mount('#box');

    </script>
</body>
</html>

運行結果：取2個，從數組的倒數第二個開始取

3.2.2、filterBy 過濾數據

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>filterBy的用法</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>

    </script>
</head>
<body>
    <div id="box">
        <input type="text" v-model="a">
        <ul>
            <li v-for="val in arr | filterBy a">
                {{val}}
            </li>
        </ul>
    </div>
    <script>

        var vm=new Vue({
            data:{
                arr:['width','height','background','orange'],
                a:''
            },
            methods:{

            }
        }).$mount('#box');

    </script>
</body>
</html>

運行結果：當在文本框輸入w時只會出現width,其余的都將被過濾掉

3.2.3、orderBy:倒序還是正序排列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>orderBy倒序排列，1為正序，-1為倒序</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>

    </script>
</head>
<body>
    <div id="box">
        <input type="text" v-model="a">
        <ul>
            <li v-for="val in arr | orderBy -1">　　　　　　　　　　//這里的-1也可為變量
                {{val}}
            </li>
        </ul>
    </div>
    <script>

        var vm=new Vue({
            data:{
                arr:['width','height','background','orange'],
                a:''
            },
            methods:{

            }
        }).$mount('#box');

    </script>
</body>
</html>

運行結果：

四、自定義過濾器

　　1、基本語法　　　　

自定義過濾器:  model ->過濾 -> view
        Vue.filter(name,function(input){ });

　　2.基本用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定義過濾器</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>

    </script>
</head>
<body>
    <div id="box">
        {{a | toDou}}
    </div>
    <script> Vue.filter('toDou',function(input){　　　　　　　　　　//自定義過濾器 return input<10?'0'+input:''+input; }); var vm=new Vue({
            data:{
                a:9
            },
            methods:{

            }
        }).$mount('#box');

    </script>
</body>
</html>

運行結果：

3、自定義時間轉化器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定義時間轉化器</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>

    </script>
</head>
<body>
    <div id="box">
        {{a | date}}
    </div>
    <script> Vue.filter('date',function(input){ var oDate=new Date(input); return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds(); }); var vm=new Vue({
            data:{
               a:Date.now()
            },
            methods:{

            }
        }).$mount('#box');

    </script>
</body>
</html>

運行結果：

五、自定義鍵盤信息

1、基本語法

自定義鍵盤信息:
Vue.directive('on').keyCodes.ctrl=17;
Vue.directive('on').keyCodes.myenter=13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定義鍵盤信息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        //ctrl->17
        /*document.onkeydown=function(ev){
            console.log(ev.keyCode);
        };*/
        Vue.directive('on').keyCodes.ctrl=17;  //　　　　ctrl
        Vue.directive('on').keyCodes.myenter=13;　　　　//enter

        window.onload=function(){
            var vm=new Vue({
                el:'#box',
                data:{
                    a:'blue'
                },
                methods:{
                    show:function(){
                        alert(1);
                    }
                }
            });
        };

    </script>
</head>
<body>
    <div id="box">
        <input type="text" @keydown.myenter="show | debounce 2000">
    </div>

</body>
</html>

運行結果：當按下enter鍵之后過2秒彈出1

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 從零開始學 Web 之 Vue.js（二）過濾器，按鍵修飾符，自定義指令 Vue自定義過濾器 Vue自定義過濾器 vue.js學習自定義過濾器使用（1） vue.js學習自定義過濾器使用（2） Vue2.0的變化(1)——vue2.0組件定義/生命周期/循環/自定義鍵盤/過濾器/組件通信的變化 springmvc 自定義過濾器過濾失敗返回自定義的信息【AngularJS】—— 9 自定義過濾器 Logback自定義過濾器 hbase 自定義過濾器