English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 21h 51m | 4.83 GB
Vue.js is an awesome JavaScript Framework for building Frontend Applications! VueJS mixes the Best of Angular + React!
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!
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 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!
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)
Table of Contents
Getting Started
1 Course Introduction
2 Join our Online Learning Community
3 Let’s Create our First VueJS Application
4 Extending the VueJS Application
5 Course Structure
6 Take Advantage of all Course Resources!
7 Setup VueJS Locally
8 Module Resources & Useful Links
Using VueJS to Interact with the DOM
9 Module Introduction
10 Understanding VueJS Templates
11 How the VueJS Template Syntax and Instance Work Together
12 Accessing Data in the Vue Instance
13 Binding to Attributes
14 Understanding and Using Directives
15 Disable Re-Rendering with v-once
16 How to Output Raw HTML
17 Optional: Assignment Starting Code
18 Broken Udemy Download Links
19 Listening to Events
20 Getting Event Data from the Event Object
21 Passing your own Arguments with Events
22 Modifying an Event – with Event Modifiers
23 Listening to Keyboard Events
24 Writing JavaScript Code in the Templates
25 Using Two-Way-Binding
26 Reacting to Changes with Computed Properties
27 An Alternative to Computed Properties: Watching for Changes
28 Saving Time with Shorthands
29 Dynamic Styling with CSS Classes – Basics
30 Dynamic Styling with CSS Classes – Using Objects
31 Dynamic Styling with CSS Classes – Using Names
32 Setting Styles Dynamically (without CSS Classes)
33 Styling Elements with the Array Syntax
34 Module Wrap Up
35 Module Resources & Useful Links
Using Conditionals and Rendering Lists
36 Module Introduction
37 Conditional Rendering with v-if
38 v-else-if in Vue.js 2.1
39 Using an Alternative v-if Syntax
40 Don’t Detach it with v-show
41 Rendering Lists with v-for
42 Getting the Current Index
43 Using an Alternative v-for Syntax
44 Looping through Objects
45 Looping through a List of Numbers
46 Keeping Track of Elements when using v-for
47 Module Wrap Up
48 Module Resources & Useful Links
First Course Project – The Monster Slayer
49 Introduction & Challenge
50 Setting up the Course Project
51 Creating the Vue Instance and Styling the Healthbars
52 Showing the Player Controls Conditionally
53 Implementing a “Start Game” Method
54 Implementing a “Attack” Method
55 Write better Code – Time for Refactoring!
56 Implementing a “Special Attack”
57 Implementing a “Heal” Method
58 Finishing the Action Buttons
59 Creating an Action Log
60 Printing the Log (v-for)
61 Finishing the Log
62 Styling the Log Conditionally
63 Wrap Up
64 Full Application Code
Understanding the VueJS Instance
65 Module Introduction
66 Some Basics about the VueJS Instance
67 Using Multiple Vue Instances
68 Accessing the Vue Instance from Outside
69 How VueJS manages your Data and Methods
70 A Closer Look at $el and $data
71 Placing $refs and Using them on your Templates
72 Where to learn more about the Vue API
73 Mounting a Template
74 Using Components
75 Limitations of some Templates
76 How VueJS Updates the DOM
77 The VueJS Instance Lifecycle
78 The VueJS Instance Lifecycle in Practice
79 Module Wrap Up
80 Module Resources & Useful Links
Moving to a “Real” Development Workflow with Webpack and Vue CLI
81 Module Introduction
82 Why do we need a Development Server?
83 What does “Development Workflow” mean?
84 Using the Vue CLI to create Projects
85 Installing the Vue CLI and Creating a new Project
86 An Overview over the Webpack Template Folder Structure
87 Understanding “.vue” Files
88 Understanding the Object in the Vue File
89 How to Build your App for Production
90 Module Wrap Up
91 More about “.vue” Files and the CLI
92 Debugging VueJS Projects
An Introduction to Components
93 Module Introduction
94 An Introduction to Components
95 Storing Data in Components with the Data Method
96 Registering Components Locally and Globally
97 The “Root Component” in the App.vue File
98 Creating a Component
99 Using Components
100 Time to Practice – Components (Code)
101 Moving to a Better Folder Structure
102 Alternative Folder Structures
103 How to Name your Component Tags (Selectors)
104 Scoping Component Styles
105 Module Wrap Up
106 Module Resources & Useful Links
Communicating between Components
107 Module Introduction
108 Communication Problems
109 Using Props for Parent => Child Communication
110 Naming “props”
111 Using “props” in the Child Component
112 Validating “props”
113 Using Custom Events for Child => Parent Communication
114 Understanding Unidirectional Data Flow
115 Communicating with Callback Functions
116 Communication between Sibling Components
117 Using an Event Bus for Communication
118 Centralizing Code in an Event Bus
119 Time to Practice – Component Communication (Code)
120 Wrap Up
121 Module Resources & Useful Links
Advanced Component Usage
122 Module Introduction
123 Setting up the Module Project
124 Passing Content – The Suboptimal Solution
125 Passing Content with Slots
126 How Slot Content gets Compiled and Styled
127 Changed Slot Styling Behavior
128 Using Multiple Slots (Named Slots)
129 Default Slots and Slot Defaults
130 A Summary on Slots
131 Switching Multiple Components with Dynamic Components
132 Understanding Dynamic Component Behavior
133 Keeping Dynamic Components Alive
134 Dynamic Component Lifecycle Hooks
135 Time to Practice – Slots and Dynamic Components (Code)
136 Wrap Up
137 Module Resources & Helpful Links
Second Course Project – Wonderful Quotes
138 Module Introduction
139 Setting up the Project
140 Initializing the Application
141 Creating the Application Components
142 Passing Data with Props and Slots
143 Allowing Users to Create Quotes with a NewQuote Component
144 Adding Quotes with Custom Events
145 Adding a Info Box
146 Allowing for Quote Deletion
147 Controlling Quotes with a Progress Bar
148 Finishing Touches and State Management
149 Module Resources
Handling User Input with Forms
150 Module Introduction
151 A Basic Form Binding
152 Grouping Data and Pre-Populating Inputs
153 Modifying User Input with Input Modifiers
154 Binding