初识Vue-组件化开发（应用实例）

目录

一、任务管理应用

1.介绍

2.代码

1. 任务列表组件 (TaskList.vue)

2. 添加任务组件 (AddTask.vue)

3. 应用入口组件 (App.vue)

4. 主入口文件 (main.js)

 3.效果

4.总结

二、购物车

1.介绍

2.代码

1. 商品列表组件 (ProductList.vue)

2. 购物车组件 (Cart.vue)

3. 主应用组件 (App.vue)

3.总结

三、在线笔记开发应用

1.介绍

2.代码

1. 笔记列表组件 (NoteList.vue)

2. 添加/编辑笔记模态框组件 (NoteModal.vue)

3. 主应用组件 (App.vue)

3.总结

---

一、任务管理应用

1.介绍

开发一个简单的任务管理应用，其中包含任务列表和添加任务的功能。我们可以使用 Vue.js 来构建这个应用，并将其组件化。

2.代码

1. 任务列表组件 (TaskList.vue)

<template>
  <div>
    <h2>任务列表</h2>
    <ul>
      <li v-for="(task, index) in tasks" :key="index">{{ task }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    tasks: Array // 接收任务数组
  }
}
</script>

2. 添加任务组件 (AddTask.vue)

<template>
  <div>
    <input type="text" v-model="newTask" placeholder="输入新任务">
    <button @click="addTask">添加任务</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTask: '' // 存储新任务
    }
  },
  methods: {
    addTask() {
      if (this.newTask.trim() !== '') {
        this.$emit('add', this.newTask); // 发送新任务到父组件
        this.newTask = ''; // 清空输入框
      }
    }
  }
}
</script>

3. 应用入口组件 (App.vue)

<template>
  <div>
    <task-list :tasks="tasks"></task-list>
    <add-task @add="addTask"></add-task>
  </div>
</template>

<script>
import TaskList from './components/TaskList.vue';
import AddTask from './components/AddTask.vue';

export default {
  components: {
    TaskList,
    AddTask
  },
  data() {
    return {
      tasks: ['完成Vue.js教程', '开始构建应用']
    }
  },
  methods: {
    addTask(task) {
      this.tasks.push(task); // 添加新任务到任务列表
    }
  }
}
</script>

4. 主入口文件 (main.js)

import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App)
}).$mount('#app');

 3.效果

初始效果

使用效果

4.总结

在这个示例中，我们创建了一个简单的任务管理应用。任务列表组件用于显示任务列表，添加任务组件用于添加新任务。在应用入口组件中，我们将这两个组件组合在一起，并通过 props 和事件进行通信。通过这种方式，我们实现了组件化开发，使得应用的各个功能模块独立、可重用和易于维护。

二、购物车

1.介绍

1. 显示商品列表
2. 将商品添加到购物车
3. 显示购物车中的商品列表
4. 计算购物车中商品的总价

2.代码

1. 商品列表组件 (ProductList.vue)

<template>
  <div>
    <h2>商品列表</h2>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - ￥{{ product.price }}
        <button @click="addToCart(product)">添加到购物车</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: 'iPhone', price: 999 },
        { id: 2, name: 'iPad', price: 799 },
        { id: 3, name: 'MacBook', price: 1299 }
      ]
    };
  },
  methods: {
    addToCart(product) {
      this.$emit('add-to-cart', product);
    }
  }
};
</script>

2. 购物车组件 (Cart.vue)

<template>
  <div>
    <h2>购物车</h2>
    <ul>
      <li v-for="item in cart" :key="item.product.id">
        {{ item.product.name }} - ￥{{ item.product.price }} x {{ item.quantity }}
      </li>
    </ul>
    <p>Total: ￥{{ total }}</p>
  </div>
</template>

<script>
export default {
  props: {
    cart: Array
  },
  computed: {
    total() {
      return this.cart.reduce((total, item) => total + (item.product.price * item.quantity), 0);
    }
  }
};
</script>

3. 主应用组件 (App.vue)

<template>
  <div>
    <product-list @add-to-cart="addToCart"></product-list>
    <cart :cart="cart"></cart>
  </div>
</template>

<script>
import ProductList from './components/ProductList.vue';
import Cart from './components/Cart.vue';

export default {
  components: {
    ProductList,
    Cart
  },
  data() {
    return {
      cart: []
    };
  },
  methods: {
    addToCart(product) {
      const existingItem = this.cart.find(item => item.product.id === product.id);
      if (existingItem) {
        existingItem.quantity++;
      } else {
        this.cart.push({ product, quantity: 1 });
      }
    }
  }
};
</script>

3.总结

在这个应用中，我们将商品列表和购物车拆分成两个单独的组件，并使用 props 和事件来进行通信。主应用组件 App.vue 作为整个应用的入口，负责管理购物车状态，并将商品列表和购物车组件组合在一起。

三、在线笔记开发应用

1.介绍

1. 显示笔记列表
2. 添加新笔记
3. 编辑笔记
4. 删除笔记

2.代码

1. 笔记列表组件 (NoteList.vue)

<template>
  <div>
    <h2>笔记列表</h2>
    <ul>
      <li v-for="note in notes" :key="note.id">
        {{ note.title }}
        <button @click="editNote(note)">编辑</button>
        <button @click="deleteNote(note.id)">删除</button>
      </li>
    </ul>
    <button @click="showAddNoteModal">添加笔记</button>
  </div>
</template>

<script>
export default {
  props: {
    notes: Array
  },
  methods: {
    editNote(note) {
      this.$emit('edit-note', note);
    },
    deleteNote(noteId) {
      this.$emit('delete-note', noteId);
    },
    showAddNoteModal() {
      // 显示添加笔记的模态框
    }
  }
};
</script>

2. 添加/编辑笔记模态框组件 (NoteModal.vue)

<template>
  <div v-if="showModal">
    <h2>{{ modalTitle }}</h2>
    <input type="text" v-model="noteTitle">
    <textarea v-model="noteContent"></textarea>
    <button @click="saveNote">保存</button>
    <button @click="closeModal">取消</button>
  </div>
</template>

<script>
export default {
  props: {
    showModal: Boolean,
    modalTitle: String,
    noteTitle: String,
    noteContent: String
  },
  methods: {
    saveNote() {
      this.$emit('save-note', { title: this.noteTitle, content: this.noteContent });
      this.closeModal();
    },
    closeModal() {
      this.$emit('close-modal');
    }
  }
};
</script>

3. 主应用组件 (App.vue)

<template>
  <div>
    <note-list :notes="notes" @edit-note="editNote" @delete-note="deleteNote"></note-list>
    <note-modal :show-modal="showModal" :modal-title="modalTitle" :note-title="noteTitle" :note-content="noteContent"
                @save-note="saveNote" @close-modal="closeModal"></note-modal>
  </div>
</template>

<script>
import NoteList from './components/NoteList.vue';
import NoteModal from './components/NoteModal.vue';

export default {
  components: {
    NoteList,
    NoteModal
  },
  data() {
    return {
      notes: [],
      showModal: false,
      modalTitle: '',
      noteTitle: '',
      noteContent: ''
    };
  },
  methods: {
    editNote(note) {
      this.showModal = true;
      this.modalTitle = '编辑笔记';
      this.noteTitle = note.title;
      this.noteContent = note.content;
    },
    deleteNote(noteId) {
      // 根据 noteId 删除笔记
    },
    saveNote(noteData) {
      // 保存笔记数据
      this.closeModal();
    },
    closeModal() {
      this.showModal = false;
      this.modalTitle = '';
      this.noteTitle = '';
      this.noteContent = '';
    }
  }
};
</script>

3.总结

1. 用户身份认证：允许用户注册账号并登录，以便他们可以保存和管理自己的笔记。

2. 笔记管理：用户可以创建、查看、编辑和删除笔记。每个笔记包括标题、内容、创建时间和最后修改时间等信息。

3. 笔记分类：用户可以为笔记添加标签或分类，以便更好地组织和管理笔记。

4. 搜索功能：提供搜索功能，使用户可以快速查找到需要的笔记。搜索可以根据标题、内容、标签等进行过滤。

5. 实时同步：支持多端同步，用户在任意设备上创建或编辑的笔记会自动同步到其他设备上。

6. 安全性：保护用户数据的安全，使用加密技术存储用户的账号信息和笔记内容，确保用户隐私不被泄露。

7. 用户体验：界面简洁友好，操作简单直观，提供良好的用户体验。