Vuejs Todo App

// Create a new Vue instance where we define the DOM element that Vue should manage,
// in this case el: '#app' with the data objects newTodo and todos
new Vue({
  el: '#app',

  data: {
    newTodo: '',
    todos: [{
      task: 'Learn vuejs',
      completed: false
    }, {
      task: 'Build a todo app',
      completed: true
    }]
  }
});

// Create a child instance of vue where we define a new component called 'my-tasks'
// and pass through the properties 'list' and 'new-task' from our parent by using props
Vue.component('my-tasks', {
  props: ['list', 'new-task'],

// We are defining a template called '#my-tasks-template' that
// will be used for our component <my-tasks>
  template: '#my-tasks-template',

// Computed property for logic and method property for functions
  computed: {
    complete: function(todo){
      return this.list.filter(this.isCompleted);
    },

    remaining: function(todo) {
      return this.list.filter(this.inProgress);
    }
  },

  methods: {
    isCompleted: function(todo){
      return todo.completed;
    },

    inProgress: function(todo){
      return ! this.isCompleted(todo);
    },

    addTodo: function (todo) {
      var text = this.newTask.trim();
      this.list.push({
        task: text,
        completed: false
      });
      this.newTask = '';
    },

    removeTodo: function (todo) {
      this.list.$remove(todo);
    },

    editTodo: function (todo) {
      this.removeTodo(todo);
      this.newTask = todo.task;
    },
    completed: function(todo){
      todo.completed = ! todo.completed;
    },
    clearAllCompleted: function(){
    this.list = this.list.filter(this.inProgress);
    }
  }
});

// We will have to set an attribute on our component to bind
// list to todos and newTask to newTodo
<my-tasks :list="todos" :new-task="newTodo">

// Use v-model for data binding,
// here we are binding an element to our data object newTask and an onkeyup event to invoke our method 'addTodo'
// NOTE: when we are refering newTask to new-task we are using
// camelCase for newTask and kebab-case for our html attribute new-task.
<input class="form-control" v-model="newTask" @keyup.enter="addTodo(todo)">

// Render our computed method remaining using v-show and output the length of remaining todos using double mustache tags
<span v-show="remaining">({{ "{{ remaining.length " }}}})</span>

// Using rendering condition v-for.
// Every item inside remaining in this case we refer to items as "todo", output the todo.task
//  Again inside double musttache tag
<li class="list-group-item list-group-item-info" v-for="todo in remaining">
  <span>{{ "{{ todo.task " }}}}</span>

// Set v-else on element for conditional rendering
 <p v-else>No tasks yet, get a life and add some tasks!</p>

// Use v-if directive to render number of completed todos if any todo are completed
 <div v-if="complete.length">