Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Course description
No matter at which Metric you look at (Google Trends, Github Stars, Tweets ...) VueJS is the Shooting Star in the World of JavaScript Frameworks - it simply is amazing! Frontend Frameworks are extremely popular because they give us this reactive, great User Experience we know from Mobile Apps - but now in the Browser! No wonder that Jobs requiring Frontend Framework Skills like VueJS are amongst the best paid ones in the Industry!
Read more about the course
- Basic JavaScript Knowledge is Required
- ES6 Knowledge is a Plus but not a Must
- Basic HTML and CSS Knowledge is assumed throughout the Course
You may know Angular 2 and ReactJS, well, VueJS combines the Best of both Frameworks and makes building anything from small Widgets to big, Enterprise-Level Apps a Breeze and a whole lot of Fun! And if you don't know the two mentioned Frameworks: That's fine, too, this Course does not expect any knowledge of any other Frontend Framework - you will learn it all throughout this Course!
We'll start at the very Basics, what Vue.js is and how it works before we move on to more Complex and Advanced Topics but I'll be honest: It's too much to fit it all into one Sentence, so here's what you'll learn in this Course:
What is VueJS and Why would you use it?
Setting up a Development Environment and Workflow
The Basics (including the basic Syntax, Understanding Templates and much more!)
Interacting with DOM (Rendering Lists, Conditionally attaching/ detaching Elements ...)
Using Components (and what Components are to begin with)
Binding to Form Inputs
All about Directives, Filters and Mixins
How to make your App more Beautiful with Animations and Transitions
How to create an awesome Single-Page-Application (SPA) with Routing
How to improve State Management by using Vuex
How to Deploy the App
And much more ...
And all the accompanied with many Exercises and multiple Course Projects - because it isn't just about seeing Code, it's about using and practicing it!
Now that you know what this Course is about, let's see if this Course is for you!
Here are three Types of Students who will love this Course:
Student #1:
Has some JavaScript Experience and is interested in what this Language can do. He heard and read that JavaScript allows you to create nice Web Applications and enhance existing Web Pages. VueJS is your choice!
Student #2:
He already has some Experience with other Frontend Frameworks like Angular (2+) or ReactJS. But either due to interest or disappointment of the existing Frameworks, he seeks some Alternatives - VueJS might be what you were looking for!
Student #3:
Has Experience with backend Frameworks/ Languages but now also wants to enter the Frontend World. VueJS is an awesome choice here, it's fun, it uses native JS and it's extremely powerful!
Bonus: Student #4
Is disappointed by Angular 2+. Does a good Framework need 2 hours of setup? No, certainly not - as VueJS will prove to this Student!
Let's dive into VueJS right now!
- This Course is for Everyone interested in Frontend Development and Major JavaScript Frameworks
- This Course is for you if you want to create Reactive Applications, which run in the Browser
- This Course also targets Students who prefer a native JavaScript Framework which makes Getting Started much simpler than Angular 2
- Displeased with Angular 2? VueJS is for you!
What you'll learn:
- Build amazing Vue.js Applications - all the Way from Small and Simple Ones up to Large Enterprise-level Ones
- Understand the Theory behind Vue.js and use it in Real Projects
- Leverage Vue.js in both Multi- and Single-Page-Applications (MPAs and SPAs)
Watch Online
| # | Lesson Title | Duration |
|---|---|---|
| 1 | Course Introduction | 03:09 |
| 2 | Let's Create our First VueJS Application | 04:46 |
| 3 | Extending the VueJS Application | 04:13 |
| 4 | Course Structure | 03:45 |
| 5 | Take Advantage of all Course Resources! | 01:57 |
| 6 | Setup VueJS Locally | 02:04 |
| 7 | Module Introduction | 00:46 |
| 8 | Understanding VueJS Templates | 02:36 |
| 9 | How the VueJS Template Syntax and Instance Work Together | 02:43 |
| 10 | Accessing Data in the Vue Instance | 01:50 |
| 11 | Binding to Attributes | 02:44 |
| 12 | Understanding and Using Directives | 01:28 |
| 13 | Disable Re-Rendering with v-once | 01:42 |
| 14 | How to Output Raw HTML | 02:44 |
| 15 | Listening to Events | 01:51 |
| 16 | Getting Event Data from the Event Object | 02:37 |
| 17 | Passing your own Arguments with Events | 01:54 |
| 18 | Modifying an Event - with Event Modifiers | 03:24 |
| 19 | Listening to Keyboard Events | 02:04 |
| 20 | Writing JavaScript Code in the Templates | 03:20 |
| 21 | Using Two-Way-Binding | 01:50 |
| 22 | Reacting to Changes with Computed Properties | 09:33 |
| 23 | An Alternative to Computed Properties: Watching for Changes | 03:54 |
| 24 | Saving Time with Shorthands | 01:27 |
| 25 | Dynamic Styling with CSS Classes - Basics | 04:23 |
| 26 | Dynamic Styling with CSS Classes - Using Objects | 01:36 |
| 27 | Dynamic Styling with CSS Classes - Using Names | 03:28 |
| 28 | Setting Styles Dynamically (without CSS Classes) | 03:16 |
| 29 | Styling Elements with the Array Syntax | 01:15 |
| 30 | Module Wrap Up | 00:45 |
| 31 | Module Introduction | 00:50 |
| 32 | Conditional Rendering with v-if | 03:39 |
| 33 | Using an Alternative v-if Syntax | 01:37 |
| 34 | Don't Detach it with v-show | 01:44 |
| 35 | Rendering Lists with v-for | 02:27 |
| 36 | Getting the Current Index | 01:52 |
| 37 | Using an Alternative v-for Syntax | 01:11 |
| 38 | Looping through Objects | 04:45 |
| 39 | Looping through a List of Numbers | 00:58 |
| 40 | Keeping Track of Elements when using v-for | 04:09 |
| 41 | Module Wrap Up | 00:52 |
| 42 | Introduction & Challenge | 02:55 |
| 43 | Setting up the Course Project | 02:38 |
| 44 | Creating the Vue Instance and Styling the Healthbars | 05:17 |
| 45 | Showing the Player Controls Conditionally | 02:03 |
| 46 | Implementing a "Start Game" Method | 01:54 |
| 47 | Implementing a "Attack" Method | 08:04 |
| 48 | Write better Code - Time for Refactoring! | 04:53 |
| 49 | Implementing a "Special Attack" | 02:12 |
| 50 | Implementing a "Heal" Method | 02:22 |
| 51 | Finishing the Action Buttons | 01:00 |
| 52 | Creating an Action Log | 02:42 |
| 53 | Printing the Log (v-for) | 02:21 |
| 54 | Finishing the Log | 01:58 |
| 55 | Styling the Log Conditionally | 01:45 |
| 56 | Wrap Up | 01:29 |
| 57 | Module Introduction | 01:05 |
| 58 | Some Basics about the VueJS Instance | 02:59 |
| 59 | Using Multiple Vue Instances | 02:53 |
| 60 | Accessing the Vue Instance from Outside | 03:30 |
| 61 | How VueJS manages your Data and Methods | 04:02 |
| 62 | A Closer Look at $el and $data | 04:56 |
| 63 | Placing $refs and Using them on your Templates | 05:49 |
| 64 | Where to learn more about the Vue API | 00:59 |
| 65 | Mounting a Template | 06:43 |
| 66 | Using Components | 04:57 |
| 67 | Limitations of some Templates | 02:36 |
| 68 | How VueJS Updates the DOM | 03:26 |
| 69 | The VueJS Instance Lifecycle | 03:13 |
| 70 | The VueJS Instance Lifecycle in Practice | 05:40 |
| 71 | Module Wrap Up | 00:55 |
| 72 | Module Introduction | 01:34 |
| 73 | Why do we need a Development Server? | 02:48 |
| 74 | What does "Development Workflow" mean? | 03:52 |
| 75 | Using the Vue CLI to create Projects | 02:36 |
| 76 | Installing the Vue CLI and Creating a new Project | 04:19 |
| 77 | An Overview over the Webpack Template Folder Structure | 03:41 |
| 78 | Understanding ".vue" Files | 06:47 |
| 79 | Understanding the Object in the Vue File | 01:12 |
| 80 | How to Build your App for Production | 00:50 |
| 81 | Module Wrap Up | 01:12 |
| 82 | Module Introduction | 01:05 |
| 83 | An Introduction to Components | 04:57 |
| 84 | Storing Data in Components with the Data Method | 04:05 |
| 85 | Registering Components Locally and Globally | 02:51 |
| 86 | The "Root Component" in the App.vue File | 03:22 |
| 87 | Creating a Component | 04:25 |
| 88 | Using Components | 05:33 |
| 89 | Moving to a Better Folder Structure | 02:44 |
| 90 | How to Name your Component Tags (Selectors) | 04:32 |
| 91 | Scoping Component Styles | 05:06 |
| 92 | Module Wrap Up | 00:51 |
| 93 | Module Introduction | 00:47 |
| 94 | Communication Problems | 02:53 |
| 95 | Using Props for Parent => Child Communication | 03:11 |
| 96 | Naming "props" | 01:11 |
| 97 | Using "props" in the Child Component | 01:29 |
| 98 | Validating "props" | 04:58 |
| 99 | Using Custom Events for Child => Parent Communication | 05:56 |
| 100 | Understanding Unidirectional Data Flow | 01:08 |
| 101 | Communicating with Callback Functions | 02:24 |
| 102 | Communication between Sibling Components | 06:26 |
| 103 | Using an Event Bus for Communication | 05:33 |
| 104 | Centralizing Code in an Event Bus | 02:15 |
| 105 | Wrap Up | 00:42 |
| 106 | Module Introduction | 00:39 |
| 107 | Setting up the Module Project | 03:01 |
| 108 | Passing Content - The Suboptimal Solution | 02:20 |
| 109 | Passing Content with Slots | 00:43 |
| 110 | How Slot Content gets Compiled and Styled | 03:04 |
| 111 | Using Multiple Slots (Named Slots) | 02:51 |
| 112 | Default Slots and Slot Defaults | 02:02 |
| 113 | A Summary on Slots | 00:46 |
| 114 | Switching Multiple Components with Dynamic Components | 05:32 |
| 115 | Understanding Dynamic Component Behavior | 02:08 |
| 116 | Keeping Dynamic Components Alive | 00:59 |
| 117 | Dynamic Component Lifecycle Hooks | 01:19 |
| 118 | Wrap Up | 01:12 |
| 119 | Module Introduction | 01:37 |
| 120 | Setting up the Project | 01:23 |
| 121 | Initializing the Application | 01:29 |
| 122 | Creating the Application Components | 04:05 |
| 123 | Passing Data with Props and Slots | 02:14 |
| 124 | Allowing Users to Create Quotes with a NewQuote Component | 04:09 |
| 125 | Adding Quotes with Custom Events | 03:35 |
| 126 | Adding a Info Box | 01:07 |
| 127 | Allowing for Quote Deletion | 03:41 |
| 128 | Controlling Quotes with a Progress Bar | 03:53 |
| 129 | Finishing Touches and State Management | 02:14 |
| 130 | Module Introduction | 00:55 |
| 131 | A Basic <input> Form Binding | 03:47 |
| 132 | Grouping Data and Pre-Populating Inputs | 02:43 |
| 133 | Modifying User Input with Input Modifiers | 02:59 |
| 134 | Binding <textarea> and Saving Line Breaks | 02:54 |
| 135 | Using Checkboxes and Saving Data in Arrays | 04:06 |
| 136 | Using Radio Buttons | 02:31 |
| 137 | Handling Dropdowns with <select> and <option> | 05:10 |
| 138 | What v-model does and How to Create a Custom Control | 02:50 |
| 139 | Creating a Custom Control (Input) | 05:14 |
| 140 | Submitting a Form | 02:09 |
| 141 | Wrap Up | 00:44 |
| 142 | Module Introduction | 00:54 |
| 143 | Understanding Directives | 03:35 |
| 144 | How Directives Work - Hook Functions | 02:29 |
| 145 | Creating a Simple Directive | 01:23 |
| 146 | Passing Values to Custom Directives | 01:09 |
| 147 | Passing Arguments to Custom Directives | 02:41 |
| 148 | Modifying a Custom Directive with Modifiers | 02:25 |
| 149 | Custom Directives - A Summary | 00:29 |
| 150 | Registering Directives Locally | 01:38 |
| 151 | Using Multiple Modifiers | 04:28 |
| 152 | Passing more Complex Values to Directives | 02:14 |
| 153 | Wrap Up | 00:45 |
| 154 | Module Introduction | 00:46 |
| 155 | Creating a Local Filter | 04:33 |
| 156 | Global Filters and How to Chain Multiple Filters | 01:46 |
| 157 | An (often-times better) Alternative to Filters: Computed Properties | 05:16 |
| 158 | Understanding Mixins | 02:24 |
| 159 | Creating and Using Mixins | 02:26 |
| 160 | How Mixins get Merged | 02:59 |
| 161 | Creating a Global Mixin (Special Case!) | 03:27 |
| 162 | Mixins and Scope | 02:34 |
| 163 | Wrap Up | 01:57 |
| 164 | Module Introduction | 01:09 |
| 165 | Understanding Transitions | 01:02 |
| 166 | Preparing Code to use Transitions | 03:12 |
| 167 | Setting Up a Transition | 03:10 |
| 168 | Assigning CSS Classes for Transitions | 02:28 |
| 169 | Creating a "Fade" Transition with the CSS Transition Property | 03:22 |
| 170 | Creating a "Slide" Transition with the CSS Animation Property | 04:00 |
| 171 | Mixing Transition and Animation Properties | 03:32 |
| 172 | Animating v-if and v-show | 00:34 |
| 173 | Setting Up an Initial (on-load) Animation | 01:31 |
| 174 | Using Different CSS Class Names | 04:02 |
| 175 | Using Dynamic Names and Attributes | 02:34 |
| 176 | Transitioning between Multiple Elements (Theory) | 00:35 |
| 177 | Transitioning between Multiple Elements (Practice) | 04:43 |
| 178 | Listening to Transition Event Hooks | 02:07 |
| 179 | Understanding JavaScript Animations | 08:04 |
| 180 | Excluding CSS from your Animation | 01:29 |
| 181 | Creating an Animation in JavaScript | 06:19 |
| 182 | Animating Dynamic Components | 05:58 |
| 183 | Animating Lists with <transition-group> | 00:45 |
| 184 | Using <transition-group> - Preparations | 04:21 |
| 185 | Using <transition-group> to Animate a List | 06:13 |
| 186 | Understanding the App | 01:16 |
| 187 | Creating the App | 12:05 |
| 188 | Adding Animations | 06:39 |
| 189 | Wrap Up | 01:04 |
| 190 | Module Introduction | 01:43 |
| 191 | Accessing Http via vue-resource - Setup | 04:01 |
| 192 | Creating an Application and Setting Up a Server (Firebase) | 05:25 |
| 193 | POSTing Data to a Server (Sending a POST Request) | 06:11 |
| 194 | GETting and Transforming Data (Sending a GET Request) | 06:55 |
| 195 | Configuring vue-resource Globally | 02:49 |
| 196 | Intercepting Requests | 03:35 |
| 197 | Intercepting Responses | 02:52 |
| 198 | Where the "resource" in vue-resource Comes From | 04:43 |
| 199 | Creating Custom Resources | 02:40 |
| 200 | Resources vs "Normal" Http Requests | 00:29 |
| 201 | Understanding Template URLs | 05:07 |
| 202 | Wrap Up | 01:43 |
| 203 | Module Introduction | 01:39 |
| 204 | Setting up the VueJS Router (vue-router) | 02:17 |
| 205 | Setting Up and Loading Routes | 06:44 |
| 206 | Understanding Routing Modes (Hash vs History) | 04:15 |
| 207 | Navigating with Router Links | 03:46 |
| 208 | Where am I? - Styling Active Links | 03:21 |
| 209 | Navigating from Code (Imperative Navigation) | 02:43 |
| 210 | Setting Up Route Parameters | 02:00 |
| 211 | Fetching and Using Route Parameters | 02:04 |
| 212 | Reacting to Changes in Route Parameters | 03:05 |
| 213 | Setting Up Child Routes (Nested Routes) | 04:40 |
| 214 | Navigating to Nested Routes | 03:10 |
| 215 | Making Router Links more Dynamic | 02:05 |
| 216 | A Better Way of Creating Links - With Named Routes | 03:22 |
| 217 | Using Query Parameters | 02:55 |
| 218 | Multiple Router Views (Named Router Views) | 03:28 |
| 219 | Redirecting | 02:14 |
| 220 | Setting Up "Catch All" Routes / Wildcards | 01:07 |
| 221 | Animating Route Transitions | 02:35 |
| 222 | Passing the Hash Fragment | 03:29 |
| 223 | Controlling the Scroll Behavior | 03:22 |
| 224 | Protecting Routes with Guards | 01:14 |
| 225 | Using the "beforeEnter" Guard | 07:52 |
| 226 | Using the "beforeLeave" Guard | 03:32 |
| 227 | Loading Routes Lazily | 07:09 |
| 228 | Wrap Up | 01:03 |
| 229 | Module Introduction | 01:13 |
| 230 | Why a Different State Management May Be Needed | 02:26 |
| 231 | Understanding "Centralized State" | 01:33 |
| 232 | Using the Centralized State | 06:50 |
| 233 | Why a Centralized State Alone Won't Fix It | 02:42 |
| 234 | Understanding Getters | 00:49 |
| 235 | Using Getters | 02:41 |
| 236 | Mapping Getters to Properties | 06:58 |
| 237 | Understanding Mutations | 01:15 |
| 238 | Using Mutations | 04:52 |
| 239 | Why Mutations have to run Synchronously | 01:35 |
| 240 | How Actions improve Mutations | 01:33 |
| 241 | Using Actions | 05:00 |
| 242 | Mapping Actions to Methods | 04:59 |
| 243 | A Summary of Vuex | 04:15 |
| 244 | Two-Way-Binding (v-model) and Vuex | 05:57 |
| 245 | Improving Folder Structures | 01:02 |
| 246 | Modularizing the State Management | 04:57 |
| 247 | Using Separate Files | 04:19 |
| 248 | Using Namespaces to Avoid Naming Problems | 06:45 |
| 249 | Wrap Up | 00:51 |
| 250 | Project Introduction | 03:12 |
| 251 | Project Setup and Planning | 02:46 |
| 252 | Creating the First Components | 02:56 |
| 253 | Setup Project Routes | 04:43 |
| 254 | Adding a Header and Navigation | 06:45 |
| 255 | Planning the Next Steps | 01:23 |
| 256 | Creating Stocks Components | 06:32 |
| 257 | Adding a "Buy" Button | 05:58 |
| 258 | Setting up the Vuex State Management | 10:22 |
| 259 | Adding a Portfolio Module to Vuex | 10:03 |
| 260 | Working on the Portfolio Stocks | 06:52 |
| 261 | Connecting the Portfolio with Vuex | 02:22 |
| 262 | Time to fix some Errors | 02:01 |
| 263 | Displaying the Funds | 03:42 |
| 264 | Adding some Order Checks | 05:42 |
| 265 | Making Funds Look Nicer with Filters | 01:49 |
| 266 | Ending the Day - Randomizing Stocks | 05:31 |
| 267 | Animating the Route Transitions | 03:15 |
| 268 | Saving & Fetching Data - Adding a Dropdown | 02:18 |
| 269 | Setting up vue-resource and Firebase | 02:17 |
| 270 | Saving Data (PUT Request) | 02:52 |
| 271 | Fetching Data (GET Request) | 05:05 |
| 272 | Testing and Bug Fixes | 02:51 |
| 273 | Project Wrap Up | 01:23 |
| 274 | Bonus: Debugging Vuex with Vue Developer Tools | 02:00 |
| 275 | Module Introduction | 01:13 |
| 276 | Preparing for Deployment | 01:46 |
| 277 | Deploying the App (Example: AWS S3) | 05:58 |
| 278 | Course Roundup | 00:59 |
| 279 | Time to Practice (1) - Outputting Data to Templates (Problem) | 02:00 |
| 280 | Time to Practice (1) - Outputting Data to Templates (Solution) | 06:13 |
| 281 | Time to Practice (2) - Events (Problem) | 01:43 |
| 282 | Time to Practice (2) - Events (Solution) | 04:55 |
| 283 | Time to Practice (3) - Reactive Properties (Problem) | 02:30 |
| 284 | Time to Practice (3) - Reactive Properties (Solution) | 05:48 |
| 285 | Time to Practice (4) - Styling (Problem) | 03:50 |
| 286 | Time to Practice (4) - Styling (Solution) | 18:18 |
| 287 | Time to Practice (5) - Conditionals and Lists (Problem) | 01:41 |
| 288 | Time to Practice (5) - Conditionals and Lists (Solution) | 09:39 |
| 289 | Time to Practice (6) - Components (Problem) | 01:46 |
| 290 | Time to Practice (6) - Components (Solution) | 02:13 |
| 291 | Time to Practice (7) - Component Communication (Problem) | 03:07 |
| 292 | Time to Practice (7) - Component Communication (Solution) | 10:18 |
| 293 | Time to Practice (8) - Slots and Dynamic Components (Problem) | 01:28 |
| 294 | Time to Practice (8) - Slots and Dynamic Components (Solution) | 03:01 |
| 295 | Time to Practice (9) - Forms (Problem) | 01:31 |
| 296 | Time to Practice (9) - Forms (Solution) | 15:18 |
| 297 | Time to Practice (10) - Directives (Problem) | 00:55 |
| 298 | Time to Practice (10) - Directives (Solution) | 05:56 |
| 299 | Time to Practice (11) - Filters and Mixins (Problem) | 01:09 |
| 300 | Time to Practice (11) - Filters and Mixins (Solution) | 08:13 |
| 301 | About this Section | 00:38 |
| 302 | Module Introduction | 01:08 |
| 303 | Project Setup | 02:47 |
| 304 | Axios Setup | 02:13 |
| 305 | Sending a POST Request | 05:40 |
| 306 | Sending a GET Request | 02:53 |
| 307 | Accessing & Using Response Data | 05:49 |
| 308 | Setting a Global Request Configuration | 05:44 |
| 309 | Using Interceptors | 05:50 |
| 310 | Custom Axios Instances | 04:58 |
| 311 | Wrap Up | 00:59 |
| 312 | About this Section | 00:53 |
| 313 | Module Introduction | 02:00 |
| 314 | How Authentication Works in SPAs | 03:11 |
| 315 | Project Setup | 02:37 |
| 316 | Adding User Signup | 05:15 |
| 317 | Adding User Signin (Login) | 02:42 |
| 318 | Using Vuex to send Auth Requests | 04:27 |
| 319 | Storing Auth Data in Vuex | 03:46 |
| 320 | Accessing other Resources from Vuex | 08:42 |
| 321 | Sending the Token to the Backend | 05:39 |
| 322 | Protecting Routes (Auth Guard) | 02:49 |
| 323 | Updating the UI State (based on Authentication State) | 03:02 |
| 324 | Adding User Logout | 05:02 |
| 325 | Adding Auto Logout | 05:37 |
| 326 | Adding Auto Login | 10:37 |
| 327 | Wrap Up | 01:02 |
| 328 | About this Section | 00:58 |
| 329 | Module Introduction | 01:06 |
| 330 | Installing Vuelidate | 02:05 |
| 331 | Adding a Validator | 10:15 |
| 332 | Adding Validation UI Feedback | 04:56 |
| 333 | Controlling Styles for Invalid Entries | 02:11 |
| 334 | More Validators | 06:34 |
| 335 | Validating Passwords For Equality | 06:17 |
| 336 | Using the Required-Unless Validator | 04:53 |
| 337 | Validating Arrays | 07:20 |
| 338 | Controlling the Form Submit Button | 02:13 |
| 339 | Creating Custom Validators | 02:47 |
| 340 | Async Validators | 09:17 |
| 341 | Wrap Up | 01:06 |
| 342 | Module Introduction | 03:19 |
| 343 | Creating a Project | 04:42 |
| 344 | Analyzing the Created Project | 04:50 |
| 345 | Using Plugins | 04:06 |
| 346 | CSS Pre-Processors | 03:15 |
| 347 | Environment Variables | 07:29 |
| 348 | Building the Project | 03:44 |
| 349 | Instant Prototyping | 02:40 |
| 350 | Different Build Targets | 08:40 |
| 351 | Using the "Old" CLI Templates (vue init) | 01:20 |
| 352 | Using the Graphical User Interface (GUI) | 05:06 |
Comments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
What’s New in Nuxt 4: Key Updates for Nuxt.js Developers
Real-Time Data with Laravel Reverb and Vue.js