The Vue.js course from Udemy - The Complete Guide (with Router, Vuex, Composition API).
Lesson 5
- starts the first pratical exercise in which we create an app using only JS.
Lesson 6
- re-building the previous app with Vue.
Lesson 14-16:
- class 14 - creating and connecting Vue App instances;
- class 15 - interpolation and data binding;
- class 16 - binding attributes with the
v-bind
directive (The alternative to interpolation).
Lesson 17
- added a bit dynamism to the app (whenever it is reloaded, randomly changes the text content);
- understanding "methods" in Vue apps.
Lesson 18-19:
- working with data inside of a Vue app (this).
- outputting raw HTML content with
v-html
; - not needed to often, and should not be used as a default because we can introduce security issues because we basically circumvent the built in cross site scripting attack protection we have with the double curly braces.
Assignment 1:
- put in practice what was learned so far (data binding).
Lesson 21:
- listening to user events;
- the
v-on
directive; - understanding event binding.
Lesson 22:
- events and methods;
- code from previous exercise reorganitation (all logic code into JS).
Lesson 23:
- working with
event
arguments by passing them to methods.
Lesson 24:
- using the native
event
object; event
as an argument;input
event, a default DOM event available on input elements (nothing Vue specific) also listened in vanilla JS;- update of a property (name, in this case) whenever it is typed in the
input
field which will be outputed in our paragraph; - the
$ event
(lesson 23_1).
Lesson 25:
- exploring event modifiers;
.prevent
to prevent the page reload, default;keyup
event.
Lesson 26:
- locking content with
v-once
.
Assignment 2:
- practice event binding.
Lesson 27:
v-model
;- data binding + event binding = two-way binding;
- two-way binding: because we are communicating in two ways; we are listening to an event coming out of the input element, to the input event and, at the same time, we are writing the value back to the input element through its value attribute.
Lesson 28:
- methods used for data binding: how it works;
- 'advanced' reactivity;
- a better alternative to 'methods' in certain cases.
Lesson 29:
computed
property.
Lesson 30:
- working with watchers.
Lesson 31:
- a theoretical class about methods vs computed vs watch.
Lesson 32:
v-bind
andv-on
shorthands.v-bind:
--->:
v-on:
--->@
Assignment 3:
- practice reactivity with computed and watch.
Lesson 33:
- dynamic styling with inline styles.
Lesson 34:
- adding CSS classes dynamically.
Lesson 35:
- classes and computed properties.
Lesson 36:
- dynamic classes: array syntax.
Assignment 4:
- practice dynamic styling.
Lesson 40:
- rendering content conditionally;
v-if
.
Lesson 41:
v-if
,v-else
andv-else-if
.
Lesson 42:
- when using
v-show
, intead ofv-if
.
Lesson 43:
- rendering lists of data with
v-for
in an array.
Lesson 44:
- get the index of the item in the array with
v-for
.
Lesson 45:
- removing list items.
Lesson 46:
- lists and
key
attribute.
Assignment 5:
- practice conditional content and lists.
- access through: Cristiana Costa Pereira
Lesson 62:
template
concept;- multiple apps concept.
Lesson 63:
- working with
refs
(getting a value out of a DOM element).
Lesson 66:
- lifecycle.
Lesson 69:
- components preview;
Lesson 70-72:
- use of
components
;
From this section on, to run the attached code, follow these steps:
- Clone or fork the project named:
vue-first-app
-
Then, install all the required packages and dependencies:
cd
into your new folder and in there run:
npm install
This will create a node_modules
folder.
- Run:
npm run serve
To bring up the development server, view the app at localhost:8080
(or whichever port is shown in your terminal)
Lesson 83:
Vue CLI
;- creating a new app.
Lesson 84-85:
- adding components.
- adding style.
vue-first-app:
props
(lesson 92) - configure the same component with different data when used multiple times;- passing data from our app.vue file (parent) into our FriendContact component (child) (lesson 93 - Prop Behaviour and Changing Props);
$emit
(lesson 97-101) - communication from the child component to the parent
vue-section8-app:
- lesson 103-105: avoid passing through components and props unnecessary with
provide
andinject
to provide data in one place and use it in another place;
vue-section9-app:
- lesson 110: local components registration;
- lesson 111:
scoped
styles; - lesson 112:
slots
- allow us to receive HTML content from outside of the component; - lesson 113:
v-slot
directive; - lesson 115:
$slots
and the v-slot: shorthand; - lesson 116: scoped slots;
- lesson 117:
<component>
element: dynamic components; - lesson 118:
<keep-alive>
component; - lesson 119: build our own alert component;
- lesson 120:
<teleport>
component; - lesson 121: fragment concept;
- access through: Cristiana Costa Pereira
vue-section11-app:
- lesson 142: v-model and
.number
modifier; - lesson 143: v-model and dropdowns;
- lesson 144: extract values from checkboxes and radio buttons with v-model and the help of
value
attribute; - lesson 145: basic form validation (with the
blur event
); - lesson 147: v-model on custom components.
vue-section12-app:
- lesson 153: fetch method;
- lesson 154: sending a
POST
request to store data; - lesson 157: getting data (GET request) and transforming response data;
- lesson 158: loading data when a component mounts;
- lesson 159: 'Loading' message added;
- lesson 160: 'No data' message added;
- lesson 161: handling browser-side errors;
- lesson 162: handling error responses;
vue-section13-app:
- lesson 167:
npm install --save vue-router@next
(package we can add to our projects to add the routing functionality); - lesson 168: registering and rendering routes and the
router-view
component; - lesson 169: navigating with
router-link
component; - lesson 170: styling active links;
- lesson 171: programmatic navigation with
$router
; - lesson 172: passing data with route params (dynamic segments);
- lesson 173: navigation and dynamic paths with
:to
; - lesson 175: updating params data with
watchers
; - lesson 176: option of passing params as props;
- lesson 177:
redirect
andalias
properties, "catch all" routes and handle invalid input's; - lesson 178: nested routes -
children
option; - lesson 179:
name
andparams
properties; - lesson 180:
query
property; - lesson 181: multiple routes with named router views;
- lesson 182: controlling scroll behaviour;
- lesson 183-185: navigation guards;
- lesson 186: route leave guards:
beforeRouteLeave
; - lesson 187: route metadata;
vue-section14-app:
- lesson 192: basic animation with CSS transistions;
- lesson 193:
@keyframes
; - lesson 195-197:
<transition>
component; - lesson 198: custom CSS classes names;
- lesson 199: animating a modal;
- lesson 200:
mode
prop and transitioning between multiple elements; - lesson 201: transition events;
- lesson 202-203: building animations with JS transitions instead of CSS and disabling CSS transitions (
css
prop); - lesson 204-205: animating lists with
transition-group
; - lesson 206: animate list item movement with the special CSS class
move
; - lesson 207: animating route changes;
vue-section15-app:
- lesson 211: what is Vuex and why use it;
- lesson 212: creating and using a
store
; - lesson 213: connecting components to state;
- lesson 214: introducing
mutations
(a better way of changing data); - lesson 215: passing data to mutations with
payloads
; - lesson 216: introducing
getters
(a better way of getting data); - lesson 217-218: running
async
code withactions
and understanding the action 'context'; - lesson 219:
mapper
helpers; - lesson 220: practice mapper helpers;
- lesson 221: organizing our store with modules;
- lesson 222: local module state;
- lesson 223:
namespaced
; - lesson 226-227: 'VueShop' challenge.
- access through: Cristiana Costa Pereira
Whithin the scope of the Find_a_Coach app:
- lesson 261: how authentication works in Vue apps (or any SPA);
- lesson 262: locking / protecting backend resources (rules published in Firebase);
- lesson 263: adding an authentication page (login and sign up);
- lesson 264-265: adding a 'signup' action;
- lesson 266: better UX - loading spinner and error handling;
- lesson 267: adding a 'login' action;
- lesson 268: attaching token to outgoing requests;
- lesson 269: UI update based on auth state;
- lesson 270: 'logout' action added;
- lesson 271: authentication and routing (navigational guards included);
- lesson 272-273:
localStorage
- lesson 278: asynchronous components (
defineAsyncComponent
) and routing -import()
; - lesson 280: building the project for production:
npm run build
; - lesson 281: deploying the appto Firebase.
- lesson 284: what is and which problems does the Composition API solve;
- lesson 285-288: data management concepts for reactive data -
refs
andreactive
; - lesson 289: replacing "methods" with regular functions;
Assignment 7:
-
practice data and functions;
-
lesson 290: replacing "computed properties" with the "computed" function;
-
lesson 291: two-way-binding and the composition API;
-
lesson 292: working with watchers;
Assignment 8:
-
practice composition API core building blocks;
-
lesson 294: how to use template refs;
-
lesson 295: components, props and the composition API;
-
lesson 296: emitting custom events;
-
lesson 297: working with provide / inject;
-
lesson 298: lifecycle hooks in the composition API;
-
lesson 299-302: migrating a project from options API to composition API;
-
lesson 303: routing, params and the composition API;
-
lesson 304:
useRoute()
anduseRouter
hooks; -
lesson 305: using vuex with the compositon API:
useStore
;
- lesson 310-313: using
mixins
; - lesson 314-315: custom hooks / composables and the composition API;
- lesson 316: why composables are better than mixins;
- lesson 317-320: small exercise to creating a custom hook;
- lesson 323-324: important changes and migration steps