by Maximilian Schwarzmüller | Publisher: Packt Publishing | Release Date: April 2018 | ISBN: 9781788992817

Vue JS is an awesome JavaScript framework for building frontend applications! VueJS mixes the best of Angular and React!About This VideoWhat is VueJS and why would you use it?Setting up a development environment and workflowThe 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 inputsAll about directives, filters, and mixinsHow to make your app more beautiful with animations and transitionsHow to create an awesome single-page-applications (SPA) with routingHow to improve state management by using VuexHow to deploy the appIn DetailWhichever 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! 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! This course covers it all! 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. And all this is accompanied with many exercises and multiple course projects - because it isn't just about seeing code, it's about using and practicing it!

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



9781788992817.Vue.JS.2.The.Complete.Guide.incl.Vue.Router.and.Vuex.part1.OR.rar

9781788992817.Vue.JS.2.The.Complete.Guide.incl.Vue.Router.and.Vuex.part2.OR.rar