Contact for queries :
banner1
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
TAKE THIS COURSE
  • FREE
  • 10 Days
5 STUDENTS ENROLLED

About WPLMS

WPLMS is the most popular Education WordPress theme. With over 12000 customers and several startups successfully running their businesses on WPLMS, it is the most powerful solution for Education websites right now.

Popular Tags

Who’s Online

There are no users currently online
top
Template Design © VibeThemes. All rights reserved.