Quasar 學習筆記 Ep 04 - Quasar 的第一個元件 - Hello World!
Quasar 的第一個元件 - Hello World!
每次在學一種新語言，第一個程式一定是 Hello World! 所以，我們就來寫一個 Quasar 的 Hello World!
今天分享的內容，包含：
- HTML Tag
- Vue 程式設計的目的：使用 Vue 元件設計一個自己的 Tag
- Vue 元件的三個單元
- Import 與 Export
- 使用 IntelliSense 引用自製標籤
HTML 標籤 (Tag)
要了解 Vue.js 以及 Quasar 如何做網頁程式設計，我並不想糾結在解釋 MVC、MVVM 這些程式設計架構，也不想拘泥在比較不同程式語言如 jQuery、Dart 是如何用不同方式操作網頁的，我只想從一個簡單的範例開始。
網頁顯示的內容，就是 HTML 文件，而 HTML 文件則是由 HTML 標籤 (tag) 所組成，當瀏覽器執行到標籤的時候，就會按照 HTML 標籤的指示來呈現最終的網頁畫面。
舉例說明，請打開 helloquasar 的首頁 index.vue，當我們要讓網頁顯示一行標題，會使用 <h3>歡迎光臨網站首頁</h3> ，當瀏覽器渲染到 <h3> 時，便會執行此標籤的指令，把後面的內容放大，直到遇到 </h3> 時結束。
無論 HTML 提供的標籤有多完整，一定會有漏網之魚，這時候，我們就必須自己設計一個標籤。Vue.js 程式設計的目的就在於此。
舉例來說，我想設計一個名為 <say-hello> 的標籤，可以自動顯示 Hello World!
<template>
<q-page class="flex flex-center">
<img
alt="Quasar logo"
src="~assets/quasar-logo-vertical.svg"
style="width: 200px; height: 200px"
>
<!--h3>歡迎光臨網站首頁</h3-->
<say-hello></say-hello>
<p>
Quasar是一款基於Vue.js開發的UI框架，可以讓你輕鬆構建網站簡潔明快的界面，
更重要的是它還能讓你輕鬆做好RWD（響應式網站設計），除此之外還能幫助你加上PWA，
使你的網頁變成手機上的App。
</p>
</q-page>
</template>
不過問題來了， <say-hello> 這個標籤根本不存在，所以接下來，我們就按部就班建立這個標籤。
建立自己的標籤
要建立一個自己的的 HTML 標籤，必須建立在一個 Vue 元件裡面。元件檔案會建立在 Components 目錄，在此按滑鼠右鍵，新增一個 SayHello.vue，所有附加檔名為 vue 的檔案，就是 Vue 的元件檔，如下圖。
元件 (Component) 是 Vue 最主要也是最強大的特性之一，它提供了 HTML DOM 元素的擴充性。元件檔裡面有三個單元，分別是模板、程式與樣式。請參考下圖：
<template>
<h3>Hello World!</h3>
</template>
<script>
export default {
name: 'SayHello'
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
</style>
請把上面的程式碼，剪貼至 SayHello.vue，我們來說明這三個單元的作用：
<template> 在被引用時，實際渲染的內容，這裡就只顯示 Hello World!
<script> 程式內容，由於這個元件會被其他元件引用(import)，所以必須定義 Export 的名稱。
<style> 網頁渲染時的式樣，定義了 h3 的 margin，在模板中的 <h3> 會用到。
處理好 SayHello.vue 之後，由於這個標籤是在 Index.vue 中被使用的，請打開 Index.vue，在其程式單元中加入 import SayHello from '../components/SayHello.vue'，並且在 export default 裡面，加入 components: { SayHello } ，以確保 SayHello 這個 Component 可以被更底層的系統元件看見，因為最終，這個頁面會透過 <q-page-container>渲染在網頁中的，沒有 export 出來，就無法顯示。程式碼如下圖：
<script>
import { defineComponent } from 'vue';
import SayHello from '../components/SayHello.vue';
export default defineComponent({
components: { SayHello },
name: 'PageIndex'
})
</script>
宣告好之後，我們就可以在 index.vue 的模板裡面使用<say-hello></say-hello>了。其實我們的標籤名稱應該是 <SayHello></SayHello>，在程式中我們習慣用駝峰式命名，但是 HTML Tag 是慣用橫線命名法，所以 Vue 會自動判定兩者是相同的東西。另外，由於這個 Tag 沒有內容部分，也可以寫成<SayHello/> 或<say-hello/>。
執行結果如下：
如果這時候，我們希望改變 Hello World! 的顏色，可以在 <style></style> 裡面處理，如果想改成橘色，修改如下：
<style scoped>
h3 {
margin: 32px 0 0;
color: orange;
}
</style>
結果如下：
創建一個自己的標籤的觀念與步驟對初學者非常重要，所以在整理一次：
- 在 Components 目錄下以駝峰式命名新增一個標籤元件 SayHello.vue
- <template> 中撰寫要輸出的內容，<style> 中撰寫要輸出的樣式
- <script> 中將此元件 export 出來供其它元件使用，並定義名稱 SayHello
- 在 Pages 目錄中找到要使用這個元件的頁面 Index.vue
- <script> 中 import SayHello 元件，同時也 export 出來讓其它會引用的元件知道
- <template> 中以 <say-hello/> 或 <SayHello/> 使用此元件
用 IntelliSense 引用自製的標籤
既然我們把 SayHello 設計成元件，就代表我們可以在任何頁面裡面使用它，試著在 About.vue 裡面也使用這個元件，將 import 加入 <script> 中即可。但是先別急著加， Visual Studio Code 有 IntelliSense 的功能，我們來測試一下。
首先打開 About.vue，程式碼內容如下：
<template>
<q-page class="flex flex-center">
<h3>關於這個網站</h3>
<p>
中央流行疫情指揮中心今(21)日表示，本(2021)年12月14日起入境擇定春節檢疫專案C方案之民眾，
將自12月21日起陸續期滿168小時，凡經檢疫第6天PCR檢測陰性及返家居家檢疫環境與條件均符合規定者，
請全程佩戴口罩，搭乘地方政府安排之防疫車輛，返家接續後7天在家居家檢疫，並配合以下檢測措施
</p>
</q-page>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
name: 'PageAbout'
})
</script>
接下來，我們要使用 SVC 的 IntelliSense 功能直接在 <template> 裡面加入 <say-hello> 標籤。
IntelliSense 出來的提示中，並沒有 SayHello 提示，只有 say-hello，前面說過，兩者相通，所以沒有問題。而後面還出現了 import SayHello 的提示，這剛好是我們要的，請直接按 Tab 鍵，然後自行完成 /> 部分，程式就自動做了異動。
<template>
<q-page class="flex flex-center">
<h3>關於這個網站</h3>
<say-hello/>
<p>
中央流行疫情指揮中心今(21)日表示，本(2021)年12月14日起入境擇定春節檢疫專案C方案之民眾，
將自12月21日起陸續期滿168小時，凡經檢疫第6天PCR檢測陰性及返家居家檢疫環境與條件均符合規定者，
請全程佩戴口罩，搭乘地方政府安排之防疫車輛，返家接續後7天在家居家檢疫，並配合以下檢測措施
</p>
</q-page>
</template>
<script>
import SayHello from 'src/components/SayHello.vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: { SayHello },
name: 'PageAbout'
})
</script>
我們會發現，import SayHello 自行產生了，只是目錄字串寫法不同，而 export default 裡面也多了 components: { SayHello } ，完全不用我們手動加入，儲存後看結果。
如果習慣使用 IntelliSense 的人，我建議按照上面的步驟來寫程式，不然元件會被重複加入，造成錯誤。可怕的是，由於程式碼會自行產生，根本不知道錯誤為何發生。
今天就分享到這裡。
另外，使用 HTML 標籤時，通常會在標籤中加入一些屬性，例如：
<q-layout view="lHh Lpr lFf">
<q-header elevated>
<q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer"/>
我們將在下一個單元分享。
留言
張貼留言