Practical Vue.js from Scratch to Troubleshoot

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

3.75 (4 reviews)
Udemy
platform
English
language
Web Development
category
73
students
11.5 hours
content
Mar 2019
last update
$19.99
regular price

What you will 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

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 Overview

This 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 Authors

  • Jonathan 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.js

  • Christian 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.

Content

Learning Vue.js 2.0

The Course Overview
What Is Vue.js?
Getting Started with Vue.js
Using Vue.js to Create a “Hello, World!” Application
Creating a Vue.js Project with npm and the Vue.js CLI
In-Depth Explanation of the Vue Instance
The Vue Instance Lifecycle
What Is a Component and How Are They Used in Vue.js?
Component Deep-Dive
Basic Template Interpolation
Directives in Vue.js Templates
Working with Forms
Explaining the .vue File Template
Hot Reloading of Your App with Webpack
Using Vue-Devtools to Make Debugging Easier
Unit Testing a Vue.js Application
Routing with the Vue Router Library
Introduction to State Management with a Simple Source of Truth and Vuex
Using Vuex to Manage State in a Vue.js App
Reusing Logic and Data within an App with Mixins
Reusing Logic and Data Across Multiple Apps with Plugins
Test your knowledge

Vue.js 2 Recipes

The Course Overview
Using Different Vue CLI Templates for Your Application
Building a Simple Application with Vue
Adding Reactive Elements to Your Vue Application
Adding Interactivity to Your Web Application with Events
Constructing Your Own Vue Filters for Transforming Your Output
Debugging Your Vue Application
Filtering a List Using a Computed Property
Sorting a List Using a Computed Property
Using Filters to Show Currency
Working on Dates with Filters and MomentJS
Conditionally Rendering Your Pages with v-if and v-show
Manipulating an Element by Binding Styles and Classes
Building a Basic Form Using Bootstrap and Vue
Handling Form Buttons of Different Types
Employing Vue Selects, Checkboxes, and Radio Elements in Your Form
Creating Your Own Transition Classes
Transitioning on Initial Render
Transitioning between Elements
Entering and Leaving Transitions for Elements in a List
Reusing Transitions Throughout Your Application
Creating Reactive Transitions for Your Application
Creating Dynamic Components for Your Applications
Passing Data between Parent/Child Dynamic Components
Adding Component Events to Your Application
Passing Properties to Components
Handling Data Outside of a Component
Creating Reusable Components for Your Application
Using Slots in Components for Passing Data
Packaging a Component in a Vue File with Webpack
Working with Advanced Vue Files
Making Basic Calls
Making Reactive Calls Inside Your Application
Making Form Calls Within Your Application
Error Handling
Using Request and Response Interceptors
Throttling and Debouncing Requests Using Lodash
Protecting Your Application Against CSRF
Developing Pages for Vue Router
Using Route Parameters
Adding Navigation Guards
Developing Nested Routes
Redirecting Using Navigation Guards
Handling Authentication and Route Metadata
Create Login Functionality in Combination with LocalStorage
Adding Vuex to Your Application
Accessing Store Data in Components
Structuring a Small Vuex Store
Managing Your Application's State with Vuex
Making Use of Vuex Getters
Changing Your Application's State with Mutations
Committing Mutations with the Help of Actions
Managing Your Application's Store Size with Modules
Using Vuex Plugins in Your Applications
Handling Forms in Your Application with Vuex
Unit Testing a Vue Component
Unit Testing the Actions from the Vuex Store
Unit Testing the Mutations from the Vuex Store
Unit Testing the Getters from the Vuex Store
End-to-End Testing with Nightwatch

Troubleshooting Vue.js

The Course Overview
Divide and Conquer
Using the Mathematical Induction Approach
Translating Pseudocode into Code
Simplifying Complex Code into More Readable Code
Using JavaScript Debugger
Unit Testing
Improper Use of HTML Based Template Syntax
Missing the Root Element
Incorrect Use of Mustache Tag
Plain Text versus Raw HTML
Common Mistakes Using JavaScript Statements and Flow Controls
Forgetting to Scope CSS Rules
Inline Templates versus X-Templates
Declaring Too Many Global Components
Forgetting to Import/Export a Component
Forgetting to Register a Component
Conflicting Component Names with HTML Elements
The Missing Dot
Component's Data as an Object and Function
Confusing Parentheses with Curly Braces
The v-if and v-show Directives
Common Side Effect Using v-for with Object
Using Mutating versus Non-Mutating Array Methods
Forgetting to Declare Initial Values
The Side Effects of Using Text Interpolation on <textarea>
The Unselected State of the <select> Element
Radio Buttons versus Checkboxes
Forgetting To Install Vue Router
The <router-view> Tag
Common Mistakes Between this.$route and this.$router
Test your knowledge

Screenshots

Practical Vue.js from Scratch to Troubleshoot - Screenshot_01Practical Vue.js from Scratch to Troubleshoot - Screenshot_02Practical Vue.js from Scratch to Troubleshoot - Screenshot_03Practical Vue.js from Scratch to Troubleshoot - Screenshot_04

Charts

Price

Practical Vue.js from Scratch to Troubleshoot - Price chart

Rating

Practical Vue.js from Scratch to Troubleshoot - Ratings chart

Enrollment distribution

Practical Vue.js from Scratch to Troubleshoot - Distribution chart

Related Topics

2279274
udemy ID
3/19/2019
course created date
7/31/2020
course indexed date
Bot
course submited by