VueJS2 - Easy example

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="main">

  <ul v-if="tasks.length > 0">
    <li v-for="(task, index) in tasks" v-bind:key="index">
      {{ task }}
      <button @click="removeTask(index)">&times;</button>
    </li>
  </ul>
  <div v-if="tasks.length < 1">No tasks yet!</div>

  <hr />

  <input ref="taskinput" type="text" v-on:keydown.enter="addTask()" v-model="newTask" placeholder="What to do?">
  <button @click="addTask()">Add task</button>

</div>

JavaScript

new Vue({
	el: "#main",
  data: {
    tasks: [],
    newTask: ''
  },
  methods: {
  	addTask: function () {
      if (this.newTask.trim().length < 1) return
      
    	this.tasks.push(this.newTask)
      this.newTask = ''
			
      // When the virtual dom is updated (nextTick), focus in the
      // input again, so we can type and press enter right away.
      this.$refs.taskinput.focus()
    },
    removeTask: function (index) {
    	this.tasks.splice(index, 1)	
    }
  }
})