Vue

<!-- Only one setup can be made on each file -->
<script setup>
import { reactive, ref } from 'vue' // Import state library

// Declarative rendering: renders dynamically
const counter = reactive({ count: 0 })  // Access by counter.count
const message = ref('Hello World!')     // Access by message.value
const styleRef = ref('red')

function increment() {
  counter.count += 1
}

// Access DOM manually after elements being mounted. During script setup, the DOM is not created yet.
import { onMounted } from 'vue'

const pElementRef = ref(null)
onMounted(() => {
  pElementRef.value.textContent = 'Mounted! (DOM operation)'
})

// Making(triggers) 'side effects' reactively using watch
import { watch } from 'vue'

const todoId = ref(1)
const todoData = ref(null)

async function fetchData() {
  todoData.value = null
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
  todoData.value = await res.json()
}

fetchData()

watch(todoId, fetchData)

// Import other components
import ChildComp from './ChildComp.vue'

// Define ref to receive child component data
const childMsg = ref('No child msg yet')
</script>

<template>
  <!-- Attribute Binding: ':class' is 'v-bind:class', binding class values to styleRef ref, message under mustache '{{ message }}' render dynamically to message ref -->
  <h1 :class="styleRef">{{ message }}</h1>

  <!-- Event Listeners: '@click' is 'v-on:click', calls the function 'increment() when clicked' -->
  <button @click="increment"> Count is: {{ counter.count }}</button>

  <!-- Form Binding: 'v-model:"message"'create two-way binding  -->
  <input v-model="message" placeholder="Type here">

  <!-- Conditional Rendering: 'v-if:"counter.count % 2 !== 0"'  -->
  <p v-if="counter.count % 2 !== 0">The counter is odd</p>
  <p v-else>The counter is even</p>

  <!-- Lifecycle and Template Refs: manually work with DOM -->
  <p ref="pElementRef">Hello</p>

  <!-- Watchers: trigger when reactivity data changes -->
  <p>Todo id: {{ todoId }}
    <button @click="todoId++" :disabled="!todoData">Fetch next todo</button>
  </p>
  <p v-if="!todoData">Loading...</p>
  <pre v-else>{{ todoData }}</pre>

  <!-- Import ChildComp component and prop to child component -->
  <ChildComp :propToChild="'This is a prop to child component'" @response="(msg) => childMsg = msg">
    <!-- Slots: pass down template fragments to child -->
    Message to child: {{ message }}
  </ChildComp>
  <p>{{ childMsg }}</p>

</template>

<style>
.red {
  color: red;
}
</style>

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

let id = 0

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

// Computed property: computes its value based on other reactive data sources
const filteredTodos = computed(() => {
  return hideCompleted.value
    ? todos.value.filter((t) => !t.done)
    : todos.value
})

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

function removeTodo(todo) {
  // t is the item iterated in todos, filter returns list after removing item with false statement
  todos.value = todos.value.filter((t) => t !== todo)
}

// Define props to receive data from parent
const props = defineProps({
  propToChild: String
})

// Setup emit to send data to parent
const emitFromChild = defineEmits(['response'])
emitFromChild('response', 'This is an emit from child')

</script>

<template>
  <h2>{{ propToChild || 'No props passed yet' }}</h2>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" required placeholder="new todo">
    <button>Add Todo</button>
  </form>
  <ul>
    <!-- List Rendering -->
    <li v-for="todo in filteredTodos" :key="todo.id">
      <input type="checkbox" v-model="todo.done">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
  <button @click="hideCompleted = !hideCompleted">
    {{ hideCompleted ? 'Show all' : 'Hide completed' }}
  </button>

  <slot>Fallback content from parent</slot>
</template>

<style>
.done {
  text-decoration: line-through;
}
</style>