亚洲最大看欧美片,亚洲图揄拍自拍另类图片,欧美精品v国产精品v呦,日本在线精品视频免费

  • 站長資訊網(wǎng)
    最全最豐富的資訊網(wǎng)站

    vue組件有什么好處

    vue組件的好處:1、組件是獨立和可復用的代碼組織單元,組件系統(tǒng)是vue核心特性之一,它讓開發(fā)者使用小型、獨立和通常可復用的組件構(gòu)建大型應(yīng)用;2、組件化開發(fā)能大幅度提高應(yīng)用開發(fā)效率、測試性、復用性等;3、能讓web前端代碼實現(xiàn)“高內(nèi)聚”和“低耦合”,使得前端開發(fā)的過程變成搭積木的過程。

    vue組件有什么好處

    本教程操作環(huán)境:windows7系統(tǒng)、vue3版,DELL G3電腦。

    Vue的單頁面開發(fā)其實很簡單又很抽象,單頁面是指唯一的Vue示例,也就是main.js里的new Vue({});

    那么多頁面的效果是怎么實現(xiàn)的呢?這就依賴于組件化開發(fā),每一個子頁面都由多個組件構(gòu)成,在url改變時刷新并渲染不同的組件群,這就達到了多頁面的效果,在vue中如何實現(xiàn)url改變其實就是路由了。

    Vue組件化

    什么是組件化

    當我們遇到復雜問題時,很難一次性搞定所有問題,所以這時需要把問題拆解,把小問題都解決后綜合起來就能得到這個問題的解決方案,聽起來很熟悉吧!其實在動態(tài)規(guī)劃中就是這種思想了,只不過時最優(yōu)解和解決方案的區(qū)分。

    組件化也是這種解決問題的思路,當一個項目中的功能邏輯特別復雜時,我們很難一次性完成所有邏輯交互,因為容易發(fā)生冗余或回調(diào)地獄,一旦某一部分出錯,很難追究到哪行代碼出現(xiàn)問題。同時一個人的精力是有限的,為了減輕個人的壓力,將問題分為小的功能模塊,既可以減少管理和維護該界面的成本,也可以適合團隊合作。

    但其實Vue的前端開發(fā)不需要很多人,因為它是輕量級的,所以實際項目中只需要美工人員把設(shè)計好的原型發(fā)給一兩個前端開發(fā)人員就行了,至于為什么需要這么少的開發(fā)人員,很大程度上因為Vue的組件化開發(fā)讓業(yè)務(wù)邏輯更清晰。

    vue組件化思想

    • 組件化的思想讓我們能夠開發(fā)出一個個獨立且可復用的小組件來構(gòu)造我們的應(yīng)用。

    • 每一個應(yīng)用(功能)都可以抽象成一個組件樹。

    vue組件有什么好處

    • 盡可能的將頁面拆分成小且可復用的組件。這樣讓我們的代碼更加方便組織和管理,并且擴展性也更強。

    vue組件化的好處

    1、組件是獨立和可復用的代碼組織單元。組件系統(tǒng)是vue核心特性之一,它使開發(fā)者使用小型、獨立和通??蓮陀玫慕M件構(gòu)建大型應(yīng)用;

    2、組件化開發(fā)能大幅度提高應(yīng)用開發(fā)效率、測試性、復用性等;

    3、能讓 web 前端代碼實現(xiàn)“高內(nèi)聚 低耦合”,使得前端開發(fā)的過程變成搭積木的過程。

    組件的使用

    原理

    • 組件的使用分三步:
      • 創(chuàng)建組件構(gòu)造器
      • 注冊組件
      • 使用組件
    • 創(chuàng)建組件構(gòu)造器:
      • 調(diào)用const mycomponent = Vue.extend({template : “})創(chuàng)建構(gòu)造器。
      • template后的引號里寫相應(yīng)的html代碼,其實這個template就是.vue文件中的template(不清楚的可以去Vue文件構(gòu)成)。
      • :后的單引號其實是ES6的語法,眾所周知雙引號內(nèi)的字符串等內(nèi)容進行換行需要寫特殊字符,而在單引號間的內(nèi)容,里面的代碼在使用時是不會改變代碼的格式的,例如:
        vue組件有什么好處
    • 注冊組件:
      • 調(diào)用Vue.component(‘自己起的組件名’,mycomponent),第一個參數(shù)是自己起的組件名,第二個參數(shù)是你在創(chuàng)建組件構(gòu)造器的時候的const變量。
        vue組件有什么好處
    • 使用組件:
      • 在上方的template里使用
        vue組件有什么好處

    實際開發(fā)中的使用-父子組件

    • 實際開發(fā)中組件的使用非常簡單,每個組件都是一個.vue文件,直接引入并聲明組件即可以使用。

    • 第一步:創(chuàng)建一個.vue文件,我這里在views文件夾下創(chuàng)建一個Home.vue文件vue組件有什么好處

    • 第二步:在需要用到這個組件中引入Home文件,我這個例子是在App.vue中引入了Home.vue,大家實際開發(fā)中請自行引入。
      vue組件有什么好處
      vue組件有什么好處

    • 第三步:在App.vue中注冊該組件,這個components的屬性我在前面說過,里面的組件就是該vue文件的子組件,父子關(guān)系形成,在這里一個父親可以有多個兒子噢!??!
      vue組件有什么好處

    • 第四步:使用該組件,也就是將Home.vue的內(nèi)容顯示在App.vue中
      vue組件有什么好處

    父子組件傳遞數(shù)據(jù)

    • 通過props向子組件傳遞數(shù)據(jù)。
    • 通過事件向父組件發(fā)送發(fā)送消息。
      vue組件有什么好處

    父傳子-props用法

    • 在子組件中,使用props來聲明需要從父組件接收的數(shù)據(jù)。
    • props和data、methods、computed同級,里面存的就是父組件傳來的數(shù)據(jù)。
    • props分為兩種:
      • 第一種:對象,對象可以設(shè)置傳遞時的類型,也可以設(shè)置默認值等。
      • 第二種:字符串數(shù)組形式,數(shù)組中每個字符串就是傳遞的數(shù)據(jù)的名字。
    • 第一種情況:
      vue組件有什么好處
      vue組件有什么好處
      vue組件有什么好處
      • 通過之前的學習,大家應(yīng)該能看懂這兩張圖,第一張圖片的語句是寫在.vue文件中的template中的,而這個子組件的名稱應(yīng)該是patientlist,而向子組件傳遞的信息其實就是:weizhen="notfin",在第二張圖片中可以發(fā)現(xiàn),notfin是個數(shù)組,那么weizhen是什么??看第三張圖片,我在props里定義了一個對象!這個對象的名字就是weizhen,所以這個weizhen就是父組件把向子組件傳遞的數(shù)據(jù)封裝了一個名字!
      • 這樣就實現(xiàn)了父組件向子組件傳遞數(shù)據(jù)的第二種方式,怎么動態(tài)監(jiān)控父組件傳來的數(shù)據(jù)是否有變化并進行刷新后期會講!
    • 第二種情況:
      • 用上面的前兩張圖,其實變化的就是接收的方式:
        vue組件有什么好處
      • 這樣也能獲取到相應(yīng)的數(shù)據(jù),但其實我喜歡用第一種,因為規(guī)定了類型和默認值后能讓代碼更容易讀懂。

    子傳父-this.$emit()自定義事件

    • 子傳父使用this.$emit(‘自己起的名稱’,data)
    • 這個方法有兩個參數(shù),第一個是自己起的名字,例如上面的weizhen;第二個參數(shù)是你要傳遞的數(shù)據(jù),這個數(shù)據(jù)可以是通過子組件中的函數(shù)處理好的數(shù)據(jù),也可以是data中定義的數(shù)據(jù)。這樣父組件就可以獲取到子組件中返回的結(jié)果。

    父組件直接獲取子組件的數(shù)據(jù)

    this.$children

    • 在父組件中的script模塊中的methods中,如果想要直接獲取子組件的數(shù)據(jù)可以使用this.$children。

    • 如下圖,我們使用$children獲取子組件中的message字符串。
      vue組件有什么好處

    • this.$children的缺點:

      • 通過$children訪問子組件時,是一個數(shù)組類型,訪問其中的子組件必須通過索引值。
      • 當子組件過多,我們需要拿到其中一個時,往往不能確定它的索引值,甚至還可能會發(fā)生變化。

    this.$ref

    • ref是reference-引用的簡寫。
    • $ref和ref經(jīng)常搭配使用,使用步驟:
      • 通過ref給某一個子組件綁定一個特定的ID。
      • 通過this.$refs.ID就可以訪問到該組件了。
        vue組件有什么好處
        vue組件有什么好處

    子組件直接獲取父組件的數(shù)據(jù)-this.$parent

    • 雖然可以通過這種方式直接獲取父組件的值,但實際項目開發(fā)中不建議使用這種方法,下面說明一下為什么:
      • 首先,子組件不需要很多的數(shù)據(jù),子組件只需要自己處理的數(shù)據(jù)即可,如果申請了過多的數(shù)據(jù)就提高了耦合度。
      • 其次,在進行不同項目的組件復用時,我們根據(jù)需求只用到了這個子組件,如果使用this.$parent方式獲取數(shù)據(jù),那么父組件中如果沒有對應(yīng)字段就報錯了呀!
      • 最后,如果子組件都能隨便方位父組件中的數(shù)據(jù),那么我們維護起來會非常麻煩,如果后期不需要某個字段,子組件中也要對應(yīng)修改,會提高維護成本和任務(wù)量,同時也是浪費時間。
    • 綜上所述:真的不建議使用$parent,但是要了解。

    非父子組件之間的數(shù)據(jù)傳遞

    • Vue1.x:
      • 使用$dispatch向上派發(fā)事件。
      • 使用$broadcast向下廣播事件。
    • Vue2.x:
      • 首先取消了Vue1.x中的兩個方法。
      • 這個版本使用了中央事件總線,也就是通過中介完成。
      • 這個中介的意思跟數(shù)據(jù)庫中一對多關(guān)系的兩個表需要一個關(guān)系表來防止結(jié)構(gòu)混亂。
    • 經(jīng)過了一系列的發(fā)展和優(yōu)化,Vuex應(yīng)運而生,Vuex管理方案是目前Vue的一大核心功能,后面的文章中會單獨講Vuex。

    總結(jié)

    • 組件是Vue中最為重要的功能之一,在實際開發(fā)中要多多利用,如果有可重復使用的組件那就用,畢竟是要偷懶的,要是每次新打一遍對應(yīng)的代碼,那太沒意思了!

    贊(0)
    分享到: 更多 (0)
    網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號