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
github: https://github.com/fimion/intro-to-vue3
slides: https://slides.com/fimion/intro-to-vue-3-penguicon-2024