Practical Vue.Js From Scratch To Troubleshoot

Faster web application development with Bootstrap 4 to apply it to rapid modern website design and development

What you'll learn

Explore how Vue. js compares to other major JavaScript frameworks and when to use it.

Build a fully functioning reactive web application (SPA) in Vue. js from scratch

Master server-to-client and client-to-server communication using Vue Resource

Learn build tests for your Vue application

Learn common mistakes that Vue. js developers make & understand what the Error object is telling you

Correct common routing issues

Know when to use render functions over a bloated template

Requirements

A basic understanding of HTML, CSS, and JavaScript is required.

Some experience with Angular. js or React is a bonus, but not required.

Description

Are you willing to build amazing and complex web applications with Vue.js & and solve real-world problems with their Vue.js applications? Then this course is for you!Vue.js is an open-source JavaScript framework for building user interfaces and single-page applications. With this hands-on course, you'll begin learning Vue.js from scratch which teaches you to how to build applications in Vue.js. Moving forward you will also learn to use various Modern Web Development Tools with Vue.js such as Webpack, vue-cli, hot reloading, and vue dev tools to provide the most performant experience to your users. Then you will learn about building complex web applications with Vue.js which includes- using vuex to manage state in a Vue.js app, add communication with remote resources to your Vue application and leverage VueRouter 2 to build a single-page application. Finally, you will learn some common troubleshooting techniques to solve common problems that most Vue.js developers encounter with some simple and practical methods.Contents and OverviewThis training program includes 3 complete courses, carefully chosen to give you the most comprehensive training possible.The first course, Learning Vue.js 2.0 shows developers how to build high-performing, reactive web interfaces with Vue.js. It starts from scratch, teaching you how to build a “Hello World!” application in Vue.js and moves towards building advanced applications step by step. You'll earn the concepts that you need to know about Vue.js. You'll build an application as you go, putting the concepts we've explained into practice. Several modern tools such as Webpack, vue-cli, hot reloading, and vue dev tools will be used to develop modern web applications, focusing on the view layer to provide the most performant experience for users. Also, you will use the vue-cli-based Webpack template and look at how we can build on top of that starter kit. By the end of this course, you will be able to build complex and large web applications with Vue.js and will also understand how to make single-file-based reusable components which can be used across projects.The second course, Vue.js 2 Recipes dives right into exploring various tasks that you will come across while building your web applications with Vue.js. You start with building a simple Vue application, and then learn to add different elements, filters, properties, and forms to your project. You'll explore the different transitions and animations possible with Vue.js, and add components and events to your Vue application, making it more dynamic as you go. After that, you'll learn how to add communication with remote resources to your Vue application and leverage VueRouter 2 to build a single-page application. Finally, you will delve into advanced state management with Vuex and learn to test the applications you've built. By the end of this course, you'll be ready to take on real-world projects with Vue, armed with the solutions needed to face development tasks head-on.The third course, Troubleshooting Vue.js highlights some common problems faced by developers in different stages of their Vue application development and shows you some simple and practical methods to try when troubleshooting, as well as how to solve more difficult problems you may encounter.About the AuthorsJonathan M Hethey has been writing code since the age of 14 and has actively participated in shaping and experimenting with the IT systems around him. After a short apprenticeship as an IT supporter, he completed his studies with a Bachelor degree in Web Development in Denmark. Since then he has been working as a teacher for young adults with autism and went on to work for agencies as a developer and is now a Full Stack Developer in Copenhagen. Programming and working in teams efficiently are key to success in a rapidly changing industry, whether we are speaking of app development or creating beautiful web experiences. He quickly became a fan of Git and one of the blog posts on Gitlab lead to his first book contract with PACKT in 2013.Peter van Meijgaard is a web application developer who has been tinkering with web development ever since he can remember. He is an avid JavaScript developer and loves Vue.js for its simplicity and its ability to facilitate web app development. He has given various talks on Vue.js in the past and has also worked on various training programs. Peter has released two video tutorials with us: Fun Projects with Vue.js, Building your First Advanced CRUD Application with Vue.jsChristian Hur is an IT/web instructor, author, developer, and indie filmmaker. He teaches web development and programming full-time at Gateway Technical College (Wisconsin) and part-time at the University of California, Irvine, Continuing Education Division (California). He is an author for Lynda/LinkedIn Learning (The DOM in JavaScript, jQuery, AngularJS, and React) and McPress (Developing Business Applications for the Web: With HTML, CSS, JSP, PHP, ASP.NET, and JavaScript). Aside from his teaching career, Christian has more than 20 years' experience in web development and has built many websites and web-based applications using various Web technologies in the private sector. In the mid-1990's, he co-founded a multimedia and e-commerce company based in Los Angeles and Tokyo. In 2010, he co-founded a new private company to develop video games and produce indie films. In his spare time, Christian enjoys exploring new web technologies, learning AR/VR development, and responding to questions on Quora and Stack Overflow.

Overview

Section 1: Learning Vue.js 2.0

Lecture 1 The Course Overview

Lecture 2 What Is Vue.js?

Lecture 3 Getting Started with Vue.js

Lecture 4 Using Vue.js to Create a “Hello, World!” Application

Lecture 5 Creating a Vue.js Project with npm and the Vue.js CLI

Lecture 6 In-Depth Explanation of the Vue Instance

Lecture 7 The Vue Instance Lifecycle

Lecture 8 What Is a Component and How Are They Used in Vue.js?

Lecture 9 Component Deep-Dive

Lecture 10 Basic Template Interpolation

Lecture 11 Directives in Vue.js Templates

Lecture 12 Working with Forms

Lecture 13 Explaining the .vue File Template

Lecture 14 Hot Reloading of Your App with Webpack

Lecture 15 Using Vue-Devtools to Make Debugging Easier

Lecture 16 Unit Testing a Vue.js Application

Lecture 17 Routing with the Vue Router Library

Lecture 18 Introduction to State Management with a Simple Source of Truth and Vuex

Lecture 19 Using Vuex to Manage State in a Vue.js App

Lecture 20 Reusing Logic and Data within an App with Mixins

Lecture 21 Reusing Logic and Data Across Multiple Apps with Plugins

Section 2: Vue.js 2 Recipes

Lecture 22 The Course Overview

Lecture 23 Using Different Vue CLI Templates for Your Application

Lecture 24 Building a Simple Application with Vue

Lecture 25 Adding Reactive Elements to Your Vue Application

Lecture 26 Adding Interactivity to Your Web Application with Events

Lecture 27 Constructing Your Own Vue Filters for Transforming Your Output

Lecture 28 Debugging Your Vue Application

Lecture 29 Filtering a List Using a Computed Property

Lecture 30 Sorting a List Using a Computed Property

Lecture 31 Using Filters to Show Currency

Lecture 32 Working on Dates with Filters and MomentJS

Lecture 33 Conditionally Rendering Your Pages with v-if and v-show

Lecture 34 Manipulating an Element by Binding Styles and Classes

Lecture 35 Building a Basic Form Using Bootstrap and Vue

Lecture 36 Handling Form Buttons of Different Types

Lecture 37 Employing Vue Selects, Checkboxes, and Radio Elements in Your Form

Lecture 38 Creating Your Own Transition Classes

Lecture 39 Transitioning on Initial Render

Lecture 40 Transitioning between Elements

Lecture 41 Entering and Leaving Transitions for Elements in a List

Lecture 42 Reusing Transitions Throughout Your Application

Lecture 43 Creating Reactive Transitions for Your Application

Lecture 44 Creating Dynamic Components for Your Applications

Lecture 45 Passing Data between Parent/Child Dynamic Components

Lecture 46 Adding Component Events to Your Application

Lecture 47 Passing Properties to Components

Lecture 48 Handling Data Outside of a Component

Lecture 49 Creating Reusable Components for Your Application

Lecture 50 Using Slots in Components for Passing Data

Lecture 51 Packaging a Component in a Vue File with Webpack

Lecture 52 Working with Advanced Vue Files

Lecture 53 Making Basic Calls

Lecture 54 Making Reactive Calls Inside Your Application

Lecture 55 Making Form Calls Within Your Application

Lecture 56 Error Handling

Lecture 57 Using Request and Response Interceptors

Lecture 58 Throttling and Debouncing Requests Using Lodash

Lecture 59 Protecting Your Application Against CSRF

Lecture 60 Developing Pages for Vue Router

Lecture 61 Using Route Parameters

Lecture 62 Adding Navigation Guards

Lecture 63 Developing Nested Routes

Lecture 64 Redirecting Using Navigation Guards

Lecture 65 Handling Authentication and Route Metadata

Lecture 66 Create Login Functionality in Combination with LocalStorage

Lecture 67 Adding Vuex to Your Application

Lecture 68 Accessing Store Data in Components

Lecture 69 Structuring a Small Vuex Store

Lecture 70 Managing Your Application's State with Vuex

Lecture 71 Making Use of Vuex Getters

Lecture 72 Changing Your Application's State with Mutations

Lecture 73 Committing Mutations with the Help of Actions

Lecture 74 Managing Your Application's Store Size with Modules

Lecture 75 Using Vuex Plugins in Your Applications

Lecture 76 Handling Forms in Your Application with Vuex

Lecture 77 Unit Testing a Vue Component

Lecture 78 Unit Testing the Actions from the Vuex Store

Lecture 79 Unit Testing the Mutations from the Vuex Store

Lecture 80 Unit Testing the Getters from the Vuex Store

Lecture 81 End-to-End Testing with Nightwatch

Section 3: Troubleshooting Vue.js

Lecture 82 The Course Overview

Lecture 83 Divide and Conquer

Lecture 84 Using the Mathematical Induction Approach

Lecture 85 Translating Pseudocode into Code

Lecture 86 Simplifying Complex Code into More Readable Code

Lecture 87 Using JavaScript Debugger

Lecture 88 Unit Testing

Lecture 89 Improper Use of HTML Based Template Syntax

Lecture 90 Missing the Root Element

Lecture 91 Incorrect Use of Mustache Tag

Lecture 92 Plain Text versus Raw HTML

Lecture 93 Common Mistakes Using JavaScript Statements and Flow Controls

Lecture 94 Forgetting to Scope CSS Rules

Lecture 95 Inline Templates versus X-Templates

Lecture 96 Declaring Too Many Global Components

Lecture 97 Forgetting to Import/Export a Component

Lecture 98 Forgetting to Register a Component

Lecture 99 Conflicting Component Names with HTML Elements

Lecture 100 The Missing Dot

Lecture 101 Component's Data as an Object and Function

Lecture 102 Confusing Parentheses with Curly Braces

Lecture 103 The v-if and v-show Directives

Lecture 104 Common Side Effect Using v-for with Object

Lecture 105 Using Mutating versus Non-Mutating Array Methods

Lecture 106 Forgetting to Declare Initial Values

Lecture 107 The Side Effects of Using Text Interpolation on

Lecture 108 The Unselected State of the Element

Lecture 109 Radio Buttons versus Checkboxes

Lecture 110 Forgetting To Install Vue Router

Lecture 111 The Tag

Lecture 112 Common Mistakes Between this.$route and this.$router

This course targets JavaScript developers, front-end developers, Vue. js developers, professional web developer to build amazing and complex reactive web applications with Vue. js & and solve real-world problems with their Vue. js applications.