AndrewPythonQuasar

 Quasar 資料綁定 這一篇是非常重要的分享，因為會談到 Vue 最重要的特色，資料綁定。我們可以這樣理解，Vue的網頁檔是寫在 .vue 裡面的，內含了兩個重要的部分，一個是網頁的內容，一個是程式的內容 (內含的變數)，一般而言，在網頁第一次渲染時，程式中的變數會顯示在網頁上，但是當我們在網頁中修改這些變數值時，就需要一個事件引發讓更改的資料同步到程式的變數中，反向亦然。 而Vue 可以將網頁的顯示值與程式的變數值雙向綁定，程式設計師就再也不需要額外處理，兩個地方的資料會永遠保持同步。這就是所謂的MVVM開發框架。 透過這篇文章可以學到： <input> 文字框的處理 v-model 雙向綁定 @ 事件處理 程式中的方法(Method)介紹 Quasar 表單元件 (QField) 先回顧 TotalPrice.vue 程式碼，網頁中的變數如  {{ price }}  等，只是顯示這個變數，並沒有綁定。我們將做一些修改，事實上 price, amount 是可以在網頁上讓使用者輸入的，所以馬上就要談到 <input> 標籤。 < template >   < p > 漢堡單價 {{ price }} 元，買 {{ amount }} 個，共 {{ total }} 元。 </ p > </ template > < script > export default {   name : 'TotalPrice' ,   props : {     price : { type : Number , default : 70 },     amount : { type : Number , default : 0 }   },   data () {     return {       total : this . price * this . amount     }   } } </ script > < style scope...

 Quasar 自製標籤的 Props 輸入與 Data() 輸出 前一篇分享最後面有提及，使用 HTML 標籤時，通常會在標籤中加入一些屬性，例如：   < q-layout view = "lHh Lpr lFf" >   < q-header elevated >   < q-btn flat dense round icon = "menu" aria-label = "Menu" @ click =" toggleLeftDrawer "/ > 我們所設計的 <say-hello/> 標籤，只會固定輸出 Hello World!，如果我們希望，讓 World 變成一個可變動的字串，當我們單純使用<say-hello/> 時，就輸出 Hello World!，但是如果我們加入的屬性 <say-hello msg = "Quasar" /> 。就會輸出 Hello Quasar!。 從這篇分享中，你可以學到： 標籤屬性設計 從標籤傳入屬性值 JavaScript 對文字物件的處理 props 與 data() 的比較 data() 的語法 從 SayHello 複製 SayHello2 元件 為了不影響 SayHello 元件，請在 components 目錄新增一個 SayHello2.vue，並 Copy SayHello 元件的內容。 就操作的方便性來說，可以在 SayHello.vue 上面按滑鼠右鍵選複製，然後在 Components 目錄上面按滑鼠右鍵選貼上。然後重新命名，開啟 SayHello2.vue 後，針對內容做一些小修改以免跟 SayHello 完全相同，修改後如下： < template >   < h4 > Hello World! </ h4 > </ template > < script > export default {   name : 'SayHello2' } </ script > <!-- Add "scoped...

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