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

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

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>