使用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 的方法來增加新的菜色到餐廳菜單中，這樣一來，我們就可以快速的建立一個餐廳菜單的應用程式了。

發佈留言