<div id="todoapp" style="padding-left: 10px; margin-top: 20px;">
  <h4>Todo Listesi</h4>
  <div>
    <input type="text" placeholder="todo yazınız" v-model="inputTodo" />
    <button id="addTodo" v-on:click="todoEkle">Todo Ekle</button>
  </div>
  <ul style="margin-left: -10px;">
    <li v-for="todo in todoList">{{todo.description}}</li>
  </ul>
</div>
var app = new Vue({
  el: '#todoapp',
  data: {
    inputTodo: '',
    todoList: [{
      description: 'cicekler sulanacak'
    }, {
      description: 'ders calisilacak'
    }]
  },
  methods: {
    todoEkle: function() {
      console.log(this.inputTodo);
      if (this.inputTodo !== '') {
        this.todoList.push({
          description: this.inputTodo
        });
        this.inputTodo = '';
      }
    }
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/vue@2.0.3/dist/vue.js