發表文章

目前顯示的是 2022的文章

Quasar 學習筆記 Ep 06 - Quasar 資料綁定

圖片
 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 scoped > p {   margin : 5px ;   color : rgb ( 196 , 16 , 121 );   font-weight : bold ; } <