Intro to Vue 3

A demo

Alex Riviere

Web Dev Unicorn

@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!

Alex Riviere

@fimion@notacult.social

https://alex.party

github: https://github.com/fimion/intro-to-vue3

slides: https://slides.com/fimion/intro-to-vue-3-penguicon-2024

Vue Docs: https://vuejs.org/guide/introduction.html