国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

手挽手帶你學VUE：二檔 組件開發以及常用全局api

fredshare / 3175人閱讀

摘要：我們想要在中做到子傳參給父，那我們的父組件就要像子組件伸出小偷之手。所在組件的更新時調用，但是可能發生在其子更新之前。指令所在組件的及其子全部更新后調用。

視頻教程 由于思否不支持視頻鏈接 視頻請移步 http://www.henrongyi.top 你能學到什么

二檔視頻當然要比一檔視頻難一點，如果前面的內容還沒有消化完畢的話，還是建議大家繼續消化前面的內容，然后再看接下來的部分。這一部分是VUE的核心，講到組件化開發的基礎部分，多學，多練。

生命周期

Vue官網給出的生命周期圖

{{message}}

這里大家也可以看到，我們在 app內部只引用了 shuaiQm這一個組件， shuaiQm又包含他的子組件 childer，因此父子都被渲染出來了。這就是父子組件的寫法。

插槽slot

這時候又有朋友要問了，如果我想在組件里面繼續書寫html怎么辦呢？ slot插槽就是個很好的東西了，這里我用代碼給大家演示一下slot插槽的用法。




    
    
    
    Document





    

    {{message}}
       
           hello world

插槽只有這一個作用嗎？不，那你就太小看插槽了，接下來要介紹一下插槽的作用域插槽用法。

作用域插槽，聽不懂可跳過,后面還會詳細講解

使用時候子組件標簽Child中要有 template scope=”scopeName” 標簽，再通過scopeName.childProp就可以調用子組件模板中的childProp綁定的數據，所以作用域插槽是一種子傳父傳參的方式，解決了普通slot在parent中無法訪問child數據的去問題；
這么說太復雜了，直接上個例子顯而易見。
如果這里聽不懂可以暫時跳過，只需要會用slot插槽的基礎用法即可，在后面講Element項目的時候，我會結合實例給大家講解這個作用域插槽。




    
    
    
    Document





    

    {{message}}
prop 傳遞參數給組件（父傳值給子）

講到這里，已經到了VUE一個需要理解的地方了，父子傳值，我們先講解一下，如何將值傳遞給子組件，這個整體來說還是比較簡單。引用我們的組件的標簽上寫上屬性，并且把參數傳入，這樣我們在組件內部使用props就可以獲得傳過來的值了，我們還是以上面的代碼為例。




    
    
    
    Document

這一段代碼注意，再給html上面添加屬性的時候，我們是不可以直接添加駝峰命名的，因為html不會區分大小寫，所以我們建議屬性的命名方式是完全小寫或者橫線命名的方式。如果我們使用橫線命名來傳遞參數的話，在接收的時候，橫線后面的首字母大寫，變成小駝峰來接受，否則使用的時候它會被渲染成NaN,這是為什么呢？別忘了我們一檔講過的，在插值表達式內，是支持簡單計算的，- 會被當作減號處理，這里我會在視頻中給大家詳細講解。

子組件傳值給父組件

學到這里，如果大家已經有些迷茫，現在請先停下，喘口氣，這里難度已經慢慢加大。我也會放慢講解的速度。
如果我們想要獲取到子組件內部的值，該怎么辦呢？有什么辦法能夠讓我們回去到內部的值呢？在這里，先給大家插播一個JS寫法，我覺得這有助于理解子傳父值。

function thief (gold) {
    console.log(gold)
}

function richMan (){
    var money = 1000086
    thief(money)
}

richMan()

我們想要在vue中做到子傳參給父，那我們的父組件就要像子組件伸出小偷之手。我在代碼中為大家書寫一下




    
    
    
    Document





    

      {{qmGold}}

這樣 你理解子傳參給父了嗎？

其余會用到的全局API

Vue.directivet
Vue.directive 我們用來編寫全局指令，它也有自己的生命周期

// 注冊
Vue.directive("my-directive", {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

/*
bind：只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。

inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。

update：所在組件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細的鉤子函數參數見下)。

componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調用。

unbind：只調用一次，指令與元素解綁時調用。

接下來我們來看一下鉤子函數的參數 (即 el、binding、vnode 和 oldVnode)。

在這些鉤子函數內部，都可以接受三個參數，我們來看看文檔中的寫法。
el：指令所綁定的元素，可以用來直接操作 DOM 。

binding：一個對象，包含以下屬性：
    name：指令名，不包括 v- 前綴。
    value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值為 2。
    oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
    expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式為 "1 + 1"。
    arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數為 "foo"。
    modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。
vnode：Vue 編譯生成的虛擬節點。
oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。

這里我會在視頻中結合官方樣例講解
*/

上面我們羅列了這么多它的特性，不過真正開發中，我們最常用的只有 bind 和 update 這兩個時期
我們可以簡寫為

    Vue.directive("color", function (el, binding) {
        el.style.backgroundColor = binding.value
    })

下面我們來舉個例子




    
    
    
    Document





    

      

          我來測試測試directive

好了我們可以看到加上v-color的這個div內部的文字變紅了

Vue.set

Vue.set官網給出的用法是 Vue.set( target, key, value ) 向響應式對象中添加一個屬性，并確保這個新屬性同樣是響應式的，且觸發視圖更新。它必須用于向響應式對象上添加新屬性，因為 Vue 無法探測普通的新增屬性
這么聽起來是有些籠統的，我給大家用代碼展示一下它在我們日常開發中經常出現的場景。




    
    
    
    Document



    

      
    
        
  • {{item.hello}}
    •

在上述代碼中，我們通過this.list[0]直接修改了數組中的第0項目對象，那么視圖是沒有更新的，但是數據確實變更了，這是為什么呢？因為Vue是通過Object.defineProperty()來進行數據的監聽，它的機制導致了它無法直接檢測出數組中這種情況的變化。這時候我們就需要使用Vue.set了




    
    
    
    Document



    

      
    
        
  • {{item.hello}}
    • 
      

      
    


    
    





    
    
    
    Document



    

      
    
        
  • {{item.hello}}
    •

看 是不是強制將它改變了呢？ 有了Vue.set 數據就都不再得瑟了

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

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

相關文章

  • 手挽手帶你學VUE：二檔 組件開發以及常用全局api

    摘要：我們想要在中做到子傳參給父，那我們的父組件就要像子組件伸出小偷之手。所在組件的更新時調用，但是可能發生在其子更新之前。指令所在組件的及其子全部更新后調用。 視頻教程 由于思否不支持視頻鏈接 視頻請移步 http://www.henrongyi.top 你能學到什么 二檔視頻當然要比一檔視頻難一點，如果前面的內容還沒有消化完畢的話，還是建議大家繼續消化前面的內容，然后再看接下來的部分。...

    Pink 評論0 收藏0

  • 手挽手帶你學React：二檔 React生命周期以及組件開發

    摘要：手挽手帶你學入門二檔組件開發的開始，合理運用生命周期和組件，能夠讓你的開發變地流利又這篇文章帶你學會創建組件，運用組建。 手挽手帶你學React入門二檔,組件開發的開始，合理運用生命周期和組件，能夠讓你的開發變地流利又happy,這篇文章帶你學會創建組件，運用組建。學起來吧！ React 組件生命周期 學習React，生命周期很重要，我們了解完生命周期的各個組件，對寫高性能組件會有很大...

    izhuhaodev 評論0 收藏0

  • 手挽手帶你學VUE：一檔 VUE簡介以及常用內部指令

    摘要：這樣，我們用寫的就寫好了。真的假的大家可以看到，這些在插值表達式內的表達式直接返回了運行完成的結果，值得一提的是，差值表達式內的規則和標簽內的規則是類似的。 視頻教程 由于思否不能插入視頻，視頻請大家移步，http://www.henrongyi.top 什么是VUE VUE是一套用于構建用戶界面的漸進式框架,VUE并不是一個真正意義上的mvvm框架,它更傾向是一種數據驅動框架.所以我...

    不知名網友 評論0 收藏0

  • 手挽手帶你學VUE：一檔 VUE簡介以及常用內部指令

    摘要：這樣，我們用寫的就寫好了。真的假的大家可以看到，這些在插值表達式內的表達式直接返回了運行完成的結果，值得一提的是，差值表達式內的規則和標簽內的規則是類似的。 視頻教程 由于思否不能插入視頻，視頻請大家移步，http://www.henrongyi.top 什么是VUE VUE是一套用于構建用戶界面的漸進式框架,VUE并不是一個真正意義上的mvvm框架,它更傾向是一種數據驅動框架.所以我...

    go4it 評論0 收藏0

  • 手挽手帶你學VUE：三檔 VUE構造期內常用屬性

    摘要：視頻教程由于思否不支持視頻外鏈視頻請移步你能學到什么手挽手帶你學入門三檔構造器內部的各種屬性的使用，，，，這四個屬性，在工作中會經常用到。在構造器的外部我們也可以通過實例來調用方法。 視頻教程 由于思否不支持視頻外鏈 視頻請移步 http://www.henrongyi.top 你能學到什么 手挽手帶你學VUE入門三檔,VUE構造器內部的各種屬性的使用，methods，compute...

    wslongchen 評論0 收藏0

發表評論

0條評論

fredshare

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<