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...