Skip to main content

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

Vue JS 2 – The Complete Guide (incl. Vue Router & Vuex)
| Pub Date: 6th February 2018 | | Pages/Duration: 21 Hours | Language: English | Format: MP4 AVC 1280×720 AAC 48KHz 2ch | Size: 4.15 GB

Download


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