| <!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