English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 140 lectures (10h 23m) | 3.46 GB
Have limited time to learn Vue, Vuex, and Vue Router? Take this course and learn Vue in 11 hours!
State management with Vuex? Yep. Drag and drop image upload? Covered! Authentication with OAuth2? Its here!
If you’re looking to learn Vue, Vuex, and Vue Router in record time you’re in the right place! I built this course to help you understand Vue in a fraction of the time that other courses requires. You’ll find absolutely no filler content here, only direct, accurate, and concise explanations of exactly how Vue works.
Vue is an extremely popular front end Javascript framework made for developing dynamic and interactive web apps. Vue has grown tremendously in popularity in the last few years, and is poised to overtake even React and Angular as the king of all web frameworks. The secret of Vue is its simplicity – a little bit of knowledge of how Vue works goes a long way! To help you master Vue, I built this course specifically tailored to be completed in the smallest amount of time possible. No time is spent with unnecessary or unimportant topics, only the most relevant information is presented.
In just 11 hours, you can become a master of Vue!
Vue can be used by itself, but it gets even better when used with Vuex and Vue Router as well. Vuex is a state management framework, which is used to fetch, store, and move data around your application. In this course, you’ll get a deep understanding of how Vuex works and how it works so well with Vue by getting plenty of practice fetching data, storing it, and then retrieving it for use inside of a Vue application. Vue Router is used to navigate users around to different pages in a single page application. Vue Router is incredibly simple to get started with – you’ll master its inner workings after I show you one simple example.
Throughout this course, you’ll get practical experience with the following:
- Producing dynamic, responsive applications using Vue
- Upload images to a remote server using drag and drop image upload
- Log users into your app using OAuth2 Authentication
- Use a cutting edge project boilerplate with Vue CLI
- Reduce the amount of code you write using Template Directives
- Communicate between components using Props and Events
- Update Vue components using reactive data properties
- Progamatically navigate users around your application using Vue Router
- Model application data using the powerful Vuex framework
- Persist information stored in your app using Local Storage
- Develop a master-level understanding of the differences between imperative and declarative programming
- Learn how Vue gives developers multiple tools to accomplish task, and know which the best is for you
All of these topics are communicated with the utmost respect for your learning time. Every section has been written and re-written to be as concise as possible. If you want to learn Vue as fast as possible then look no further!
What you’ll learn
- Understand how to create interesting Vue applications
- Use Vuex to manage and update data stored in application state
- Navigate users between pages using Vue Router
- Authenticate users with an advanced OAuth2 flow
- Build beautiful drag and drop image upload
- Style content intelligently using CSS Grids
Table of Contents
An Introduction to Vue
1 How to Get Help
2 Course Resources
3 Join Our Community
4 Our First Vue App
5 App Overview
6 A Codepen Starter
7 Vue Templates and Instances
8 Creating the Template
9 Linking Templates and Instances
10 Step by Step Implementation
11 Defining Instance Methods
12 Defining Vue Directives
13 Retrieving Event Information
14 Imperative vs Declarative Programming
15 Declarative Apps with the Vue API
16 Data Computed and Methods
17 Updated Data Values
18 Computed Properties
19 Review from Start to Finish
20 Template Placement
21 Referencing Data in the Template
22 Expressions in Templates
23 Exercise Solution
24 Exercise Solution
Moving on with Vue CLI
25 App Overview
26 App Challenges
27 Generating a New Project
28 Why Use Vue CLI
29 Project Walkthrough
30 Vue Files
31 Behind the Scenes of Vue Files
32 Vue Components vs Vue Instances
Writing Effective Vue Apps
33 Starting from Scratch
34 The App Component
35 Another Way of Specifying Content
36 Multiple Ways of DOM Attachment
37 Making the SearchBar
38 Nesting Components
39 Event Directives
40 Shorthand Event Syntax
41 Data Sharing Between Components
42 Communication with Props and Events
43 Emitting Events
44 Listening for Custom Events
45 Youtube API Signup
46 Searching Youtube
47 Investigating Video Responses
48 Rendering a List of Videos
49 Updating Data Causes Rerenders
50 Data in Components vs Instances
51 Updating Data
52 Communicating from Parent to Child
53 Prop Validation
54 Separate List Components
55 Lists with V
56 Handling Props with V
57 Keys with V
58 Including Bootstrap Styling
59 Styling the Search Bar
60 Styling the Video List
61 Thumbnail Image Reference
62 Thumbnail By Computed Property
63 More List Item Styling
64 Handling Nested Clicks
65 Event Handling in the VideoList
66 Receiving Events in the App
67 Passing Props to the Video Detail
68 Updating Data
69 The V
70 Referencing Video Title and Description
71 Crafting the Embed URL
72 Responsive Embeds
73 Two Column Layout
74 App Review
75 Exercise Solution
76 Exercise Solution
Handling State with Vuex
77 App Overview
78 App Challenges
79 Additional Dependencies
80 A Bit of Boilerplate
81 Building the Header
82 Including Semantic UI
83 Styling the Header
84 Imgur Overview
Authentication in Vue with OAuth2
85 Initial OAuth Request
86 Extracting the Access Token
87 OAuth Overview
88 Imgur API Signup
89 Handling App Logic
90 Vuex Introduction
91 Vuex Modules
92 Connecting Vuex to Vue
93 Initial Auth Module Design
94 Auth Module Mutations
95 Auth Module State and Getters
96 Updating State Values
97 Logging Out with Actions
98 Separate API Helpers
99 Forming the OAuth2 URL
100 Initiating the Login Flow
101 Wiring in the Auth Module
Navigation with Vue Router
102 Wiring up Vue Router
103 Browser vs Hash Routers
104 Component Insertion Point
105 Component Lifecycle Methods
106 Calling Actions
107 Parsing the Access Token
108 Data in Components with MapGetters
109 The V
110 Persisting Login State
111 Button Styling
112 Logging Out Users
113 Automatic Component Updates
114 Clearing LocalStorage Tokens
115 Programmatic Navigation
116 Additional Route Config
117 Navigation with Router
Design of Vuex Modules
118 Image Module Deisgn
119 Module Implementation
120 Fetch Images API Documentation
121 Fetching Images
122 Communicating Across Modules
123 Testing Images Reponse
124 Image Upload via Imgur
125 Committing Images to State
126 Mapping the Images Getter
127 Listing Images
Handling Image Upload
128 Image Upload Overview
129 Upload Form HTML
130 Styling the Upload Form
131 The Upload Images Action
132 File Change Event
133 Accepting Multiple Image Files
134 The Path to Upload
135 Attaching Images with FormData
136 Concurrent Uploads
137 Layout with CSS Grid
138 Hide Images on Logout
139 Expanding the App
Extras
140 Bonus
Resolve the captcha to access the links!