McAfee-Secured Website

Course name Web Development Courses Building Frontend Applications with Vue JS: Building Frontend Applications with Vue JS

Building Frontend Applications with Vue JS Video Course

Building Frontend Applications with Vue JS Video Course is developed by Web Development Courses Professionals to help you pass the Building Frontend Applications with Vue JS exam.

You Will Learn:

Was 21.99 USD
Now 19.99 USD

Description

This course will improve your knowledge and skills required to pass Building Frontend Applications with Vue JS exam.

Curriculum For This Course

  • 1. Getting Started 6 Videos 00:19:46
    • Course Introduction 03:09
    • Let's Create our First VueJS Application 04:45
    • Extending the VueJS Application 04:12
    • Course Structure 03:44
    • Take Advantage of all Course Resources! 01:56
    • Setup VueJS Locally 02:03
  • 2. Using VueJS to Interact with the DOM 24 Videos 01:02:44
    • Module Introduction 00:45
    • Understanding VueJS Templates 02:35
    • How the VueJS Template Syntax and Instance Work Together 02:42
    • Accessing Data in the Vue Instance 01:49
    • Binding to Attributes 02:43
    • Understanding and Using Directives 01:27
    • Disable Re-Rendering with v-once 01:41
    • How to Output Raw HTML 02:43
    • Listening to Events 01:50
    • Getting Event Data from the Event Object 02:36
    • Passing your own Arguments with Events 01:53
    • Modifying an Event - with Event Modifiers 03:23
    • Listening to Keyboard Events 02:03
    • Writing JavaScript Code in the Templates 03:19
    • Using Two-Way-Binding 01:49
    • Reacting to Changes with Computed Properties 09:32
    • An Alternative to Computed Properties: Watching for Changes 03:53
    • Saving Time with Shorthands 01:26
    • Dynamic Styling with CSS Classes - Basics 04:22
    • Dynamic Styling with CSS Classes - Using Objects 01:36
    • Dynamic Styling with CSS Classes - Using Names 03:27
    • Setting Styles Dynamically (without CSS Classes) 03:15
    • Styling Elements with the Array Syntax 01:14
    • Module Wrap Up 00:44
  • 3. Using Conditionals and Rendering Lists 11 Videos 00:23:50
    • Module Introduction 00:49
    • Conditional Rendering with v-if 03:38
    • Using an Alternative v-if Syntax 01:36
    • Don't Detach it with v-show 01:43
    • Rendering Lists with v-for 02:26
    • Getting the Current Index 01:51
    • Using an Alternative v-for Syntax 01:10
    • Looping through Objects 04:44
    • Looping through a List of Numbers 00:57
    • Keeping Track of Elements when using v-for 04:08
    • Module Wrap Up 00:51
  • 4. First Course Project - The Monster Slayer 15 Videos 00:43:17
    • Introduction & Challenge 02:54
    • Setting up the Course Project 02:37
    • Creating the Vue Instance and Styling the Healthbars 05:16
    • Showing the Player Controls Conditionally 02:02
    • Implementing a "Start Game" Method 01:53
    • Implementing a "Attack" Method 08:03
    • Write better Code - Time for Refactoring! 04:52
    • Implementing a "Special Attack" 02:11
    • Implementing a "Heal" Method 02:21
    • Finishing the Action Buttons 00:59
    • Creating an Action Log 02:41
    • Printing the Log (v-for) 02:20
    • Finishing the Log 01:57
    • Styling the Log Conditionally 01:44
    • Wrap Up 01:28
  • 5. Understanding the VueJS Instance 15 Videos 00:53:26
    • Module Introduction 01:04
    • Some Basics about the VueJS Instance 02:58
    • Using Multiple Vue Instances 02:52
    • Accessing the Vue Instance from Outside 03:29
    • How VueJS manages your Data and Methods 04:01
    • A Closer Look at $el and $data 04:55
    • Placing $refs and Using them on your Templates 05:48
    • Where to learn more about the Vue API 00:58
    • Mounting a Template 06:42
    • Using Components 04:56
    • Limitations of some Templates 02:35
    • How VueJS Updates the DOM 03:25
    • The VueJS Instance Lifecycle 03:12
    • The VueJS Instance Lifecycle in Practice 05:39
    • Module Wrap Up 00:55
  • 6. Moving to a "Real" Development Workflow with Webpack and Vue CLI 10 Videos 00:28:40
    • Module Introduction 01:34
    • Why do we need a Development Server? 02:47
    • What does "Development Workflow" mean? 03:51
    • Using the Vue CLI to create Projects 02:35
    • Installing the Vue CLI and Creating a new Project 04:18
    • An Overview over the Webpack Template Folder Structure 03:40
    • Understanding ".vue" Files 06:46
    • Understanding the Object in the Vue File 01:11
    • How to Build your App for Production 00:49
    • Module Wrap Up 01:11
  • 7. An Introduction to Components 11 Videos 00:39:18
    • Module Introduction 01:04
    • An Introduction to Components 04:56
    • Storing Data in Components with the Data Method 04:04
    • Registering Components Locally and Globally 02:50
    • The "Root Component" in the App.vue File 03:21
    • Creating a Component 04:24
    • Using Components 05:32
    • Moving to a Better Folder Structure 02:43
    • How to Name your Component Tags (Selectors) 04:31
    • Scoping Component Styles 05:05
    • Module Wrap Up 00:50
  • 8. Communicating between Components 13 Videos 00:38:34
    • Module Introduction 00:46
    • Communication Problems 02:52
    • Using Props for Parent => Child Communication 03:10
    • Naming "props" 01:10
    • Using "props" in the Child Component 01:28
    • Validating "props" 04:57
    • Using Custom Events for Child => Parent Communication 05:55
    • Understanding Unidirectional Data Flow 01:07
    • Communicating with Callback Functions 02:23
    • Communication between Sibling Components 06:25
    • Using an Event Bus for Communication 05:32
    • Centralizing Code in an Event Bus 02:14
    • Wrap Up 00:41
  • 9. Advanced Component Usage 13 Videos 00:26:19
    • Module Introduction 00:38
    • Setting up the Module Project 03:00
    • Passing Content - The Suboptimal Solution 02:19
    • Passing Content with Slots 00:42
    • How Slot Content gets Compiled and Styled 03:03
    • Using Multiple Slots (Named Slots) 02:50
    • Default Slots and Slot Defaults 02:01
    • A Summary on Slots 00:45
    • Switching Multiple Components with Dynamic Components 05:31
    • Understanding Dynamic Component Behavior 02:07
    • Keeping Dynamic Components Alive 00:58
    • Dynamic Component Lifecycle Hooks 01:18
    • Wrap Up 01:11
  • 10. Second Course Project - Wonderful Quotes 11 Videos 00:29:13
    • Module Introduction 01:36
    • Setting up the Project 01:22
    • Initializing the Application 01:28
    • Creating the Application Components 04:04
    • Passing Data with Props and Slots 02:13
    • Allowing Users to Create Quotes with a NewQuote Component 04:08
    • Adding Quotes with Custom Events 03:34
    • Adding a Info Box 01:06
    • Allowing for Quote Deletion 03:40
    • Controlling Quotes with a Progress Bar 03:52
    • Finishing Touches and State Management 02:13
  • 11. Handling User Input with Forms 12 Videos 00:35:47
    • Module Introduction 00:54
    • A Basic 'input' Form Binding 03:46
    • Grouping Data and Pre-Populating Inputs 02:42
    • Modifying User Input with Input Modifiers 02:58
    • Binding 'textarea' and Saving Line Breaks 02:53
    • Using Checkboxes and Saving Data in Arrays 04:05
    • Using Radio Buttons 02:30
    • Handling Dropdowns with 'select' and 'option' 05:09
    • What v-model does and How to Create a Custom Control 02:49
    • Creating a Custom Control (Input) 05:13
    • Submitting a Form 02:08
    • Wrap Up 00:43
  • 12. Using and Creating Directives 12 Videos 00:23:57
    • Module Introduction 00:53
    • Understanding Directives 03:34
    • How Directives Work - Hook Functions 02:28
    • Creating a Simple Directive 01:22
    • Passing Values to Custom Directives 01:08
    • Passing Arguments to Custom Directives 02:40
    • Modifying a Custom Directive with Modifiers 02:25
    • Custom Directives - A Summary 00:28
    • Registering Directives Locally 01:37
    • Using Multiple Modifiers 04:27
    • Passing more Complex Values to Directives 02:13
    • Wrap Up 00:44
  • 13. Improving your App with Filters and Mixins 10 Videos 00:27:55
    • Module Introduction 00:45
    • Creating a Local Filter 04:32
    • Global Filters and How to Chain Multiple Filters 01:45
    • An (often-times better) Alternative to Filters: Computed Properties 05:15
    • Understanding Mixins 02:23
    • Creating and Using Mixins 02:25
    • How Mixins get Merged 02:58
    • Creating a Global Mixin (Special Case!) 03:26
    • Mixins and Scope 02:33
    • Wrap Up 01:56
  • 14. Adding Animations and Transitions 26 Videos 01:31:42
    • Module Introduction 01:08
    • Understanding Transitions 01:01
    • Preparing Code to use Transitions 03:11
    • Setting Up a Transition 03:09
    • Assigning CSS Classes for Transitions 02:27
    • Creating a "Fade" Transition with the CSS Transition Property 03:21
    • Creating a "Slide" Transition with the CSS Animation Property 03:59
    • Mixing Transition and Animation Properties 03:31
    • Animating v-if and v-show 00:33
    • Setting Up an Initial (on-load) Animation 01:30
    • Using Different CSS Class Names 04:01
    • Using Dynamic Names and Attributes 02:33
    • Transitioning between Multiple Elements (Theory) 00:34
    • Transitioning between Multiple Elements (Practice) 04:42
    • Listening to Transition Event Hooks 02:06
    • Understanding JavaScript Animations 08:03
    • Excluding CSS from your Animation 01:28
    • Creating an Animation in JavaScript 06:18
    • Animating Dynamic Components 05:57
    • Animating Lists with 'transition-group' 00:44
    • Using 'transition-group' - Preparations 04:20
    • Using 'transition-group' to Animate a List 06:12
    • Understanding the App 01:15
    • Creating the App 12:04
    • Adding Animations 06:38
    • Wrap Up 01:03
  • 15. Connecting to Servers via Http - Using vue-resource 13 Videos 00:47:56
    • Module Introduction 01:42
    • Accessing Http via vue-resource - Setup 04:00
    • Creating an Application and Setting Up a Server (Firebase) 05:24
    • POSTing Data to a Server (Sending a POST Request) 06:10
    • GETting and Transforming Data (Sending a GET Request) 06:54
    • Configuring vue-resource Globally 02:48
    • Intercepting Requests 03:34
    • Intercepting Responses 02:51
    • Where the "resource" in vue-resource Comes From 04:42
    • Creating Custom Resources 02:39
    • Resources vs "Normal" Http Requests 00:28
    • Understanding Template URLs 05:06
    • Wrap Up 01:42
  • 16. Routing in a VueJS Application 26 Videos 01:24:43
    • Module Introduction 01:38
    • Setting up the VueJS Router (vue-router) 02:16
    • Setting Up and Loading Routes 06:43
    • Understanding Routing Modes (Hash vs History) 04:14
    • Navigating with Router Links 03:45
    • Where am I? - Styling Active Links 03:20
    • Navigating from Code (Imperative Navigation) 02:42
    • Setting Up Route Parameters 01:59
    • Fetching and Using Route Parameters 02:03
    • Reacting to Changes in Route Parameters 03:04
    • Setting Up Child Routes (Nested Routes) 04:39
    • Navigating to Nested Routes 03:09
    • Making Router Links more Dynamic 02:04
    • A Better Way of Creating Links - With Named Routes 03:21
    • Using Query Parameters 02:54
    • Multiple Router Views (Named Router Views) 03:27
    • Redirecting 02:13
    • Setting Up "Catch All" Routes / Wildcards 01:06
    • Animating Route Transitions 02:34
    • Passing the Hash Fragment 03:28
    • Controlling the Scroll Behavior 03:21
    • Protecting Routes with Guards 01:13
    • Using the "beforeEnter" Guard 07:51
    • Using the "beforeLeave" Guard 03:31
    • Loading Routes Lazily 07:08
    • Wrap Up 01:02
  • 17. Better State Management with Vuex 21 Videos 01:12:06
    • Module Introduction 01:12
    • Why a Different State Management May Be Needed 02:25
    • Understanding "Centralized State" 01:32
    • Using the Centralized State 06:49
    • Why a Centralized State Alone Won't Fix It 02:41
    • Understanding Getters 00:48
    • Using Getters 02:40
    • Mapping Getters to Properties 06:57
    • Understanding Mutations 01:14
    • Using Mutations 04:51
    • Why Mutations have to run Synchronously 01:34
    • How Actions improve Mutations 01:32
    • Using Actions 04:59
    • Mapping Actions to Methods 04:58
    • A Summary of Vuex 04:14
    • Two-Way-Binding (v-model) and Vuex 05:56
    • Improving Folder Structures 01:01
    • Modularizing the State Management 04:56
    • Using Separate Files 04:18
    • Using Namespaces to Avoid Naming Problems 06:44
    • Wrap Up 00:50
  • 18. Final Project - The Stock Trader 25 Videos 01:44:08
    • Project Introduction 03:11
    • Project Setup and Planning 02:45
    • Creating the First Components 02:55
    • Setup Project Routes 04:42
    • Adding a Header and Navigation 06:44
    • Planning the Next Steps 01:22
    • Creating Stocks Components 06:31
    • Adding a "Buy" Button 05:57
    • Setting up the Vuex State Management 10:21
    • Adding a Portfolio Module to Vuex 10:02
    • Working on the Portfolio Stocks 06:51
    • Connecting the Portfolio with Vuex 02:21
    • Time to fix some Errors 02:00
    • Displaying the Funds 03:41
    • Adding some Order Checks 05:41
    • Making Funds Look Nicer with Filters 01:48
    • Ending the Day - Randomizing Stocks 05:30
    • Animating the Route Transitions 03:14
    • Saving & Fetching Data - Adding a Dropdown 02:17
    • Setting up vue-resource and Firebase 02:16
    • Saving Data (PUT Request) 02:51
    • Fetching Data (GET Request) 05:04
    • Testing and Bug Fixes 02:50
    • Project Wrap Up 01:22
    • Bonus: Debugging Vuex with Vue Developer Tools 01:59
  • 19. Deploying a VueJS Application 3 Videos 00:08:54
    • Module Introduction 01:12
    • Preparing for Deployment 01:45
    • Deploying the App (Example: AWS S3) 05:57
  • 20. Course Roundup 1 Videos 00:00:58
    • Courses Roundup 00:59
  • 21. All Course Exercises ("Time to Practice") 22 Videos 01:51:06
    • Time to Practice (1) - Outputting Data to Templates (Problem) 01:59
    • Time to Practice (1) - Outputting Data to Templates (Solution) 06:12
    • Time to Practice (2) - Events (Problem) 01:42
    • Time to Practice (2) - Events (Solution) 04:54
    • Time to Practice (3) - Reactive Properties (Problem) 02:29
    • Time to Practice (3) - Reactive Properties (Solution) 05:47
    • Time to Practice (4) - Styling (Problem) 03:49
    • Time to Practice (4) - Styling (Solution) 18:17
    • Time to Practice (5) - Conditionals and Lists (Problem) 01:40
    • Time to Practice (5) - Conditionals and Lists (Solution) 09:38
    • Time to Practice (6) - Components (Problem) 01:45
    • Time to Practice (6) - Components (Solution) 02:12
    • Time to Practice (7) - Component Communication (Problem) 03:06
    • Time to Practice (7) - Component Communication (Solution) 10:17
    • Time to Practice (8) - Slots and Dynamic Components (Problem) 01:27
    • Time to Practice (8) - Slots and Dynamic Components (Solution) 03:00
    • Time to Practice (9) - Forms (Problem) 01:30
    • Time to Practice (9) - Forms (Solution) 15:17
    • Time to Practice (10) - Directives (Problem) 00:54
    • Time to Practice (10) - Directives (Solution) 05:55
    • Time to Practice (11) - Filters and Mixins (Problem) 01:08
    • Time to Practice (11) - Filters and Mixins (Solution) 08:12