指令(2)：自定義指令

Blackjun 發布于2019-08-22 15:41 / 3305人閱讀

摘要：簡介自定義指令就像一個迷你的函數，把你自定義的功能塞進這個迷你函數里，在頁面上快速的調用，增加用戶體驗。鉤子函數參數因為這幾個參數，直接導致靈活度，就像定義一個組件那樣，自定義指令因為參數的開放性會有無限種可能。

簡介

自定義指令就像一個迷你的函數，把你自定義的功能塞進這個迷你函數里，在頁面上快速的調用，增加用戶體驗。

Vue.directive("dyColor",{
    bind:function(el){
        el.onclick = () => {
            el.style.backgroundColor = "#" + Math.random().toString().slice(2,8)
        } 
    }
})
new Vue({
    el: "#app-1"
})


    
        Lorem
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat beatae neque, quo, hic molestiae accusamus maxime cupiditate impedit quia labore aspernatur doloribus necessitatibus! Odio, quod eaque consectetur dolor asperiores id.

上面這個簡單示例中，使用Vue.directive("name",hooks)定義一個指令，在頁面上加上前綴v-使用。
bind()為一個鉤子函數，也有其他幾種鉤子，在鉤子中完成一些自定義功能，鉤子上有幾個規定的參數，上面el就是一個，鉤子及參數后面分析。

鉤子函數

總共有五種Hook，bind、inserted、update、componentUpdated及unbind。

bind: 在指令綁定到元素上時調用。

inserted: 在被綁元素插入到父節點時調用一次（父節點是否插入文檔無所謂）

unbind: 指令與元素解綁時調用一次。

inserted是新版新加的，這個時機發生在bind之后，增加點靈活度，就目前為止沒發現有什么用。

update:在被綁元素被修改時，修改內容未被插入時調用

componentUpdated: 在被綁元素被修改并把修改內容插入后調用

官網這里是外星人寫的，看不清，我暫時就這么理解了，這兩個也是基于老版本update修改的。把一個時間分成兩部分而已。因為el引用的一個是修改前、一個是修改后的內容，還是有點用。

Vue.directive("test", {
    bind:function(el){
        el.onclick = () => {
            el.style.backgroundColor = "#" + Math.random().toString().slice(2,8)
        } 
        $(el).find("#info_update").append(""  + (el.parentNode?"有父元素":"無父元素") +"
"  + (el.parentNode?"有父元素":"無父元素") +""  + $(el).find("h3").text() +"")
        console.log("update")
    },
    componentUpdated: function (el) {
        $(el).find("#info_update").append(""  + $(el).find("h3").text() +"")
        console.log("componentUpdated")
    },
    unbind: function (el) {
        console.log("unbind")
    }
})
new Vue({
    el:"#app-2",
    data:function(){
        return {
            msg:"test directive",
            show:true
        }
    },
    methods:{
        updateData:function(){
            this.msg = "hello"
        }
        
    }
})



    
    
    
    
        {{msg}}
        
        
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit ad aut cupiditate.

插入被綁元素時，可以看到bind階段的被綁元素沒有父元素，而inserted階段是有的；而update階段使用的是修改前的數據，componentUpdated階段是使用后的數據，點擊解綁按鈕就是移除被綁元素，自然指令也和元素解綁了。

鉤子函數參數

因為這幾個參數，直接導致Vue靈活度*2，就像定義一個組件那樣，自定義指令因為參數的開放性會有無限種可能。

el：指令所綁定的元素，可以用來直接操作DOM

binding：一個對象，包含與指令本身相關的一些屬性：

name：指令名，不包括v-前綴

value：指令的綁定值，如例v-hello = "1 + 1"中，綁定值為2

expression：字符串形式的指令表達式。例如v-hello = "1 + 1"中，表達式為"1 + 1"

oldValue：指令綁定的前一個值，僅在update和componentUpdated鉤子中可用，無論值是否改變都可用

arg：傳給指令的參數，可選。例如v-hello:message中，參數為"message"

modifiers：一個包含修飾符的對象。例如v-hello.foo.bar中，修飾符對象為{foo:true, bar:true}

vnode：Vue編譯生成的虛擬節點。可以看成el的底層表現，我們就可以通過它進一步去操作被綁元素

oldVnode: 修改前的VNODE，僅在update和componentUpdated兩個鉤子函數中可用

一個有意義的示例不可能覆蓋它們，在這里只能做個觀察，后面寫插件時盡量使用它們。

GPU云服務器云服務器自定義指令自定義指令實例大云軟件定義存儲支持的指令架構 yii2_rules自定義

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93663.html

每個人都能實現的vue自定義指令

摘要：指令綁定的前一個值，僅在和鉤子中可用。字符串形式的指令表達式。上一個虛擬節點在上可根據需要定義一些鉤子函數只調用一次，指令第一次綁定到元素時調用。指令的值可能發生了改變，也可能沒有。前文先來bb一堆廢話哈哈.. 用vue做項目也有一年多了.除了用別人的插件之外.自己也沒嘗試去封裝指令插件之類的東西來用. 剛好最近在項目中遇到一個問題.(快速點擊按鈕多次觸發多...

NickZhou 2019-08-21 18:23 評論0 收藏0
angular自定義指令詳解

摘要：在運用的時候，運用自定義指令可以寫一些組件，非常方便。這里給大家分享一些關于自定義指令的知識。在運用angularjs的時候，運用自定義指令可以寫一些組件，非常方便。這里給大家分享一些關于angular自定義指令的知識。 1. 定義對于指令，可以把它簡單的理解成在特定DOM元素上運行的函數，指令可以擴展這個元素的功能。 2.定義指令的方法： angular.module(myAp...

PingCAP 2019-08-20 17:20 評論0 收藏0
工具集核心教程 | 第六篇： Freemarker模板引擎入門到進階

摘要：到目前為止，使用越來越廣泛，不光光只是它強大的生成技術，而且它能夠與進行很好的集成。注意使用數字范圍來定義集合時無需使用方括號數字范圍也支持反遞增的數字范圍如對象對象使用花括號包括中的對之間以英文冒號分隔，多組對之間以英文逗號分隔。 Freemarker的介紹 ??Freemarker 是一款模板引擎，是一種基于模版生成靜態文件的通用工具，它是為程序員提供的一個開發包，或者說是一個類...

趙連江 2019-08-19 11:38 評論0 收藏0
使用vue自定義指令開發一個表單驗證插件validate.js

摘要：今天就來介紹一下如何利用的自定義指令來開發一個表單驗證插件的過程。按照這種方式就能夠使用自己開發的這個表單校驗插件。這段時間在進行一個新項目的前期搭建，新項目框架采用vue-cli3和typescirpt搭建。因為項目比較輕量，所以基本沒有使用額外的ui組件，有時候我們需要的一些基礎組件我就直接自己開發了。今天就來介紹一下如何利用vue的自定義指令directive來開發一個表單驗證插件的過...

warnerwu 2019-05-23 17:26 評論0 收藏0
vue自定義指令升級2.0的坑

摘要：如今升級后，在自定義指令部分的全部變化了對于一個插件作者來說這簡直是崩潰的毫無兼容可言。本文我就講介紹下一個自定義指令從升級到所走的坑。吐槽我們知道，一個方法最重要的就是傳參，所以自定義指令最需要的也是這點。前言從1.0.X版本就開始使用vue了，應該也是vue很早的一批用戶。在我司使用vue這一年多以來（偏向移動端），我發現vue的插件真的是少之又少，這也是我當初一開始想寫v-...

jokester 2019-08-22 10:43 評論0 收藏0
Vue 自定義指令

摘要：自定義指令定義直接看官網的介紹吧覺得官方文檔說的很清楚了，所以我基本都是抄他的了。除了核心功能默認內置的指令和，也允許注冊自定義指令。然而，有的情況下，你仍然需要對普通元素進行底層操作，這時候就會用到自定義指令。前言最近搞了畢設，需要實現一個場景，點擊一塊區域，彈出一個編輯區域，點擊頁面的其他地方的時候，這個編輯區域就隱藏，本想想之前寫模態框一樣寫個方法的時候，突然showImg(...

you_De 2019-08-23 13:42 評論0 收藏0