<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<title>Yapılacaklar Listesi</title> | |
<script src="https://cdn.jsdelivr.net/npm/vue"></script> | |
</head> | |
<body> | |
<div id="todo-list-example"> | |
<form v-on:submit.prevent="addNewTodo"> | |
<label for="new-todo">Yapılacak Ekle</label> | |
<input | |
v-model="newTodoText" | |
id="new-todo" | |
placeholder="Yapılacaklar" | |
> | |
<button>Ekle</button> | |
</form> | |
<ul> | |
<li | |
is="todo-item" | |
v-for="(todo, index) in todos" | |
v-bind:key="todo.id" | |
v-bind:title="todo.title" | |
v-on:remove="todos.splice(index, 1)" | |
></li> | |
</ul> | |
</div> | |
</body> | |
<script> | |
Vue.component('todo-item', { | |
template: '\ | |
<li>\ | |
{{ title }}\ | |
<button v-on:click="$emit(\'remove\')">Çıkar</button>\ | |
</li>\ | |
', | |
props: ['title'] | |
}) | |
new Vue({ | |
el: '#todo-list-example', | |
data: { | |
newTodoText: '', | |
todos: [ | |
{ | |
id: 1, | |
title: 'Mikroişlemciler çalışılacak', | |
}, | |
{ | |
id: 2, | |
title: 'Kitaplık düzenlenecek', | |
}, | |
{ | |
id: 3, | |
title: 'Kitap okunacak' | |
} | |
], | |
nextTodoId: 4 | |
}, | |
methods: { | |
addNewTodo: function () { | |
this.todos.push({ | |
id: this.nextTodoId++, | |
title: this.newTodoText | |
}) | |
this.newTodoText = '' | |
} | |
} | |
}) | |
</script> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment