Contents
Vue
A progressive framework for user interfaces: templates, reactivity, components, Pinia and Vue Router.
1.Getting started
- What Vue isWhy Vue is useful, which version the course covers and how it differs from working with the DOM by hand.
- Creating a projectHow to create a project with npm create vue@latest, run it and what lives in its folders.
- Single-file componentsThe blocks of a .vue file — template, script setup and style — and how they work together.
- Template syntaxInterpolation in double curly braces, expressions in templates and attribute binding with v-bind.
- DirectivesWhat Vue directives are, how their syntax works and which directives you meet most often.
2.Reactivity
- Reactive state: refHow to declare changeable data with ref, why .value is needed and how Vue updates the page.
- The reactive functionA reactive object without .value, the limits of reactive and the rule for choosing between ref and reactive.
- Computed propertiesHow to derive values from state with computed: counters, filtered lists and caching.
- Watchers: watch and watchEffectHow to run code when data changes: watch, watchEffect and the deep and immediate options.
3.Templates: conditions, lists, forms
- Conditional rendering: v-if and v-showHow to show and hide elements on a condition: v-if, v-else-if, v-else, v-show and the difference between them.
- Lists: v-for and keyHow to render an array with v-for, why the key attribute matters and how to loop over numbers and objects.
- Events: v-on and modifiersHow to handle clicks and key presses with v-on, get the event object and use modifiers.
- Form inputs: v-modelTwo-way binding of input fields with v-model: text, checkboxes, selects and modifiers.
- Class and style bindingsHow to toggle CSS classes on a condition with :class and set styles from data with :style.
- Enter and leave animations: TransitionHow to show and hide elements smoothly with the built-in Transition and TransitionGroup components.
4.Components
- ComponentsHow to move part of the interface into its own component, use it in App.vue and register it globally.
- PropsHow to pass data into a component with defineProps, declare types and default values.
- Component events: emitHow a child component tells its parent about actions with defineEmits and how the parent listens.
- v-model on componentsHow to make your own component work with v-model using the defineModel macro.
- SlotsHow to pass markup into a component with slots: the default slot, named slots and slots with data.
- Passing data deep: provide and injectHow to pass a value to all nested components at once, without a chain of props, using provide and inject.
- Lifecycle hooksThe stages of a component's life and the onMounted, onUpdated and onUnmounted functions for code that must run at the right moment.
- Template refsHow to access a DOM element or a child component with the ref attribute and useTemplateRef.
5.Logic and data
6.Vue Router
- Vue Router: setup and routesHow to install Vue Router, describe routes, render a page with RouterView and build a menu with RouterLink.
- Route params and navigationDynamic addresses like /posts/:id, reading params with useRoute and navigating from code with useRouter.
- Nested routesHow to build a site section with a shared layout using children, lazy-loaded pages and a 404 page.
- Navigation guardsHow to check a navigation before the page opens: beforeEach, the meta field, redirecting to login and beforeEnter.