Learning Vuejs 1

First tutorial code for Learning Vue JS

HTML

<script src="https://vuejs.org/js/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js"></script>
<div class="container" id="vue-app">
  <div class="row">
    <div class="col-sm-12">
      <h1>My Todos</h1>
      
      <ul class="list-group">
        <li class="list-group-item" v-for="todo in todos | orderBy 'title' 1">
          {{todo.title}}
          <button class="btn btn-warning btn-xs pull-right" v-on:click="deleteTodo(todo)">Delete</button>
        </li>
      </ul>
    </div>
  </div>
  
  <div class="row">
    <div class="col-sm-12">
      <form v-on:submit.prevent="addNewTodo(newTodo)">
        <div class="form-group">
          <input 
            type="text" 
            v-model="newTodo.title"
            class="form-control" 
            placeholder="Add a new Todo">
        </div>
        
        <div class="form-group">
          <button class="btn btn-success">Add Todo</button>
        </div>
      </form>
    </div>
  </div>
</div>

JavaScript

new Vue({
	el: '#vue-app',
  
  data: {
  	todos: [{id: 1, title: 'Go Shopping'}],
    newTodo: {id: null, title: ''}
  },
  
  methods: {
  	addNewTodo(newTodo) {
    	this.todos.push(newTodo)
      this.newTodo = {id: null, title: ' '}
    },
    
    deleteTodo(todo) {
      this.todos.$remove(todo)
    }
  }
});