使用 VueJS 构建购物清单(1)

📌 相关文章

📜 使用 VueJS 构建购物清单(1)

📅 最后修改于: 2023-12-03 15:06:51.735000 🧑 作者: Mango

使用 VueJS 构建购物清单

VueJS 是一种用于构建用户界面的渐进式 JavaScript 框架。它可以在现有的 HTML 代码中嵌入，并对底层 DOM 进行非常快速和高效的操作。VueJS 是一个小巧但强大的框架，让开发人员能够轻松地构建复杂的应用程序。

在本文中，我们将使用 VueJS 构建一个购物清单的示例应用程序。我们将介绍如何使用 VueJS 的核心概念：组件、数据绑定、事件处理程序、计算属性和条件渲染，从而实现购物清单功能。

准备工作

在开始构建购物清单应用程序之前，我们需要确保已安装 VueJS。您可以使用以下命令来安装 VueJS：

npm install -g vue

确保在安装 VueJS 之前已安装了 NodeJS。

创建 Vue 实例

在创建 Vue 实例之前，我们需要考虑应用程序的数据结构。购物清单将是一个包含多个项目的列表。每个项目都将包含一个项目名称、描述、数量和价格。我们可以使用数组来存储这些项目，并将其存储在 Vue 实例的数据中。

var app = new Vue({
  el: '#app',
  data: {
    items: [
      { name: '苹果', description: '好吃的苹果', quantity: 1, price: 1.0 },
      { name: '香蕉', description: '好吃的香蕉', quantity: 3, price: 2.5 }
    ]
  }
})

在这个例子中，我们创建了一个名为 app 的 Vue 实例，并将其挂载到网页中的 id 为 app 的元素上。我们将购物清单存储在 Vue 实例的 items 数据中。

构建组件

在 VueJS 中，组件是一个包含模板、数据和行为的可重用对象。我们可以使用组件来构建 UI 中的小部件，并将其组合成复杂的应用程序。在购物清单应用程序中，我们将创建一个 Item 组件来表示每个项目。

Vue.component('item', {
  props: ['data'],
  template: `
    <li>
      <p>{{ data.name }}</p>
      <p>{{ data.description }}</p>
      <p>数量：{{ data.quantity }}</p>
      <p>单价：{{ data.price }}</p>
      <p>总价：{{ data.quantity * data.price }}</p>
      <button v-on:click="$emit('remove')">删除</button>
    </li>
  `
})

在这个例子中，我们创建了一个名为 item 的 Vue 组件。该组件包含一个 props 属性，用于接收父级组件传递的数据。组件还包含一个模板，用于定义组件的界面。模板使用双花括号和 VueJS 的数据绑定语法来显示数据，使用 v-on 指令来定义一个事件处理程序。

显示组件

在购物清单应用程序中，我们可以使用 v-for 指令来渲染项目列表。我们还可以使用 v-if 指令来显示或隐藏列表中的项目。

<div id="app">
  <ul>
    <item v-for="(item, index) in items" v-bind:data="item" v-bind:key="index" v-on:remove="items.splice(index, 1)"></item>
  </ul>
</div>

在这个例子中，我们将 item 组件添加到购物清单的 HTML 模板中。我们使用 v-for 指令循环渲染购物清单中的项目，将每个项目通过 props 传递给 item 组件。我们还向组件传递了一个用于在循环过程中追踪项目的索引。我们使用 v-bind:key 绑定索引值，以便 VueJS 可以快速识别和更新每个项目。我们还定义了一个 v-on:remove 事件处理程序，用于从项目列表中删除项目。

添加项目

在购物清单应用程序中，我们可以使用表单来添加新项目。在 VueJS 中，我们可以使用 v-model 指令将表单元素绑定到 Vue 实例的数据上。

<div id="app">
  <form v-on:submit.prevent="addItem">
    <input type="text" v-model="name" placeholder="名称" required>
    <input type="text" v-model="description" placeholder="描述">
    <input type="number" v-model="quantity" placeholder="数量" required>
    <input type="number" v-model="price" placeholder="价格" required>
    <button type="submit">添加</button>
  </form>

  <ul>
    <item v-for="(item, index) in items" v-bind:data="item" v-bind:key="index" v-on:remove="items.splice(index, 1)"></item>
  </ul>
</div>

在这个例子中，我们在购物清单的 HTML 模板中添加了一个表单元素。我们使用 v-on:submit 指令来定义一个事件处理程序，该处理程序将在提交表单时被调用。我们还使用 v-model 指令将表单元素绑定到 Vue 实例的数据上。当表单提交时，我们将在 addItem 方法中将新项目添加到项目列表中。

methods: {
  addItem: function () {
    this.items.push({
      name: this.name,
      description: this.description,
      quantity: this.quantity,
      price: this.price
    })
    this.name = ''
    this.description = ''
    this.quantity = 1
    this.price = 0.0
  }
}

在这个例子中，我们定义了一个名为 addItem 的方法，该方法将创建一个新项目并将其添加到 Vue 实例的 items 数据中。我们还将输入字段清空，以便用户可以轻松添加多个项目。

总结

在本文中，我们介绍了如何使用 VueJS 构建购物清单应用程序。我们介绍了 VueJS 的核心概念：组件、数据绑定、事件处理程序、计算属性和条件渲染。我们展示了如何使用组件来构建 UI，使用 v-for 和 v-if 指令来渲染项目列表和控制 UI 行为，使用 v-model 指令将表单元素绑定到 Vue 实例的数据上。通过这些示例，您应该已经掌握了 VueJS 的基本概念，并可以开始构建自己的 VueJS 应用程序了。

完整代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>购物清单</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="app">
    <form v-on:submit.prevent="addItem">
      <input type="text" v-model="name" placeholder="名称" required>
      <input type="text" v-model="description" placeholder="描述">
      <input type="number" v-model="quantity" placeholder="数量" required>
      <input type="number" v-model="price" placeholder="价格" required>
      <button type="submit">添加</button>
    </form>

    <ul>
      <item v-for="(item, index) in items" v-bind:data="item" v-bind:key="index" v-on:remove="items.splice(index, 1)"></item>
    </ul>
  </div>

  <template id="item-template">
    <li>
      <p>{{ data.name }}</p>
      <p>{{ data.description }}</p>
      <p>数量：{{ data.quantity }}</p>
      <p>单价：{{ data.price }}</p>
      <p>总价：{{ data.quantity * data.price }}</p>
      <button v-on:click="$emit('remove')">删除</button>
    </li>
  </template>

  <script>
    Vue.component('item', {
      props: ['data'],
      template: '#item-template'
    })

    var app = new Vue({
      el: '#app',
      data: {
        name: '',
        description: '',
        quantity: 1,
        price: 0.0,
        items: [
          { name: '苹果', description: '好吃的苹果', quantity: 1, price: 1.0 },
          { name: '香蕉', description: '好吃的香蕉', quantity: 3, price: 2.5 }
        ]
      },
      methods: {
        addItem: function () {
          this.items.push({
            name: this.name,
            description: this.description,
            quantity: this.quantity,
            price: this.price
          })
          this.name = ''
          this.description = ''
          this.quantity = 1
          this.price = 0.0
        }
      }
    })
  </script>
</body>
</html>