VueJS

What is Vue?

• A framework for building user interfaces, created by Evan You, first released in 2014
• Progressive: it can enhance a single page, or run a whole application
• Drop it into one page with a script tag, or
• Build a full single-page application with a router and a store
• These slides use Vue 3

Declarative Rendering

• You describe what the page should look like for a given state
• Vue keeps the DOM in sync when that state changes, so there is no getElementById and no manual update
• The same idea you saw with React, with a different syntax

Creating an Application

import { createApp, ref } from "vue";

createApp({
  setup() {
    const count = ref(0);
    return { count };
  },
}).mount("#app");
    

<div id="app">{{ count }}</div>
    

ref and reactive

• ref wraps a single value, read and written through .value in JavaScript
• reactive makes a whole object reactive, used directly
• In the template, Vue unwraps refs for you

const count = ref(0);
count.value++;

const student = reactive({ name: "Parham", id: "9231058" });
student.name = "Ali";
    

Computed Properties

• A value derived from other state, cached until its dependencies change
• Prefer it over putting an expression in the template

import { computed, ref } from "vue";

const first = ref("Parham");
const last = ref("Alvani");

const fullName = computed(() => `${first.value} ${last.value}`);
    

Interpolation and Binding

• {{ }} puts a value in the text of the page
• v-bind, shortened to :, puts it in an attribute

<p>{{ message }}</p>
<img :src="imageUrl" :alt="message" />
    

Conditionals and Lists

<p v-if="students.length === 0">No students yet</p>
<p v-else>{{ students.length }} students</p>

<ul>
  <li v-for="student in students" :key="student.id">
    {{ student.name }}
  </li>
</ul>
    

• :key tells Vue which item is which, so it can reuse the DOM instead of rebuilding the list
• v-if removes the element, v-show only hides it with CSS

Events and Input

• v-on, shortened to @, listens for an event
• v-model binds an input in both directions

<button @click="count++">{{ count }}</button>

<input v-model="name" placeholder="your name" />
<p>Hello {{ name }}</p>
    

Single-File Components

Template, logic, and style for one component live in one .vue file.

<script setup>
import { ref } from "vue";

const props = defineProps({ title: String });
const count = ref(0);
</script>

<template>
  <h2>{{ props.title }}</h2>
  <button @click="count++">clicked {{ count }} times</button>
</template>

<style scoped>
button { color: #ff9100; }
</style>
    

Props and Events

• Data flows down through props, which the child must not modify
• Facts flow up as events, and the parent decides what to change
• scoped styles apply to this component only, so class names cannot leak

const emit = defineEmits(["selected"]);

emit("selected", student.id);