What Will I 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)
Requirements
- Basic JavaScript Knowledge is Required
- ES6 Knowledge is a Plus but not a Must
- Basic HTML and CSS Knowledge is assumed throughout the Course
Course Curriculum
01 Getting Started | |||
001 Course Introduction | 00:00:00 | ||
002 Lets Create our First VueJS Application | 00:00:00 | ||
003 Extending the VueJS Application | 00:00:00 | ||
004 Course Structure | 00:00:00 | ||
005 Take Advantage of all Course Resources | 00:00:00 | ||
006 Setup VueJS Locally | 00:00:00 | ||
02 Using VueJS to Interact with the DOM | |||
008 Module Introduction | 00:00:00 | ||
009 Understanding VueJS Templates | 00:00:00 | ||
010 How the VueJS Template Syntax and Instance Work Together | 00:00:00 | ||
011 Accessing Data in the Vue Instance | 00:00:00 | ||
012 Binding to Attributes | 00:00:00 | ||
013 Understanding and Using Directives | 00:00:00 | ||
014 Disable Re-Rendering with v-once | 00:00:00 | ||
015 How to Output Raw HTML | 00:00:00 | ||
016 Listening to Events | 00:00:00 | ||
017 Getting Event Data from the Event Object | 00:00:00 | ||
018 Passing your own Arguments with Events | 00:00:00 | ||
019 Modifying an Event – with Event Modifiers | 00:00:00 | ||
020 Listening to Keyboard | 00:00:00 | ||
021 Writing JavaScript Code in the Templates | 00:00:00 | ||
022 Using Two-Way-Binding | 00:00:00 | ||
023 Reacting to Changes with Computed Properties | 00:00:00 | ||
024 An Alternative to Computed Properties Watching for Changes | 00:00:00 | ||
025 Saving Time with Shorthands | 00:00:00 | ||
026 Dynamic Styling with CSS Classes – Basics | 00:00:00 | ||
027 Dynamic Styling with CSS Classes – Using Objects | 00:00:00 | ||
028 Dynamic Styling with CSS Classes – Using Names | 00:00:00 | ||
029 Setting Styles Dynamically (without CSS Classes) | 00:00:00 | ||
030 Styling Elements with the Array Syntax | 00:00:00 | ||
031 Module Wrap Up | 00:00:00 | ||
03 Using Conditionals and Rendering Lists | |||
033 Module Introduction | 00:00:00 | ||
034 Conditional Rendering with v-if | 00:00:00 | ||
036 Using an Alternative v-if Syntax | 00:00:00 | ||
037 Dont Detach it with v-show | 00:00:00 | ||
038 Rendering Lists with v-for | 00:00:00 | ||
039 Getting the Current Index | 00:00:00 | ||
040 Using an Alternative v-for Syntax | 00:00:00 | ||
041 Looping through Objects | 00:00:00 | ||
042 Looping through a List of Numbers | 00:00:00 | ||
043 Keeping Track of Elements when using v-for | 00:00:00 | ||
044 Module Wrap Up | 00:00:00 | ||
04 First Course Project - The Monster Slayer | |||
046 Introduction Challenge | 00:00:00 | ||
047 Setting up the Course Project | 00:00:00 | ||
048 Creating the Vue Instance and Styling the Healthbars | 00:00:00 | ||
049 Showing the Player Controls Conditionally | 00:00:00 | ||
050 Implementing a Start Game Method | 00:00:00 | ||
051 Implementing a Attack Method | 00:00:00 | ||
052 Write better Code – Time for Refactoring | 00:00:00 | ||
053 Implementing a Special Attack | 00:00:00 | ||
054 Implementing a Heal Method | 00:00:00 | ||
055 Finishing the Action Buttons | 00:00:00 | ||
056 Creating an Action Log | 00:00:00 | ||
057 Printing the Log (v-for) | 00:00:00 | ||
058 Finishing the Log | 00:00:00 | ||
059 Styling the Log Conditionally | 00:00:00 | ||
060 Wrap Up | 00:00:00 | ||
05 Understanding the VueJS Instance | |||
062 Module Introduction | 00:00:00 | ||
063 Some Basics about the VueJS Instance | 00:00:00 | ||
064 Using Multiple Vue Instances | 00:00:00 | ||
065 Accessing the Vue Instance from Outside | 00:00:00 | ||
066 How VueJS manages your Data and Methods | 00:00:00 | ||
067 A Closer Look at el and data | 00:00:00 | ||
068 Placing refs and Using them on your Templates | 00:00:00 | ||
069 Where to learn more about the Vue API | 00:00:00 | ||
070 Mounting a Template | 00:00:00 | ||
071 Using Components | 00:00:00 | ||
072 Limitations of some Templates | 00:00:00 | ||
073 How VueJS Updates the DOM | 00:00:00 | ||
074 The VueJS Instance Lifecycle | 00:00:00 | ||
075 The VueJS Instance Lifecycle in Practice | 00:00:00 | ||
076 Module Wrap Up | 00:00:00 | ||
06 Moving to a Real Development Workflow with Webpack and Vue CLI | |||
078 Module Introduction | 00:00:00 | ||
079 Why do we need a Development Server | 00:00:00 | ||
080 What does Development Workflow mean | 00:00:00 | ||
081 Using the Vue CLI to create Projects | 00:00:00 | ||
082 Installing the Vue CLI and Creating a new Project | 00:00:00 | ||
083 An Overview over the Webpack Template Folder Structure | 00:00:00 | ||
084 Understanding .vue Files | 00:00:00 | ||
085 Understanding the Object in the Vue File | 00:00:00 | ||
086 How to Build your App for Production | 00:00:00 | ||
087 Module Wrap Up | 00:00:00 | ||
07 An Introduction to Components | |||
090 Module Introduction | 00:00:00 | ||
091 An Introduction to Components | 00:00:00 | ||
092 Storing Data in Components with the Data Method | 00:00:00 | ||
093 Registering Components Locally and Globally | 00:00:00 | ||
094 The Root Component in the App.vue File | 00:00:00 | ||
095 Creating a Component | 00:00:00 | ||
096 Using Components | 00:00:00 | ||
097 Moving to a Better Folder Structure | 00:00:00 | ||
099 How to Name your Component Tags (Selectors) | 00:00:00 | ||
100 Scoping Component Styles | 00:00:00 | ||
101 Module Wrap Up | 00:00:00 | ||
08 Communicating between Components | |||
103 Module Introduction | 00:00:00 | ||
104 Communication Problems | 00:00:00 | ||
105 Using Props for Parent Child Communication | 00:00:00 | ||
106 Naming props | 00:00:00 | ||
107 Using props in the Child Component | 00:00:00 | ||
108 Validating props | 00:00:00 | ||
109 Using Custom Events for Child Parent Communication | 00:00:00 | ||
110 Understanding Unidirectional Data Flow | 00:00:00 | ||
111 Communicating with Callback Functions | 00:00:00 | ||
112 Communication between Sibling Components | 00:00:00 | ||
113 Using an Event Bus for Communication | 00:00:00 | ||
114 Centralizing Code in an Event Bus | 00:00:00 | ||
115 Wrap Up | 00:00:00 | ||
09 Advanced Component Usage | |||
117 Module Introduction | 00:00:00 | ||
118 Setting up the Module Project | 00:00:00 | ||
119 Passing Content – The Suboptimal Solution | 00:00:00 | ||
120 Passing Content with Slots | 00:00:00 | ||
121 How Slot Content gets Compiled and Styled | 00:00:00 | ||
122 Using Multiple Slots (Named Slots) | 00:00:00 | ||
123 Default Slots and Slot Defaults | 00:00:00 | ||
124 A Summary on Slots | 00:00:00 | ||
125 Switching Multiple Components with Dynamic Components | 00:00:00 | ||
126 Understanding Dynamic Component Behavior | 00:00:00 | ||
127 Keeping Dynamic Components Alive | 00:00:00 | ||
128 Dynamic Component Lifecycle Hooks | 00:00:00 | ||
129 Wrap Up | 00:00:00 | ||
10 Second Course Project - Wonderful Quotes | |||
131 Module Introduction | 00:00:00 | ||
132 Setting up the Project | 00:00:00 | ||
133 Initializing the Application | 00:00:00 | ||
134 Creating the Application Components | 00:00:00 | ||
135 Passing Data with Props and Slots | 00:00:00 | ||
136 Allowing Users to Create Quotes with a NewQuote Component | 00:00:00 | ||
137 Adding Quotes with Custom Events | 00:00:00 | ||
138 Adding a Info Box | 00:00:00 | ||
139 Allowing for Quote Deletion | 00:00:00 | ||
140 Controlling Quotes with a Progress Bar | 00:00:00 | ||
141 Finishing Touches and State Management | 00:00:00 | ||
11 Handling User Input with Forms | |||
143 Module Introduction | 00:00:00 | ||
144 A Basic input Form Binding | 00:00:00 | ||
145 Grouping Data and Pre-Populating Inputs | 00:00:00 | ||
146 Modifying User Input with Input Modifiers | 00:00:00 | ||
147 Binding textarea and Saving Line Breaks | 00:00:00 | ||
148 Using Checkboxes and Saving Data in Arrays | 00:00:00 | ||
149 Using Radio Buttons | 00:00:00 | ||
150 Handling Dropdowns with select and option | 00:00:00 | ||
151 What v-model does and How to Create a Custom Control | 00:00:00 | ||
152 Creating a Custom Control (Input) | 00:00:00 | ||
153 Submitting a Form | 00:00:00 | ||
154 Wrap Up | 00:00:00 | ||
12 Using and Creating Directives | |||
156 Module Introduction | 00:00:00 | ||
157 Understanding Directives | 00:00:00 | ||
158 How Directives Work – Hook Functions | 00:00:00 | ||
159 Creating a Simple Directive | 00:00:00 | ||
160 Passing Values to Custom Directives | 00:00:00 | ||
161 Passing Arguments to Custom Directives | 00:00:00 | ||
162 Modifying a Custom Directive with Modifiers | 00:00:00 | ||
163 Custom Directives – A Summary | 00:00:00 | ||
164 Registering Directives Locally | 00:00:00 | ||
165 Using Multiple Modifiers | 00:00:00 | ||
166 Passing more Complex Values to Directives | 00:00:00 | ||
167 Wrap Up | 00:00:00 | ||
13 Improving your App with Filters and Mixins | |||
169 Module Introduction | 00:00:00 | ||
170 Creating a Local Filter | 00:00:00 | ||
171 Global Filters and How to Chain Multiple Filters | 00:00:00 | ||
172 An (often-times better) Alternative to Filters Computed Properties | 00:00:00 | ||
173 Understanding Mixins | 00:00:00 | ||
174 Creating and Using Mixins | 00:00:00 | ||
175 How Mixins get Merged | 00:00:00 | ||
176 Creating a Global Mixin (Special Case) | 00:00:00 | ||
177 Mixins and Scope | 00:00:00 | ||
178 Wrap Up | 00:00:00 | ||
14 Adding Animations and Transitions | |||
180 Module Introduction | 00:00:00 | ||
181 Understanding Transitions | 00:00:00 | ||
182 Preparing Code to use Transitions | 00:00:00 | ||
183 Setting Up a Transition | 00:00:00 | ||
184 Assigning CSS Classes for Transitions | 00:00:00 | ||
185 Creating a Fade Transition with the CSS Transition Property | 00:00:00 | ||
186 Creating a Slide Transition with the CSS Animation Property | 00:00:00 | ||
187 Mixing Transition and Animation Properties | 00:00:00 | ||
188 Animating v-if and v-show | 00:00:00 | ||
189 Setting Up an Initial (on-load) Animation | 00:00:00 | ||
190 Using Different CSS Class Names | 00:00:00 | ||
191 Using Dynamic Names and Attributes | 00:00:00 | ||
192 Transitioning between Multiple Elements (Theory) | 00:00:00 | ||
193 Transitioning between Multiple Elements (Practice) | 00:00:00 | ||
194 Listening to Transition Event Hooks | 00:00:00 | ||
195 Understanding JavaScript Animations | 00:00:00 | ||
196 Excluding CSS from your Animation | 00:00:00 | ||
197 Creating an Animation in JavaScript | 00:00:00 | ||
198 Animating Dynamic Components | 00:00:00 | ||
199 Animating Lists with transition-group | 00:00:00 | ||
200 Using transition-group – Preparations | 00:00:00 | ||
201 Using transition-group to Animate a List | 00:00:00 | ||
202 Understanding the App | 00:00:00 | ||
203 Creating the App | 00:00:00 | ||
204 Adding Animations | 00:00:00 | ||
205 Wrap Up | 00:00:00 | ||
15 Connecting to Servers via Http - Using vue-resource | |||
208 Module Introduction | 00:00:00 | ||
209 Accessing Http via vue-resource – Setup | 00:00:00 | ||
210 Creating an Application and Setting Up a Server (Firebase) | 00:00:00 | ||
211 POSTing Data to a Server (Sending a POST Request) | 00:00:00 | ||
212 GETting and Transforming Data (Sending a GET Request) | 00:00:00 | ||
213 Configuring vue-resource Globally | 00:00:00 | ||
214 Intercepting Requests | 00:00:00 | ||
215 Intercepting Responses | 00:00:00 | ||
216 Where the resource in vue-resource Comes From | 00:00:00 | ||
217 Creating Custom Resources | 00:00:00 | ||
218 Resources vs Normal Http Requests | 00:00:00 | ||
219 Understanding Template URLs | 00:00:00 | ||
220 Wrap Up | 00:00:00 | ||
16 Routing in a VueJS Application | |||
222 Module Introduction | 00:00:00 | ||
223 Setting up the VueJS Router (vue-router) | 00:00:00 | ||
224 Setting Up and Loading Routes | 00:00:00 | ||
225 Understanding Routing Modes (Hash vs History) | 00:00:00 | ||
226 Navigating with Router Links | 00:00:00 | ||
227 Where am I – Styling Active Links | 00:00:00 | ||
228 Navigating from Code (Imperative Navigation) | 00:00:00 | ||
229 Setting Up Route Parameters | 00:00:00 | ||
230 Fetching and Using Route Parameters | 00:00:00 | ||
231 Reacting to Changes in Route Parameters | 00:00:00 | ||
233 Setting Up Child Routes (Nested Routes) | 00:00:00 | ||
234 Navigating to Nested Routes | 00:00:00 | ||
235 Making Router Links more Dynamic | 00:00:00 | ||
236 A Better Way of Creating Links – With Named Routes | 00:00:00 | ||
237 Using Query Parameters | 00:00:00 | ||
238 Multiple Router Views (Named Router Views) | 00:00:00 | ||
239 Redirecting | 00:00:00 | ||
240 Setting Up Catch All Routes Wildcards | 00:00:00 | ||
241 Animating Route Transitions | 00:00:00 | ||
242 Passing the Hash Fragment | 00:00:00 | ||
243 Controlling the Scroll Behavior | 00:00:00 | ||
244 Protecting Routes with Guards | 00:00:00 | ||
245 Using the beforeEnter Guard | 00:00:00 | ||
246 Using the beforeLeave Guard | 00:00:00 | ||
247 Loading Routes Lazily | 00:00:00 | ||
248 Wrap Up | 00:00:00 | ||
17 Better State Management with Vuex | |||
250 Module Introduction | 00:00:00 | ||
251 Why a Different State Management May Be Needed | 00:00:00 | ||
252 Understanding Centralized State | 00:00:00 | ||
253 Using the Centralized State | 00:00:00 | ||
254 Why a Centralized State Alone Wont Fix It | 00:00:00 | ||
255 Understanding Getters | 00:00:00 | ||
256 Using Getters | 00:00:00 | ||
257 Mapping Getters to Properties | 00:00:00 | ||
258 Understanding Mutations | 00:00:00 | ||
259 Using Mutations | 00:00:00 | ||
260 Why Mutations have to run Synchronously | 00:00:00 | ||
261 How Actions improve Mutations | 00:00:00 | ||
262 Using Actions | 00:00:00 | ||
263 Mapping Actions to Methods | 00:00:00 | ||
264 A Summary of Vuex | 00:00:00 | ||
265 Two-Way-Binding (v-model) and Vuex | 00:00:00 | ||
266 Improving Folder Structures | 00:00:00 | ||
267 Modularizing the State Management | 00:00:00 | ||
268 Using Separate Files | 00:00:00 | ||
269 Using Namespaces to Avoid Naming Problems | 00:00:00 | ||
271 Wrap Up | 00:00:00 | ||
18 Final Project - The Stock Trader | |||
273 Project Introduction | 00:00:00 | ||
274 Project Setup and Planning | 00:00:00 | ||
275 Creating the First Components | 00:00:00 | ||
276 Setup Project Routes | 00:00:00 | ||
277 Adding a Header and Navigation | 00:00:00 | ||
278 Planning the Next Steps | 00:00:00 | ||
279 Creating Stocks Components | 00:00:00 | ||
280 Adding a Buy Button | 00:00:00 | ||
281 Setting up the Vuex State Management | 00:00:00 | ||
282 Adding a Portfolio Module to Vuex | 00:00:00 | ||
283 Working on the Portfolio Stocks | 00:00:00 | ||
284 Connecting the Portfolio with Vuex | 00:00:00 | ||
285 Time to fix some Errors | 00:00:00 | ||
286 Displaying the Funds | 00:00:00 | ||
287 Adding some Order Checks | 00:00:00 | ||
288 Making Funds Look Nicer with Filters | 00:00:00 | ||
289 Ending the Day – Randomizing Stocks | 00:00:00 | ||
290 Animating the Route Transitions | 00:00:00 | ||
291 Saving Fetching Data – Adding a Dropdown | 00:00:00 | ||
292 Setting up vue-resource and Firebase | 00:00:00 | ||
293 Saving Data (PUT Request) | 00:00:00 | ||
294 Fetching Data (GET Request) | 00:00:00 | ||
295 Testing and Bug Fixes | 00:00:00 | ||
296 Project Wrap Up | 00:00:00 | ||
297 Bonus Debugging Vuex with Vue Developer Tools | 00:00:00 | ||
19 Deploying a VueJS Application | |||
299 Module Introduction | 00:00:00 | ||
300 Preparing for Deployment | 00:00:00 | ||
301 Deploying the App (Example AWS S3) | 00:00:00 | ||
20 Course Roundup | |||
302 Courses Roundup | 00:00:00 | ||
21 All Course Exercises (Time to Practice) | |||
304 Time to Practice (1) – Outputting Data to Templates (Problem) | 00:00:00 | ||
305 Time to Practice (1) – Outputting Data to Templates (Solution) | 00:00:00 | ||
307 Time to Practice (2) – Events (Problem) | 00:00:00 | ||
308 Time to Practice (2) – Events (Solution) | 00:00:00 | ||
310 Time to Practice (3) – Reactive Properties (Problem) | 00:00:00 | ||
311 Time to Practice (3) – Reactive Properties (Solution) | 00:00:00 | ||
313 Time to Practice (4) – Styling (Problem) | 00:00:00 | ||
314 Time to Practice (4) – Styling (Solution) | 00:00:00 | ||
316 Time to Practice (5) – Conditionals and Lists (Problem) | 00:00:00 | ||
317 Time to Practice (5) – Conditionals and Lists (Solution) | 00:00:00 | ||
318 Time to Practice (6) – Components (Problem) | 00:00:00 | ||
319 Time to Practice (6) – Components (Solution) | 00:00:00 | ||
320 Time to Practice (7) – Component Communication (Problem) | 00:00:00 | ||
321 Time to Practice (7) – Component Communication (Solution) | 00:00:00 | ||
321 Time to Practice (7) – Component Communication (Solution) | 00:00:00 | ||
322 Time to Practice (8) – Slots and Dynamic Components (Problem) | 00:00:00 | ||
323 Time to Practice (8) – Slots and Dynamic Components (Solution) | 00:00:00 | ||
324 Time to Practice (9) – Forms (Problem) | 00:00:00 | ||
325 Time to Practice (9) – Forms (Solution) | 00:00:00 | ||
326 Time to Practice (10) – Directives (Problem) | 00:00:00 | ||
327 Time to Practice (10) – Directives (Solution) | 00:00:00 | ||
328 Time to Practice (11) – Filters and Mixins (Problem) | 00:00:00 | ||
329 Time to Practice (11) – Filters and Mixins (Solution) | 00:00:00 | ||
22 Bonus Using Axios instead of vue-resource | |||
330 About this Section | 00:00:00 | ||
331 Module Introduction | 00:00:00 | ||
332 Project Setup | 00:00:00 | ||
333 Axios Setup | 00:00:00 | ||
334 Sending a POST Request | 00:00:00 | ||
335 Sending a GET Request | 00:00:00 | ||
336 Accessing Using Response Data | 00:00:00 | ||
337 Setting a Global Request Configuration | 00:00:00 | ||
338 Using Interceptors | 00:00:00 | ||
339 Custom Axios Instances | 00:00:00 | ||
340 Wrap Up | 00:00:00 | ||
23 Bonus Authentication in Vue Apps | |||
342 About this Section | 00:00:00 | ||
343 Module Introduction | 00:00:00 | ||
344 How Authentication Works in SPAs | 00:00:00 | ||
345 Project Setup | 00:00:00 | ||
346 Adding User Signup | 00:00:00 | ||
347 Adding User Signin (Login) | 00:00:00 | ||
348 Using Vuex to send Auth Requests | 00:00:00 | ||
349 Storing Auth Data in Vuex | 00:00:00 | ||
351 Accessing other Resources from Vuex | 00:00:00 | ||
352 Sending the Token to the Backend | 00:00:00 | ||
353 Protecting Routes (Auth Guard) | 00:00:00 | ||
354 Updating the UI State (based on Authentication State) | 00:00:00 | ||
355 Adding User Logout | 00:00:00 | ||
356 Adding Auto Logout | 00:00:00 | ||
357 Adding Auto Login | 00:00:00 | ||
358 Wrap Up | 00:00:00 | ||
24 Bonus Form Input Validation | |||
360 About this Section | 00:00:00 | ||
361 Module Introduction | 00:00:00 | ||
363 Installing Vuelidate | 00:00:00 | ||
364 Adding a Validator | 00:00:00 | ||
365 Adding Validation UI Feedback | 00:00:00 | ||
366 Controlling Styles for Invalid Entries | 00:00:00 | ||
367 More Validators | 00:00:00 | ||
368 Validating Passwords For Equality | 00:00:00 | ||
369 Using the Required-Unless Validator | 00:00:00 | ||
370 Validating Arrays | 00:00:00 | ||
371 Controlling the Form Submit Button | 00:00:00 | ||
372 Creating Custom Validators | 00:00:00 | ||
373 Async Validators | 00:00:00 | ||
374 Wrap Up | 00:00:00 |
5 STUDENTS ENROLLED