[教程]掌握Vue.js组件开发，从实战案例开始

引言Vue.js作为一种流行的前端框架，以其简洁、高效的特点受到广泛欢迎。组件化开发是Vue.js的核心特性之一，它允许开发者将UI拆分成可复用的独立部分。通过实战案例，我们可以更好地理解和掌握Vue...

引言

Vue.js作为一种流行的前端框架，以其简洁、高效的特点受到广泛欢迎。组件化开发是Vue.js的核心特性之一，它允许开发者将UI拆分成可复用的独立部分。通过实战案例，我们可以更好地理解和掌握Vue.js组件的开发技巧。

实战案例一：简单的待办事项列表

1. 案例目标

创建一个待办事项列表，用户可以添加、删除待办事项。

2. 案例分析

该案例涉及以下Vue.js组件：

• App组件：作为根组件，包含整个应用。
• TodoList组件：用于展示待办事项列表。
• TodoItem组件：用于展示单个待办事项。

3. 实现代码

<template> <div id="app"> <todo-list :todos="todos" @delete-todo="deleteTodo"></todo-list> <input v-model="newTodo" @keyup.enter="addTodo" placeholder="添加待办事项"> </div>
</template>
<script>
import TodoList from './components/TodoList.vue';
import TodoItem from './components/TodoItem.vue';
export default { components: { TodoList, TodoItem }, data() { return { newTodo: '', todos: [] }; }, methods: { addTodo() { if (this.newTodo.trim() !== '') { this.todos.push(this.newTodo); this.newTodo = ''; } }, deleteTodo(index) { this.todos.splice(index, 1); } }
};
</script>

<template> <ul> <todo-item v-for="(todo, index) in todos" :key="index" :todo="todo" @delete="deleteTodo(index)" ></todo-item> </ul>
</template>
<script>
import TodoItem from './TodoItem.vue';
export default { components: { TodoItem }, props: { todos: Array }, methods: { deleteTodo(index) { this.$emit('delete', index); } }
};
</script>

<template> <li> {{ todo }} <button @click="$emit('delete')">删除</button> </li>
</template>
<script>
export default { props: { todo: String }
};
</script>

实战案例二：天气应用

1. 案例目标

创建一个简单的天气应用，展示当前城市天气。

2. 案例分析

该案例涉及以下Vue.js组件：

• App组件：作为根组件，包含整个应用。
• Weather组件：用于展示天气信息。

3. 实现代码

<template> <div id="app"> <weather :city="city"></weather> </div>
</template>
<script>
import Weather from './components/Weather.vue';
export default { components: { Weather }, data() { return { city: 'Beijing' }; }
};
</script>

<template> <div> <h1>天气应用</h1> <input v-model="city" placeholder="请输入城市名称" @keyup.enter="fetchWeather"> <div v-if="weather"> <h2>{{ weather.name }}</h2> <p>温度：{{ weather.main.temp }}℃</p> <p>天气：{{ weather.weather[0].description }}</p> </div> </div>
</template>
<script>
export default { data() { return { city: '', weather: null }; }, methods: { fetchWeather() { fetch(`https://api.openweathermap.org/data/2.5/weather?q=${this.city}&appid=your_api_key&units=metric`) .then(response => response.json()) .then(data => { this.weather = data; }); } }
};
</script>

总结

通过以上实战案例，我们可以了解到Vue.js组件的基本开发方法和技巧。在实际开发过程中，我们可以根据需求组合和扩展这些组件，构建更加复杂和功能丰富的应用。