Vue tutorial
See also: web-development, learning-vue
Vue Tutorial#
Not exhaustive - a taster.
Vue has two broad settings
- API styles: options or composition (more Svelte like?)
- modes: SFC (with a build step) and HTML (without)
Overview
- Vue Tutorial
- SFCs and declarative rendering
- Attribute bindings
- Event listeners
- Form bindings
- Conditional rendering
- List rendering
- Computer property
- Lifecycle and template refs
- Watchers
- Components
- Props and slots
- Events
SFCs and declarative rendering#
A Vue SFC is reusable, self-contained block code code encapsulating HTML, CSS and JSS. Extends HTML to allow declarative description of HTML based on Javascript state
e.g.
<script setup>
import { ref } from 'vue'
// component logic
// declare some reactive state here.
</script>
<template>
<h1>Make me dynamic!</h1>
</template>
Variables made reactive with ref
(turns into an "object" with a value
attribute for use in Javascript, but not HTML) and reactive
(for objects)
Attribute bindings#
Use v-bind:<attribute-name>
(shortcut :<attribute-name>
) to bind an attribute to a variable. i.e. :id
matches the id
attribute
<script setup>
import { ref } from 'vue'
const titleClass = ref('title')
</script>
<template>
<h1 :class="titleClass">Make me red</h1> <!-- add dynamic class binding here -->
</template>
<style>
.title {
color: red;
}
</style>
Event listeners#
Use v-on:<event-name>
(shortcut @<event-name>
) to bind an event to a function. i.e. @click
matches the click
event
Form bindings#
v-on
and v-bind
can be used to bind form inputs to variables
Also, v-model
acts as a shortcut. Automatically synching form element value with the bound state.
Conditional rendering#
Use v-if
and v-else
to conditionally render elements. These are attributes to HTML tags.
List rendering#
HTML list elements can use the v-for
attribute to render a list of items. Including support for a :key
attribute to specify an id for each list element to help vue.
Computer property#
A property (e.g. array of objects in a v-for
) can be computed as a function and becomes reactive.
Lifecycle and template refs#
To access the DOM of a VUE component can use the ref
attribute on an element. The matching variable is initialised as a null. It only becomes accessible after the component is mounted.
onMounted
is a lifecycle hook that can be used to access the DOM after the component is mounted.
Watchers#
Way to take action reactively to a change e.g. logging a number to the console when it changes.
Components#
Include Vue SFC files to use components as child components within another.
Props and slots#
Parent passes data to child components using props. The child must declare the props it accepts. Props are then passed within the HTML using the v-bind
syntax
Data can be passed also using slots. With the child having fall back content
Events#
Child components can emit events using emit
and the parent can listen using @response
syntax.