Hawnhekk hawn gwida dettaljata pass pass b'eżempji ta' kodiċi speċifiċi għall-bini ta' TodoList applikazzjoni bi Vue.js:
Pass 1: Twaqqif tal-Proġett
Ibda billi toħloq proġett ġdid Vue.js billi tuża Vue CLI. Iftaħ it-terminal tiegħek u mexxi l-kmand li ġej:
vue create todo-list-app Dan se joħloq direttorju ġdid imsejjaħ todo-list-app bl-istruttura bażika tal-proġett u d-dipendenzi.
Pass 2: Ħolqien tal- TodoList Component
Ġewwa l- src folder, oħloq fajl ġdid imsejjaħ TodoList.vue. Dan se jkun il-komponent ewlieni għall- TodoList applikazzjoni.
Fi 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>
Pass 3: Ħolqien tal- TodoItem Component
Ġewwa l- src folder, oħloq fajl ġdid imsejjaħ TodoItem.vue. Dan se jkun komponent tifel responsabbli biex jirrendi oġġetti individwali ta' todo.
Fi 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>
Pass 4: Aġġornament tal- TodoList Component
Ġewwa TodoList.vue, aġġorna t-taqsima tal-mudell biex tirrendi l- TodoItem s bl-użu tad-direttiva v-for.
Fi 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>
Pass 5: Ittestja l TodoList -Applikazzjoni
Biex tittestja l- TodoList applikazzjoni, iftaħ il-fajl "src/App.vue" u ibdel il-kontenut eżistenti bil-kodiċi li ġej:
<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>
Pass 6: Tmexxi l-Applikazzjoni
Issejvja l-bidliet kollha u ibda s-server tal-iżvilupp billi tħaddem il-kmand li ġej fit-terminal:
npm run serve Żur http://localhost:8080 fil-web browser tiegħek biex tara l TodoList -applikazzjoni fl-azzjoni.
Dan l-eżempju juri l-funzjonalità bażika ta' a
TodoList applikazzjoni bl-użu Vue.js. L-utenti jistgħu jaraw lista ta’ oġġetti kollha, jimmarkawhom bħala mimlija, iħassruhom, u jżidu oġġetti ġodda billi jużaw il-formola pprovduta. L-istat ta 'l-oġġetti todo huwa ġestit fil- TodoList komponent, filwaqt li kull oġġett ta' todo individwali huwa rrappreżentat bl-użu tal- TodoItem komponent.
Jekk jogħġbok innota li din hija implimentazzjoni simplifikata, u tista 'tippersonalizza u ssaħħaħ l-applikazzjoni aktar ibbażata fuq il-bżonnijiet speċifiċi tiegħek.