從0開始寫程式

什麼是元件？ 一般來說，當我們製作一個網頁時，可以將網頁拆解成一個一個的區塊。這個由各種區塊組成的網頁，除了中間的主內容區之外，還包含了頁首、頁尾、側欄等區塊。每個區塊都有對應該區塊所需要執行的javascript程式碼與CSS檔案。在開發網頁時，如果將這些程式碼全部寫在一起，會導致整個專案的程式碼冗長，檔案也變得很肥大。 試想，若把網頁部分的區塊取出來獨立成一個個的元件，並且將重複用到元件拿來重複使用的話，是否就可以減低程式碼冗長的狀況？Vue元件的出現，就是解決這樣的問題。 為什麼使用元件？ Vue元件（Vue Component）可以說是 Vue JS 最核心的功能。Vue元件可以加強重用性，讓一些常用的程式碼，例如控制項程式，可以被重複使用。你可以把元件想像成樂高積木，一塊塊小程式元件像積木一樣的組合成一個完整的系統。 以上面這個網頁來說，我們可以把Header、Footer、Content、Aside等拆分出來，成為個別的元件，並且在Aside裡面放置Item子元件。透過這樣的設計，可簡化程式碼讓程式更小，並且每個元件可以被多次呼叫使用。整個程式碼看起來更具備組織性、更容易被維護。可以達到DRY Code的效果。 如何使用元件？ 使用元件有兩個步驟：註冊與安裝『Register first and install later』。元件需要註冊才可以使用。註冊有兩種方式，分為全域註冊與區域註冊兩種。經過全域註冊的元件是為全域元件（Global Component ），經過區域註冊的元件是為區域元件（ Local Component）。兩者的差別是，全域元件可以被「所有的」vue 實例使用，而區域元件只能在其所在vue 實例的作用範圍內有效使用。此外，也可以使元件成為巢狀結構，在元件中再註冊元件。以下是全域註冊與區域註冊的註冊方式： 全域註冊 (Registration) 使用Vue.component(tagName, options)來註冊一個元件。第一個是元件的名稱，它必須是小寫，第二個參數是JSON物件。JSON物件通常會放下面四種屬性： props data methods computed 另外要注意的是，元件的註冊必須在Vue實例初始化前完成。而且Vue.component 的...