成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

指令(2)：自定義指令

Blackjun / 3363人閱讀

摘要：簡(jiǎn)介自定義指令就像一個(gè)迷你的函數(shù)，把你自定義的功能塞進(jìn)這個(gè)迷你函數(shù)里，在頁(yè)面上快速的調(diào)用，增加用戶(hù)體驗(yàn)。鉤子函數(shù)參數(shù)因?yàn)檫@幾個(gè)參數(shù)，直接導(dǎo)致靈活度，就像定義一個(gè)組件那樣，自定義指令因?yàn)閰?shù)的開(kāi)放性會(huì)有無(wú)限種可能。

簡(jiǎn)介

自定義指令就像一個(gè)迷你的函數(shù)，把你自定義的功能塞進(jìn)這個(gè)迷你函數(shù)里，在頁(yè)面上快速的調(diào)用，增加用戶(hù)體驗(yàn)。

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.

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

鉤子函數(shù)

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

bind: 在指令綁定到元素上時(shí)調(diào)用。

inserted: 在被綁元素插入到父節(jié)點(diǎn)時(shí)調(diào)用一次（父節(jié)點(diǎn)是否插入文檔無(wú)所謂）

unbind: 指令與元素解綁時(shí)調(diào)用一次。

inserted是新版新加的，這個(gè)時(shí)機(jī)發(fā)生在bind之后，增加點(diǎn)靈活度，就目前為止沒(méi)發(fā)現(xiàn)有什么用。

update:在被綁元素被修改時(shí)，修改內(nèi)容未被插入時(shí)調(diào)用

componentUpdated: 在被綁元素被修改并把修改內(nèi)容插入后調(diào)用

官網(wǎng)這里是外星人寫(xiě)的，看不清，我暫時(shí)就這么理解了，這兩個(gè)也是基于老版本update修改的。把一個(gè)時(shí)間分成兩部分而已。因?yàn)?b>el引用的一個(gè)是修改前、一個(gè)是修改后的內(nèi)容，還是有點(diǎn)用。

Vue.directive("test", {
    bind:function(el){
        el.onclick = () => {
            el.style.backgroundColor = "#" + Math.random().toString().slice(2,8)
        } 
        $(el).find("#info_update").append("
  • "  + (el.parentNode?"有父元素":"無(wú)父元素") +"
    • "  + (el.parentNode?"有父元素":"無(wú)父元素") +""  + $(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.

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

    鉤子函數(shù)參數(shù)

    因?yàn)檫@幾個(gè)參數(shù)，直接導(dǎo)致Vue靈活度*2，就像定義一個(gè)組件那樣，自定義指令因?yàn)閰?shù)的開(kāi)放性會(huì)有無(wú)限種可能。

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

    binding：一個(gè)對(duì)象，包含與指令本身相關(guān)的一些屬性：

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

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

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

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

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

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

    vnode：Vue編譯生成的虛擬節(jié)點(diǎn)。可以看成el的底層表現(xiàn)，我們就可以通過(guò)它進(jìn)一步去操作被綁元素

    oldVnode: 修改前的VNODE，僅在update和componentUpdated兩個(gè)鉤子函數(shù)中可用

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

    文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/93663.html

    相關(guān)文章

    • 每個(gè)人都能實(shí)現(xiàn)的vue自定義指令

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

      NickZhou 評(píng)論0 收藏0

    • angular自定義指令詳解

      摘要：在運(yùn)用的時(shí)候，運(yùn)用自定義指令可以寫(xiě)一些組件，非常方便。這里給大家分享一些關(guān)于自定義指令的知識(shí)。 在運(yùn)用angularjs的時(shí)候，運(yùn)用自定義指令可以寫(xiě)一些組件，非常方便。這里給大家分享一些關(guān)于angular自定義指令的知識(shí)。 1. 定義 對(duì)于指令，可以把它簡(jiǎn)單的理解成在特定DOM元素上運(yùn)行的函數(shù)，指令可以擴(kuò)展這個(gè)元素 的功能。 2.定義指令的方法： angular.module(myAp...

      PingCAP 評(píng)論0 收藏0

    • 工具集核心教程 | 第六篇： Freemarker模板引擎入門(mén)到進(jìn)階

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

      趙連江 評(píng)論0 收藏0

    • 使用vue自定義指令開(kāi)發(fā)一個(gè)表單驗(yàn)證插件validate.js

      摘要：今天就來(lái)介紹一下如何利用的自定義指令來(lái)開(kāi)發(fā)一個(gè)表單驗(yàn)證插件的過(guò)程。按照這種方式就能夠使用自己開(kāi)發(fā)的這個(gè)表單校驗(yàn)插件。這段時(shí)間在進(jìn)行一個(gè)新項(xiàng)目的前期搭建，新項(xiàng)目框架采用vue-cli3和typescirpt搭建。因?yàn)轫?xiàng)目比較輕量，所以基本沒(méi)有使用額外的ui組件，有時(shí)候我們需要的一些基礎(chǔ)組件我就直接自己開(kāi)發(fā)了。今天就來(lái)介紹一下如何利用vue的自定義指令directive來(lái)開(kāi)發(fā)一個(gè)表單驗(yàn)證插件的過(guò)...

      warnerwu 評(píng)論0 收藏0

    • vue自定義指令升級(jí)2.0的坑

      摘要：如今升級(jí)后，在自定義指令部分的全部變化了對(duì)于一個(gè)插件作者來(lái)說(shuō)這簡(jiǎn)直是崩潰的毫無(wú)兼容可言。本文我就講介紹下一個(gè)自定義指令從升級(jí)到所走的坑。吐槽我們知道，一個(gè)方法最重要的就是傳參，所以自定義指令最需要的也是這點(diǎn)。 前言 從1.0.X版本就開(kāi)始使用vue了，應(yīng)該也是vue很早的一批用戶(hù)。在我司使用vue這一年多以來(lái)（偏向移動(dòng)端），我發(fā)現(xiàn)vue的插件真的是少之又少，這也是我當(dāng)初一開(kāi)始想寫(xiě)v-...

      jokester 評(píng)論0 收藏0

    • Vue 自定義指令

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

      you_De 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    閱讀需要支付1元查看
    <