使用Vue.js開發餐廳菜單

目錄

利用 Vue.js 建立餐廳菜單

Vue.js 是一個輕量級的 JavaScript 框架,它可以讓開發者快速建立動態的網頁應用程式。本文將介紹如何使用 Vue.js 建立一個餐廳菜單的應用程式。

建立餐廳菜單

首先,我們需要建立一個 Vue 專案,並在專案中建立一個新的 JavaScript 檔案,用於建立餐廳菜單的應用程式。

// 建立 Vue 專案
var app = new Vue({
  el: '#app',
  data: {
    // 餐廳菜單
    menu: [
      { name: '炒飯', price: 100 },
      { name: '湯頭', price: 50 },
      { name: '蛋炒飯', price: 120 }
    ]
  }
});

在上面的程式碼中,我們建立了一個 Vue 專案,並在專案中建立了一個餐廳菜單的資料物件,其中包含了三種菜色,分別是炒飯、湯頭和蛋炒飯,每種菜色的價格也都有設定。

顯示餐廳菜單

接下來,我們要將餐廳菜單顯示在網頁上,首先,我們需要在 HTML 檔案中建立一個 div 元素,並將它的 id 設定為 app,這樣 Vue 專案才能夠正確的對應到這個 div 元素。

接下來,我們要在 div 元素中顯示餐廳菜單,我們可以使用 Vue 的模板語法來完成這個工作,我們可以使用 v-for 指令來迭代餐廳菜單的資料物件,並將菜色和價格顯示在網頁上。

  • {{ item.name }} - {{ item.price }}

在上面的程式碼中,我們使用了 v-for 指令來迭代餐廳菜單的資料物件,並將菜色和價格顯示在網頁上,最後,我們可以執行 Vue 專案,就可以看到餐廳菜單已經被正確的顯示在網頁上了。

增加新的菜色

接下來,我們要增加新的菜色到餐廳菜單中,我們可以使用 Vue 的方法來完成這個工作,首先,我們需要在 JavaScript 檔案中建立一個新的方法,用於增加新的菜色到餐廳菜單中。

// 增加新的菜色
addMenuItem: function(name, price) {
  this.menu.push({
    name: name,
    price: price
  });
}

在上面的程式碼中,我們建立了一個新的方法,用於增加新的菜色到餐廳菜單中,接下來,我們可以在 HTML 檔案中建立一個表單,用於輸入新的菜色和價格,並使用 Vue 的 v-on 指令來觸發 addMenuItem 方法,就可以將新的菜色增加到餐廳菜單中了。

  • {{ item.name }} - {{ item.price }}

在上面的程式碼中,我們建立了一個表單,用於輸入新的菜色和價格,並使用 Vue 的 v-on 指令來觸發 addMenuItem 方法,最後,我們可以執行 Vue 專案,就可以看到新的菜色已經被正確的增加到餐廳菜單中了。

總結

在本文中,我們介紹了如何使用 Vue.js 建立一個餐廳菜單的應用程式,我們先建立了一個 Vue 專案,並在專案中建立了一個餐廳菜單的資料物件,接下來,我們使用 Vue 的模板語法將餐廳菜單顯示在網頁上,最後,我們使用 Vue 的方法來增加新的菜色到餐廳菜單中,這樣一來,我們就可以快速的建立一個餐廳菜單的應用程式了。

發佈留言