Playing with Vue

Vue is another javascript framework that is worth looking at besides the dominant React and Angular. It is kinda like React in some way. It uses its own extension .vue (not .js). You kinda work with its states with "ref". It likes single file components (SFC). You will need to install Node, then install Vue on your machine to make a new project to make it generate stuff for you to make your own app and components (like React).

The tutorial is fairly straight forward to follow. I like the fact it isn't a (giant) method to returning large html but you mark your code with its <template> tag. You can play in the Vue playground. Here is some simple code I tweaked from the tutorial.

<script setup>
import { ref } from 'vue'

// give each todo a unique id
let id = 0

const newTodo = ref('')
const todos = ref([
  { id: id++, text: 'Learn HTML' },
  { id: id++, text: 'Learn JavaScript' },
  { id: id++, text: 'Learn Vue' }
])

function addTodo() {  
  todos.value.push({ id: id++, text: newTodo.value })
  newTodo.value = ''
}

function removeTodo(todo) {
  todos.value = todos.value.filter((t) => t !== todo)
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" required placeholder="new todo">
    <button>Add Todo</button>
  </form>
  <table>
    <tr v-for="todo in todos">
      <td>{{todo.text}}</td>      
      <td><button @click="removeTodo(todo)">X</button></td>
    </tr>
  </table>
</template>