Intro to Vue 3

A demo

Alex Riviere

Senior Vue Developer

@fimion@notacult.social

Reactive Values

  • ref
    • Wraps an object with one property: "value"
    • good for tracking simple values: Strings, Numbers, Booleans
    • can also track complex values: Objects, Arrays, etc
  • reactive
    • Wraps a complex value and allows normal use while tracking reactivity.
    • only good for complex values: Objects, Arrays, etc

Let's write code!

Review

  • Vue can be used without a build step
  • Reactive values are tracked automatically
  • double curly brackets allow us to use values as text
  • v-bind/: is a directive used to bind values to an attribute
  • v-on/@ is a directive used to listen to events
  • v-model is a directive that binds a value and an event listener for updates.

Let's Write

Single File Components!

Review

  • <script setup> is a fancy compiler directive that creates out setup function 
  • computed allows us to make complex logic stored as a single ref
  • v-if/v-else-if/v-else are directives that function as an if/else statement and will remove elements from the dom when the logic does not match
  • v-for is a directive that allows us to loop over arrays or objects.

Thank you!