Reactive Todo List

Create a todo list application demonstrating how adding or removing items from a reactive array triggers updates to the template.

<div id="app">
  <input type="text" v-model="newTodo" @keyup.enter="addTodo">
  <button @click="addTodo">Add</button>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(todo.id)">Remove</button>
    </li>
  </ul>
</div>

<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>

HTML structure with Vue.js CDN included for reactivity. Contains an input box for new todos, a button to add todos, and a list to display todos with a remove button for each.

<style>
  #app {
    margin: auto;
    width: 50%;
    padding: 10px;
  }
  ul {
    list-style: none;
    padding: 0;
  }
  li {
    margin-bottom: 10px;
  }
</style>

Basic CSS for styling the todo list application.

new Vue({
  el: '#app',
  data: {
    newTodo: '',
    todos: []
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim() === '') return;
      this.todos.push({
        id: Date.now(),
        text: this.newTodo
      });
      this.newTodo = '';
    },
    removeTodo(id) {
      this.todos = this.todos.filter(todo => todo.id !== id);
    }
  }
});

Vue.js instance to make the app reactive. Implements methods to add and remove todos, and binds them to the respective events in the markup.