vue之自定義組件


除了核心功能默認內置的指令外,vue也允許用戶注冊自定義指令。雖然在vue2.0中,代碼復用和抽象的主要形式是組件,但是有些情況下,我們仍需要對普通DOM元素進行底層操作,這個時候就需要用到自定義指令,例如,我們希望將元素的背景色變為紅色,就可以通過指令實現。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <style></style>
    <script src="vue.js"></script>
</head>
<body>
    <div id="box">
        <p v-red>aaaaa</p>
        <p v-red>12345</p>
        <p v-red>自定義</p>
    </div>
    <script>
        Vue.directive('red',function(){
            this.el.style.background='red';
        });
        var vm=new Vue({
            el:'#box',
            data:{
                msg:'welcome'
            }
        });
    </script>
</body>
</html>

上面簡單的實例中,主要是展示了自定義組件的用法:

其中"red"為我們自定義的指令,在使用的時候,需要加上"v-"的前綴,后面接的方法是該指令需要實現的功能;"el"是指令所綁定的元素,可以用來直接操作DOM。

自定義指令傳參

在上面的自定義指令中,我們實現了將元素背景色變為紅色,那么如果我們需要將背景色改為藍色,只是顏色改變了,其他的都是一樣的,若這樣再重新定義一個指令,就完全沒必要了,因此我們可以考慮傳參的方法了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <style></style>
    <script src="vue.js"></script>
</head>
<body>
    <div id="box">
        <p v-red='r'>aaaaa</p>
        <p v-red='g'>12345</p>
        <p v-red='p'>自定義</p>
    </div>
    <script>
        Vue.directive('red',function(color){
            this.el.style.background=color;
        });
        var vm=new Vue({
            el:'#box',
            data:{
                r:'red',
                g:'gray',
                p:'pink'
            }
        });
    </script>
</body>
</html>

但是上面的這種的方式的要求是我們必須現在vue實例中聲明這些顏色參數,並不能滿足我們想要隨意更換顏色的要求,因此,需要繼續優化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <style></style>
    <script src="vue.js"></script>
</head>
<body>
    <div id="box">
        <p v-red="'red'">aaaaa</p>
        <p v-red="'gray'">12345</p>
        <p v-red="'pink'">自定義</p>
    </div>
    <script>
        Vue.directive('red',function(color){
            this.el.style.background=color;
        });
        var vm=new Vue({
            el:'#box',
        });
    </script>
</body>
</html>

自定義指令獲取事件屬性

 和其他JavaScript事件一樣,自定義指令事件也能獲取事件屬性,例如鍵盤事件,鼠標事件等,下面通過獲取鼠標位置實現自定義拖拽指令。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <style>
    </style>
    <script src="vue.js"></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>
    <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;
                };
            };
        });
        var vm=new Vue({
            el:'#box',
            data:{
                msg:'welcome'
            }
        });
    </script>
</body>
</html>

拖拽前:

拖拽后:

自定義元素指令

所謂自定義元素指令,就是指該指令能夠像其他的元素如div,span等一樣直接使用,既然是元素指令,自然就和其他的自定義指令不一樣了,下面通過一個簡單的例子來展示自定義元素指令的用法,依舊是改變元素的背景色,具體實現如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <style>
    </style>
    <script src="vue.js"></script>
    
</head>
<body>
    <div id="box">
       <zns-red>自定義元素指令</zns-red>
    </div>
    <script>
        Vue.elementDirective('zns-red',{
            bind:function(){
                this.el.style.background='red';
            }
        });

        var vm=new Vue({
            el:'#box',
            data:{
                a:'blue'
            }
        });
    </script>
</body>
</html>

自定義指令和自定義元素指令相比,主要存在三個不同之處:

  • 自定義指令使用elementDirective
  • 自定義指令的功能函數直接寫在后面的方法中,自定義元素指令的功能函數必須寫在鈎子函數中(bind、inserted等)
  • 自定義指令在使用時,需要用v-開頭,添加到需要的元素中;自定義元素指令則是直接像其他元素一樣使用即可。


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM