TodoList ここでは、を使用してアプリケーションを 構築するための具体的なコード例を含む詳細なステップバイステップ ガイドを示します Vue.js。
ステップ 1: プロジェクトのセットアップ
まず、Vue CLI を使用して新しい Vue.js プロジェクトを作成します。 ターミナルを開き、次のコマンドを実行します。
vue create todo-list-app これにより、基本的なプロジェクト構造と依存関係を含む という名前の新しいディレクトリが作成されます todo-list-app。
ステップ 2: TodoList Component
フォルダー内に src、 という名前の新しいファイルを作成します TodoList.vue。 これがアプリケーションのメインコンポーネントになります TodoList。
で TodoList.vue:
<template>
<div>
<h1>TodoList</h1>
<!-- Render TodoItems here -->
</div>
</template>
<script>
export default {
name: 'TodoList',
data() {
return {
todos: [
{ id: 1, text: 'Learn Vue.js', completed: false },
{ id: 2, text: 'Build a TodoList app', completed: false },
// Add more todo items here
]
};
}
};
</script>
<style>
/* Add your custom styles here */
</style>
ステップ 3: TodoItem Component
フォルダー内に src、 という名前の新しいファイルを作成します TodoItem.vue。 これは、個々の ToDo アイテムのレンダリングを担当する子コンポーネントになります。
で TodoItem.vue:
<template>
<div:class="{ 'completed': todo.completed }">
<input type="checkbox" v-model="todo.completed">
<span>{{ todo.text }}</span>
<button @click="deleteTodo">Delete</button>
</div>
</template>
<script>
export default {
name: 'TodoItem',
props: ['todo'],
methods: {
deleteTodo() {
// Emit a custom event to notify the parent component(TodoList) to delete this todo item
this.$emit('delete', this.todo.id);
}
}
};
</script>
<style scoped>
.completed {
text-decoration: line-through;
}
</style>
ステップ 4: TodoList Component
.vue内で TodoList、 v-for ディレクティブを使用して をレンダリングするようにテンプレート セクションを更新します TodoItem。
で TodoList.vue:
<template>
<div>
<h1>TodoList</h1>
<div v-for="todo in todos":key="todo.id">
<TodoItem:todo="todo" @delete="deleteTodo"></TodoItem>
</div>
<!-- Add a form to add new todo items -->
<form @submit.prevent="addTodo">
<input type="text" v-model="newTodoText">
<button type="submit">Add Todo</button>
</form>
</div>
</template>
<script>
import TodoItem from './TodoItem.vue';
export default {
name: 'TodoList',
components: {
TodoItem
},
data() {
return {
todos: [
{ id: 1, text: 'Learn Vue.js', completed: false },
{ id: 2, text: 'Build a TodoList app', completed: false },
// Add more todo items here
],
newTodoText: ''
};
},
methods: {
deleteTodo(id) {
// Find the index of the todo item in the array
const index = this.todos.findIndex(todo => todo.id === id);
// Remove the item from the array
this.todos.splice(index, 1);
},
addTodo() {
if(this.newTodoText) {
// Generate a unique ID for the new todo item
const newTodoId = this.todos.length + 1;
// Create a new todo item object and add it to the array
this.todos.push({
id: newTodoId,
text: this.newTodoText,
completed: false
});
// Clear the input field
this.newTodoText = '';
}
}
}
};
</script>
<style>
/* Add your custom styles here */
</style>
ステップ 5: TodoList アプリケーションのテスト
アプリケーションをテストするには TodoList 、「src/App.vue」ファイルを開き、既存のコンテンツを次のコードに置き換えます。
<template>
<div id="app">
<TodoList></TodoList>
</div>
</template>
<script>
import TodoList from './TodoList.vue';
export default {
name: 'App',
components: {
TodoList
}
};
</script>
<style>
/* Add your global styles here */
</style>
ステップ 6: アプリケーションの実行
すべての変更を保存し、ターミナルで次のコマンドを実行して開発サーバーを起動します。
npm run serve http://localhost:8080 Web ブラウザで アクセスして、 TodoList アプリケーションの動作を確認します。
この例では、
TodoList を使用したアプリケーション Vue.js。 ユーザーは、提供されたフォームを使用して、ToDo アイテムのリストを表示し、完了としてマークしたり、削除したり、新しいアイテムを追加したりできます。 todo アイテムの状態は TodoList コンポーネントで管理され、個々の todo アイテムは TodoItem コンポーネントを使用してレンダリングされます。
これは簡略化された実装であり、特定のニーズに基づいてアプリケーションをさらにカスタマイズおよび強化できることに注意してください。