Vue.js Todo lista
Vue je javascript framework za izgradnju aplikacija koje se izvršavaju na klijentovom pregledniku. Vue je reaktivan to znači da se programer ne mora brinuti oko javascript-a koji će osvježavati html komponente
Ova scripta je jednostavan primjer kako napraviti jednostavnu todo listu. Instalacija se dodaje na početku sa: <script src="https://unpkg.com/vue@next"></script>. Imamo dvije metode (funkcije) addItem() i deleteItem() koje se nalaze pod methods:{}. Nakon svake akcije od starane klijenta i izmijene u nizu tasks tablica <table id="todoTable"> se refresh-a automatski sa novim podacima
<html>
<head>
<script src="https://unpkg.com/vue@next"></script>
<title>Todo list</title>
</head>
<body>
<div id="app">
<input type="text" placeholder="naziv zadatka" v-model="taskInput">
<button @click="addItem">Dodaj</button><br>
<table id="todoTable">
<tr v-for="(task,index) in tasks">
<td><b>{{index + 1}}.</b></td><td>{{task.content}}</td><td><button @click="deleteItem(index)">Briši</button>
</td>
</tr>
<tr><td colspan="2">Ukupno:</td><td>{{ukupno}}</td></tr>
</table>
</div>
<script>
const app ={data(){
return{
taskInput : "",
tasks : [],
ukupno : 0,
}
},
methods:{
addItem(){
if(this.taskInput!=""){
newTask = {
content : this.taskInput,
}
this.tasks.push(newTask)
this.taskInput=""
this.ukupno++;
}
},
deleteItem(index){
this.tasks.splice(index, 1);
this.ukupno--;
},
}
}
Vue.createApp(app).mount("#app")
</script>
</body>
</html>