Seo treoir mhionsonraithe céim ar chéim le samplaí cód sonracha chun TodoList feidhmchlár a thógáil le Vue.js:
Céim 1: An Tionscadal a Bhunú
Tosaigh trí thionscadal nua a chruthú Vue.js ag baint úsáide as Vue CLI. Oscail do chríochfort agus rith an t-ordú seo a leanas:
vue create todo-list-app Cruthóidh sé seo eolaire nua ar a dtugtar todo-list-app an struchtúr tionscadail bhunúsach agus spleáchais.
Céim 2: Ag cruthú an TodoList Component
Taobh istigh den src fhillteán, cruthaigh comhad nua dar teideal TodoList.vue. Beidh sé seo mar phríomh-chomhpháirt an TodoList iarratais.
i 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>
Céim 3: Ag cruthú an TodoItem Component
Taobh istigh den src fhillteán, cruthaigh comhad nua dar teideal TodoItem.vue. Beidh sé seo ina chomhpháirt leanaí a bheidh freagrach as rindreáil míreanna aonair todo.
i 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>
Céim 4: Nuashonrú an TodoList Component
Laistigh de TodoList.vue, nuashonraigh an roinn teimpléad chun na TodoItem s a sholáthar ag baint úsáide as v-for direction.
i 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>
Céim 5: An TodoList Iarratas a Thástáil
Chun an TodoList feidhmchlár a thástáil, oscail an comhad "src/App.vue" agus cuir an cód seo a leanas in ionad an ábhair reatha:
<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>
Céim 6: Rith an Iarratas
Sábháil na hathruithe go léir agus cuir tús leis an bhfreastalaí forbartha tríd an ordú seo a leanas a rith sa teirminéal:
npm run serve Tabhair cuairt http://localhost:8080 ar do bhrabhsálaí gréasáin chun an TodoList feidhmchlár a fheiceáil i ngníomh.
Léiríonn an sampla seo feidhmiúlacht bhunúsach a
TodoList feidhmchlár ag baint úsáide as Vue.js. Is féidir le húsáideoirí liosta de na míreanna tada a fheiceáil, iad a mharcáil mar nithe críochnaithe, iad a scriosadh, agus míreanna nua a chur leis ag baint úsáide as an bhfoirm atá curtha ar fáil. Déantar staid na n-ítimí tada a bhainistiú sa TodoList chomhpháirt, agus déantar gach mír taiscthe aonair a rindreáil ag baint úsáide as an TodoItem gcomhpháirt.
Tabhair faoi deara le do thoil gur cur i bhfeidhm simplithe é seo, agus is féidir leat an feidhmchlár a shaincheapadh agus a fheabhsú tuilleadh bunaithe ar do shainriachtanais.