初识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.介绍

显示商品列表
将商品添加到购物车
显示购物车中的商品列表
计算购物车中商品的总价

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.介绍

显示笔记列表
添加新笔记
编辑笔记
删除笔记

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.总结

用户身份认证：允许用户注册账号并登录，以便他们可以保存和管理自己的笔记。
笔记管理：用户可以创建、查看、编辑和删除笔记。每个笔记包括标题、内容、创建时间和最后修改时间等信息。
笔记分类：用户可以为笔记添加标签或分类，以便更好地组织和管理笔记。
搜索功能：提供搜索功能，使用户可以快速查找到需要的笔记。搜索可以根据标题、内容、标签等进行过滤。
实时同步：支持多端同步，用户在任意设备上创建或编辑的笔记会自动同步到其他设备上。
安全性：保护用户数据的安全，使用加密技术存储用户的账号信息和笔记内容，确保用户隐私不被泄露。
用户体验：界面简洁友好，操作简单直观，提供良好的用户体验。

原文地址:https://blog.csdn.net/m0_73916603/article/details/138389357 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1785941313741524992.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部