從0開始寫程式

將HTML網頁Vue元件化 前一篇簡單的介紹了 元件的基本常識 。這篇我們要來試試看，實際上如何做出元件化的網頁。 第一個例子，我們要透過bootstrap網站上面的html範例，逐步將它改成Vue元件的頁面。 今天我們要練習的畫面，大家可以在這裡取得，下載為html檔案。下載html的方法這裡就不贅述。 https://getbootstrap.com/docs/4.1/examples/ 分析頁面 首先，我們先分析一下這個bootstrap的html範例 有頁首、頁尾、且中間主畫面可以分成兩個區塊。 下面區塊可以再分成更細的區塊，總共有六個區塊構成。 我們可以把分析的結果畫成下面的圖表。 網頁可以分割成Header、Footer、主要內容三段。主要內容的部分可以分上下，上面是bigBoard下面是一個個Item組成，總共有六個Item。 再回來對應下載的html原始碼。我們發現： Header 區塊，從 <header> 開始到 </header> 結束。 Footer 區塊，從 <footer class="text-muted"> 開始到 </footer> 結束。 主要內容區塊，從 <main role="main"> 開始到 </main> 結束。 主要內容區塊，又可以分成兩段，上半段從 <section class="jumbotron text-center"> 開始，到 </section> 結束; 下半段從 <div class="album py-5 bg-light"> 開始，到 </div> 結束，裡面有六個Item，每個Item都從。 <div class="col-md-4"> 開始，到 </div> 結束。 建立Vue 依照上面的分割方式，我們可以將整個網站分成幾個Vue元件。在分割之前，我們先在頁面上安裝Vue.js。一樣，我們先插入下面兩個部分。 Vue.js的CDN檔案連結 ...

什麼是元件？ 一般來說，當我們製作一個網頁時，可以將網頁拆解成一個一個的區塊。這個由各種區塊組成的網頁，除了中間的主內容區之外，還包含了頁首、頁尾、側欄等區塊。每個區塊都有對應該區塊所需要執行的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 的...