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 ; } <