Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

Name: Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Availability: InStock

19h 57m 29s

English

Free

October 31, 2024

VueJS has rapidly become one of the most popular JavaScript frameworks, lauded for its flexibility and ease of use. Frontend frameworks are cherished for allowing the creation of dynamic, mobile-app-like user experiences right in the browser. It’s no surprise that proficiency in frameworks like VueJS is highly sought after, leading to some of the best-paid jobs in the industry!

Course Requirements

Basic JavaScript knowledge is required.
Knowledge of ES6 is a plus but not mandatory.
Basic understanding of HTML and CSS is assumed throughout the course.

Course Description

You may have heard of Angular 2 and ReactJS. VueJS combines the best of both frameworks, making it easy and fun to build anything from small widgets to large, enterprise-level applications. Don’t worry if you are unfamiliar with these frameworks; this course assumes no prior knowledge and will guide you through everything!

We start with the basics, exploring what Vue.js is and how it works before progressing to more complex and advanced topics. Here’s what you’ll learn:

Learning Objectives

What VueJS is and why you would use it.
Setting up a development environment and workflow.
The basics of VueJS, including syntax, templates, and more.
Interacting with the DOM, including rendering lists and conditional element attachment.
Using and understanding components.
Binding to form inputs.
An introduction to directives, filters, and mixins.
Enhancing your app with animations and transitions.
Creating single-page applications (SPAs) with routing.
Improving state management using Vuex.
Deploying your VueJS application.
And much more!

The course includes numerous exercises and projects for hands-on practice, ensuring you learn by doing!

Is This Course Right for You?

Ideal Student Profiles

Student #1: You have some JavaScript experience and want to explore its potential for creating interactive web applications. VueJS is perfect for this purpose!
Student #2: You have experience with other frontend frameworks like Angular or ReactJS and are looking for an alternative. VueJS might be exactly what you need!
Student #3: You have a background in backend frameworks and want to expand into frontend development. VueJS offers a powerful, yet enjoyable way to make that transition.
Bonus Student #4: Perhaps you are frustrated with the setup complexities of Angular. VueJS proves a simpler, more efficient choice!

Who This Course is For

Anyone interested in frontend development and major JavaScript frameworks.
Those who wish to build reactive applications running in the browser.
Students who prefer a native JavaScript framework for simpler onboarding compared to Angular 2.
Individuals dissatisfied with Angular 2 will find VueJS a refreshing alternative!

What You'll Learn:

How to build amazing Vue.js applications from small projects to large, enterprise-level applications.
Understand the theory behind Vue.js and apply it to real-world projects.
Utilize Vue.js for both multi-page and single-page applications (MPAs and SPAs).

Let’s dive into VueJS right now and explore its capabilities!

About the Author: udemy

By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

Watch Online 352 lessons

0:00 0:00

#	Lesson Title	Duration
1	Course Introduction	03:09
2	Let's Create our First VueJS Application	04:46
3	Extending the VueJS Application	04:13
4	Course Structure	03:45
5	Take Advantage of all Course Resources!	01:57
6	Setup VueJS Locally	02:04
7	Module Introduction	00:46
8	Understanding VueJS Templates	02:36
9	How the VueJS Template Syntax and Instance Work Together	02:43
10	Accessing Data in the Vue Instance	01:50
11	Binding to Attributes	02:44
12	Understanding and Using Directives	01:28
13	Disable Re-Rendering with v-once	01:42
14	How to Output Raw HTML	02:44
15	Listening to Events	01:51
16	Getting Event Data from the Event Object	02:37
17	Passing your own Arguments with Events	01:54
18	Modifying an Event - with Event Modifiers	03:24
19	Listening to Keyboard Events	02:04
20	Writing JavaScript Code in the Templates	03:20
21	Using Two-Way-Binding	01:50
22	Reacting to Changes with Computed Properties	09:33
23	An Alternative to Computed Properties: Watching for Changes	03:54
24	Saving Time with Shorthands	01:27
25	Dynamic Styling with CSS Classes - Basics	04:23
26	Dynamic Styling with CSS Classes - Using Objects	01:36
27	Dynamic Styling with CSS Classes - Using Names	03:28
28	Setting Styles Dynamically (without CSS Classes)	03:16
29	Styling Elements with the Array Syntax	01:15
30	Module Wrap Up	00:45
31	Module Introduction	00:50
32	Conditional Rendering with v-if	03:39
33	Using an Alternative v-if Syntax	01:37
34	Don't Detach it with v-show	01:44
35	Rendering Lists with v-for	02:27
36	Getting the Current Index	01:52
37	Using an Alternative v-for Syntax	01:11
38	Looping through Objects	04:45
39	Looping through a List of Numbers	00:58
40	Keeping Track of Elements when using v-for	04:09
41	Module Wrap Up	00:52
42	Introduction & Challenge	02:55
43	Setting up the Course Project	02:38
44	Creating the Vue Instance and Styling the Healthbars	05:17
45	Showing the Player Controls Conditionally	02:03
46	Implementing a "Start Game" Method	01:54
47	Implementing a "Attack" Method	08:04
48	Write better Code - Time for Refactoring!	04:53
49	Implementing a "Special Attack"	02:12
50	Implementing a "Heal" Method	02:22
51	Finishing the Action Buttons	01:00
52	Creating an Action Log	02:42
53	Printing the Log (v-for)	02:21
54	Finishing the Log	01:58
55	Styling the Log Conditionally	01:45
56	Wrap Up	01:29
57	Module Introduction	01:05
58	Some Basics about the VueJS Instance	02:59
59	Using Multiple Vue Instances	02:53
60	Accessing the Vue Instance from Outside	03:30
61	How VueJS manages your Data and Methods	04:02
62	A Closer Look at $el and $data	04:56
63	Placing $refs and Using them on your Templates	05:49
64	Where to learn more about the Vue API	00:59
65	Mounting a Template	06:43
66	Using Components	04:57
67	Limitations of some Templates	02:36
68	How VueJS Updates the DOM	03:26
69	The VueJS Instance Lifecycle	03:13
70	The VueJS Instance Lifecycle in Practice	05:40
71	Module Wrap Up	00:55
72	Module Introduction	01:34
73	Why do we need a Development Server?	02:48
74	What does "Development Workflow" mean?	03:52
75	Using the Vue CLI to create Projects	02:36
76	Installing the Vue CLI and Creating a new Project	04:19
77	An Overview over the Webpack Template Folder Structure	03:41
78	Understanding ".vue" Files	06:47
79	Understanding the Object in the Vue File	01:12
80	How to Build your App for Production	00:50
81	Module Wrap Up	01:12
82	Module Introduction	01:05
83	An Introduction to Components	04:57
84	Storing Data in Components with the Data Method	04:05
85	Registering Components Locally and Globally	02:51
86	The "Root Component" in the App.vue File	03:22
87	Creating a Component	04:25
88	Using Components	05:33
89	Moving to a Better Folder Structure	02:44
90	How to Name your Component Tags (Selectors)	04:32
91	Scoping Component Styles	05:06
92	Module Wrap Up	00:51
93	Module Introduction	00:47
94	Communication Problems	02:53
95	Using Props for Parent => Child Communication	03:11
96	Naming "props"	01:11
97	Using "props" in the Child Component	01:29
98	Validating "props"	04:58
99	Using Custom Events for Child => Parent Communication	05:56
100	Understanding Unidirectional Data Flow	01:08
101	Communicating with Callback Functions	02:24
102	Communication between Sibling Components	06:26
103	Using an Event Bus for Communication	05:33
104	Centralizing Code in an Event Bus	02:15
105	Wrap Up	00:42
106	Module Introduction	00:39
107	Setting up the Module Project	03:01
108	Passing Content - The Suboptimal Solution	02:20
109	Passing Content with Slots	00:43
110	How Slot Content gets Compiled and Styled	03:04
111	Using Multiple Slots (Named Slots)	02:51
112	Default Slots and Slot Defaults	02:02
113	A Summary on Slots	00:46
114	Switching Multiple Components with Dynamic Components	05:32
115	Understanding Dynamic Component Behavior	02:08
116	Keeping Dynamic Components Alive	00:59
117	Dynamic Component Lifecycle Hooks	01:19
118	Wrap Up	01:12
119	Module Introduction	01:37
120	Setting up the Project	01:23
121	Initializing the Application	01:29
122	Creating the Application Components	04:05
123	Passing Data with Props and Slots	02:14
124	Allowing Users to Create Quotes with a NewQuote Component	04:09
125	Adding Quotes with Custom Events	03:35
126	Adding a Info Box	01:07
127	Allowing for Quote Deletion	03:41
128	Controlling Quotes with a Progress Bar	03:53
129	Finishing Touches and State Management	02:14
130	Module Introduction	00:55
131	A Basic <input> Form Binding	03:47
132	Grouping Data and Pre-Populating Inputs	02:43
133	Modifying User Input with Input Modifiers	02:59
134	Binding <textarea> and Saving Line Breaks	02:54
135	Using Checkboxes and Saving Data in Arrays	04:06
136	Using Radio Buttons	02:31
137	Handling Dropdowns with <select> and <option>	05:10
138	What v-model does and How to Create a Custom Control	02:50
139	Creating a Custom Control (Input)	05:14
140	Submitting a Form	02:09
141	Wrap Up	00:44
142	Module Introduction	00:54
143	Understanding Directives	03:35
144	How Directives Work - Hook Functions	02:29
145	Creating a Simple Directive	01:23
146	Passing Values to Custom Directives	01:09
147	Passing Arguments to Custom Directives	02:41
148	Modifying a Custom Directive with Modifiers	02:25
149	Custom Directives - A Summary	00:29
150	Registering Directives Locally	01:38
151	Using Multiple Modifiers	04:28
152	Passing more Complex Values to Directives	02:14
153	Wrap Up	00:45
154	Module Introduction	00:46
155	Creating a Local Filter	04:33
156	Global Filters and How to Chain Multiple Filters	01:46
157	An (often-times better) Alternative to Filters: Computed Properties	05:16
158	Understanding Mixins	02:24
159	Creating and Using Mixins	02:26
160	How Mixins get Merged	02:59
161	Creating a Global Mixin (Special Case!)	03:27
162	Mixins and Scope	02:34
163	Wrap Up	01:57
164	Module Introduction	01:09
165	Understanding Transitions	01:02
166	Preparing Code to use Transitions	03:12
167	Setting Up a Transition	03:10
168	Assigning CSS Classes for Transitions	02:28
169	Creating a "Fade" Transition with the CSS Transition Property	03:22
170	Creating a "Slide" Transition with the CSS Animation Property	04:00
171	Mixing Transition and Animation Properties	03:32
172	Animating v-if and v-show	00:34
173	Setting Up an Initial (on-load) Animation	01:31
174	Using Different CSS Class Names	04:02
175	Using Dynamic Names and Attributes	02:34
176	Transitioning between Multiple Elements (Theory)	00:35
177	Transitioning between Multiple Elements (Practice)	04:43
178	Listening to Transition Event Hooks	02:07
179	Understanding JavaScript Animations	08:04
180	Excluding CSS from your Animation	01:29
181	Creating an Animation in JavaScript	06:19
182	Animating Dynamic Components	05:58
183	Animating Lists with <transition-group>	00:45
184	Using <transition-group> - Preparations	04:21
185	Using <transition-group> to Animate a List	06:13
186	Understanding the App	01:16
187	Creating the App	12:05
188	Adding Animations	06:39
189	Wrap Up	01:04
190	Module Introduction	01:43
191	Accessing Http via vue-resource - Setup	04:01
192	Creating an Application and Setting Up a Server (Firebase)	05:25
193	POSTing Data to a Server (Sending a POST Request)	06:11
194	GETting and Transforming Data (Sending a GET Request)	06:55
195	Configuring vue-resource Globally	02:49
196	Intercepting Requests	03:35
197	Intercepting Responses	02:52
198	Where the "resource" in vue-resource Comes From	04:43
199	Creating Custom Resources	02:40
200	Resources vs "Normal" Http Requests	00:29
201	Understanding Template URLs	05:07
202	Wrap Up	01:43
203	Module Introduction	01:39
204	Setting up the VueJS Router (vue-router)	02:17
205	Setting Up and Loading Routes	06:44
206	Understanding Routing Modes (Hash vs History)	04:15
207	Navigating with Router Links	03:46
208	Where am I? - Styling Active Links	03:21
209	Navigating from Code (Imperative Navigation)	02:43
210	Setting Up Route Parameters	02:00
211	Fetching and Using Route Parameters	02:04
212	Reacting to Changes in Route Parameters	03:05
213	Setting Up Child Routes (Nested Routes)	04:40
214	Navigating to Nested Routes	03:10
215	Making Router Links more Dynamic	02:05
216	A Better Way of Creating Links - With Named Routes	03:22
217	Using Query Parameters	02:55
218	Multiple Router Views (Named Router Views)	03:28
219	Redirecting	02:14
220	Setting Up "Catch All" Routes / Wildcards	01:07
221	Animating Route Transitions	02:35
222	Passing the Hash Fragment	03:29
223	Controlling the Scroll Behavior	03:22
224	Protecting Routes with Guards	01:14
225	Using the "beforeEnter" Guard	07:52
226	Using the "beforeLeave" Guard	03:32
227	Loading Routes Lazily	07:09
228	Wrap Up	01:03
229	Module Introduction	01:13
230	Why a Different State Management May Be Needed	02:26
231	Understanding "Centralized State"	01:33
232	Using the Centralized State	06:50
233	Why a Centralized State Alone Won't Fix It	02:42
234	Understanding Getters	00:49
235	Using Getters	02:41
236	Mapping Getters to Properties	06:58
237	Understanding Mutations	01:15
238	Using Mutations	04:52
239	Why Mutations have to run Synchronously	01:35
240	How Actions improve Mutations	01:33
241	Using Actions	05:00
242	Mapping Actions to Methods	04:59
243	A Summary of Vuex	04:15
244	Two-Way-Binding (v-model) and Vuex	05:57
245	Improving Folder Structures	01:02
246	Modularizing the State Management	04:57
247	Using Separate Files	04:19
248	Using Namespaces to Avoid Naming Problems	06:45
249	Wrap Up	00:51
250	Project Introduction	03:12
251	Project Setup and Planning	02:46
252	Creating the First Components	02:56
253	Setup Project Routes	04:43
254	Adding a Header and Navigation	06:45
255	Planning the Next Steps	01:23
256	Creating Stocks Components	06:32
257	Adding a "Buy" Button	05:58
258	Setting up the Vuex State Management	10:22
259	Adding a Portfolio Module to Vuex	10:03
260	Working on the Portfolio Stocks	06:52
261	Connecting the Portfolio with Vuex	02:22
262	Time to fix some Errors	02:01
263	Displaying the Funds	03:42
264	Adding some Order Checks	05:42
265	Making Funds Look Nicer with Filters	01:49
266	Ending the Day - Randomizing Stocks	05:31
267	Animating the Route Transitions	03:15
268	Saving & Fetching Data - Adding a Dropdown	02:18
269	Setting up vue-resource and Firebase	02:17
270	Saving Data (PUT Request)	02:52
271	Fetching Data (GET Request)	05:05
272	Testing and Bug Fixes	02:51
273	Project Wrap Up	01:23
274	Bonus: Debugging Vuex with Vue Developer Tools	02:00
275	Module Introduction	01:13
276	Preparing for Deployment	01:46
277	Deploying the App (Example: AWS S3)	05:58
278	Course Roundup	00:59
279	Time to Practice (1) - Outputting Data to Templates (Problem)	02:00
280	Time to Practice (1) - Outputting Data to Templates (Solution)	06:13
281	Time to Practice (2) - Events (Problem)	01:43
282	Time to Practice (2) - Events (Solution)	04:55
283	Time to Practice (3) - Reactive Properties (Problem)	02:30
284	Time to Practice (3) - Reactive Properties (Solution)	05:48
285	Time to Practice (4) - Styling (Problem)	03:50
286	Time to Practice (4) - Styling (Solution)	18:18
287	Time to Practice (5) - Conditionals and Lists (Problem)	01:41
288	Time to Practice (5) - Conditionals and Lists (Solution)	09:39
289	Time to Practice (6) - Components (Problem)	01:46
290	Time to Practice (6) - Components (Solution)	02:13
291	Time to Practice (7) - Component Communication (Problem)	03:07
292	Time to Practice (7) - Component Communication (Solution)	10:18
293	Time to Practice (8) - Slots and Dynamic Components (Problem)	01:28
294	Time to Practice (8) - Slots and Dynamic Components (Solution)	03:01
295	Time to Practice (9) - Forms (Problem)	01:31
296	Time to Practice (9) - Forms (Solution)	15:18
297	Time to Practice (10) - Directives (Problem)	00:55
298	Time to Practice (10) - Directives (Solution)	05:56
299	Time to Practice (11) - Filters and Mixins (Problem)	01:09
300	Time to Practice (11) - Filters and Mixins (Solution)	08:13
301	About this Section	00:38
302	Module Introduction	01:08
303	Project Setup	02:47
304	Axios Setup	02:13
305	Sending a POST Request	05:40
306	Sending a GET Request	02:53
307	Accessing & Using Response Data	05:49
308	Setting a Global Request Configuration	05:44
309	Using Interceptors	05:50
310	Custom Axios Instances	04:58
311	Wrap Up	00:59
312	About this Section	00:53
313	Module Introduction	02:00
314	How Authentication Works in SPAs	03:11
315	Project Setup	02:37
316	Adding User Signup	05:15
317	Adding User Signin (Login)	02:42
318	Using Vuex to send Auth Requests	04:27
319	Storing Auth Data in Vuex	03:46
320	Accessing other Resources from Vuex	08:42
321	Sending the Token to the Backend	05:39
322	Protecting Routes (Auth Guard)	02:49
323	Updating the UI State (based on Authentication State)	03:02
324	Adding User Logout	05:02
325	Adding Auto Logout	05:37
326	Adding Auto Login	10:37
327	Wrap Up	01:02
328	About this Section	00:58
329	Module Introduction	01:06
330	Installing Vuelidate	02:05
331	Adding a Validator	10:15
332	Adding Validation UI Feedback	04:56
333	Controlling Styles for Invalid Entries	02:11
334	More Validators	06:34
335	Validating Passwords For Equality	06:17
336	Using the Required-Unless Validator	04:53
337	Validating Arrays	07:20
338	Controlling the Form Submit Button	02:13
339	Creating Custom Validators	02:47
340	Async Validators	09:17
341	Wrap Up	01:06
342	Module Introduction	03:19
343	Creating a Project	04:42
344	Analyzing the Created Project	04:50
345	Using Plugins	04:06
346	CSS Pre-Processors	03:15
347	Environment Variables	07:29
348	Building the Project	03:44
349	Instant Prototyping	02:40
350	Different Build Targets	08:40
351	Using the "Old" CLI Templates (vue init)	01:20
352	Using the Graphical User Interface (GUI)	05:06