到目前為止，這個系列的筆記所展示的都是一些極為簡單的單頁面 Web 應用程式，並且頁面上通常只有幾個簡單的互動元素。但在實際生產環境中，Web 應用程式的使用者介面往往是由多個複雜的頁面共同組成的。這時候，我們就需要開始注意程式碼的可複用性了，針對這個問題，Vue.js 框架提出的解決方案就是先將使用者介面上的元素按照不同的功能劃分成一個個獨立的元件，例如導航欄、公告欄、資料表格、使用者登錄檔單、使用者登入介面等。這樣一來，我們在之後的工作中就可以像玩樂高玩具一樣，根據需要將這些元件組合成各種具體的應用程式了。總而言之，元件系統是我們在學習 Vue.js 框架中必須要掌握的一個重要概念。下面，這篇筆記將通過編寫一系列實驗示例來體驗一下在 Vue.js 框架中構建和使用元件的基本方法。 在所有實驗開始之前，我需要先在`code`目錄中建立一個名為`00_test`的目錄，以便用於存放接下來的一系列實驗專案，由於這些專案只能用於體驗 Vue 元件的構建與使用方法，並沒有實際的應用功能，所以我給了它`00`這個編號。那麼，下面就來開始第一個實驗吧！為此，我需要繼續在`code/00_test`目錄中再建立一個名為`component_1`的實驗目錄，並在該目錄下執行`npm install vue`命令來安裝 Vue.js 框架。最後，我只需在`code/00_test/component_1`目錄下建立一個名為`index.htm`的檔案，並輸入如下程式碼： ```HTML ` ``` 在上述實驗中，我用兩種不同的方式分別建立並註冊了`say-hello`和`welcome-you`兩個元件。接下來就藉由這兩個元件來介紹一下這兩種元件的使用。首先是`say-hello`元件，該元件是通過呼叫`Vue.component()`方法來建立並註冊到應用程式中的，使用該方法建立的元件通常被稱之為"全域性元件"，我們在呼叫它的時候需要提供兩個引數： - 第一個引數應該是一個字串物件，用於指定元件的名稱，該名稱也是我們要在 HTML 文件中使用的自定義標籤元素，而由於 HTML 程式碼是大小寫不敏感的，所以我個人會建議大家在給元件起名字的時候應該儘量一律使用小寫字母，單詞之間可以使用`-`這樣分隔符進行區隔。 - 第二個引數應該是一個 JavaScript 物件，用於設定元件的各項具體引數。這裡定義了以下三項最基本引數： - `template`：該引數是個字串物件，用於指定該元件的 HTML 模版程式碼，需要注意的是，這段程式碼說對應的 DOM 物件必須有且只能有一個根節點。而這個物件在最終的 HTML 文件中將會由該元件所對應自定義標籤所代表，在這