Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Meditation Life Purpose Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Modeling Data Analysis Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Blogging Freelancing Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
2021-01-14 13:40:37
30-Day Money-Back Guarantee
Development Web Development Vue JS

Vue - The Complete Guide (w/ Router, Vuex, Composition API)

Vue.js is an awesome JavaScript Framework for building Frontend Applications! VueJS mixes the Best of Angular + React!
Bestseller
Rating: 4.7 out of 54.7 (45,235 ratings)
155,017 students
Created by Maximilian Schwarzmüller
Last updated 12/2020
English
English, French [Auto], 
30-Day Money-Back Guarantee

What you'll learn

  • Build amazing Vue.js Applications - all the Way from Small and Simple Ones up to Large Enterprise-level Ones
  • Understand the Theory behind Vue.js and use it in Real Projects
  • Leverage Vue.js in both Multi- and Single-Page-Applications (MPAs and SPAs)
  • Learn the latest version of Vue (Vue 3), including the brand-new Composition API
Curated for the Udemy for Business collection

Course content

44 sections • 670 lectures • 48h 50m total length

  • Preview01:39
  • Preview07:51
  • Preview02:35
  • Preview03:11
  • Building A First App With Just JavaScript
    07:26
  • Re-building the App with Vue
    10:51
  • Vue vs "Vanilla JavaScript" (just JavaScript)
    01:10
  • Setting Up the Course Development Environment
    02:04
  • Course Outline & What's In The Course
    02:58
  • How To Get The Most Out Of This Course
    03:23
  • Module Resources
    00:09

  • Module Introduction
    00:48
  • Creating and Connecting Vue App Instances
    08:40
  • Interpolation and Data Binding
    03:35
  • Binding Attributes with the "v-bind" Directive
    05:37
  • Understanding "methods" in Vue Apps
    05:47
  • Working with Data inside of a Vue App
    03:23
  • Outputting Raw HTML Content with v-html
    03:31
  • A First Summary
    04:12
  • Time to Practice: Data Binding
    1 question
  • Understanding Event Binding
    07:17
  • Events & Methods
    06:12
  • Working with Event Arguments
    02:59
  • Using the Native Event Object
    08:59
  • Exploring Event Modifiers
    09:53
  • Locking Content with v-once
    02:08
  • Time to Practice: Event Binding
    1 question
  • Data Binding + Event Binding = Two-Way Binding
    06:32
  • Methods used for Data Binding: How It Works
    06:46
  • Introducing Computed Properties
    05:58
  • Working with Watchers
    10:49
  • Methods vs Computed Properties vs Watchers
    02:27
  • v-bind and v-on Shorthands
    01:53
  • Time to Practice: Reactivity
    1 question
  • Dynamic Styling with Inline Styles
    07:19
  • Adding CSS Classes Dynamically
    06:31
  • Classes & Computed Properties
    01:57
  • Dynamic Classes: Array Syntax
    01:22
  • Time to Practice: Dynamic Styling
    1 question
  • Module Summary
    04:27
  • Module Resources
    00:06

  • Module Introduction
    01:35
  • Understanding the Problem
    03:16
  • Rendering Content Conditionally
    05:09
  • v-if, v-else and v-else-if
    04:18
  • Using v-show Instead Of v-if
    02:25
  • Rendering Lists of Data
    06:20
  • Diving Deeper Into v-for
    05:12
  • Removing List Items
    03:59
  • Lists & Keys
    08:26
  • Time to Practice: Conditional Content & Lists
    1 question
  • Module Summary
    02:15
  • Module Resources
    00:06

  • Module Introduction
    01:18
  • Project Setup & First Methods
    12:27
  • Updating the Health Bars
    07:07
  • Adding a "Special Attack"
    06:23
  • Adding a "Heal" Functionality
    04:46
  • Adding a "Game Over" Screen
    09:37
  • Finishing the Core Functionality
    06:08
  • Adding a Battle Log
    14:11
  • Module Resources
    00:06

  • Module Introduction
    01:31
  • An Introduction to Vue's Reactivity
    04:26
  • Vue Reactivity: A Deep Dive
    08:10
  • One App vs Multiple Apps
    03:53
  • Understanding Templates
    03:56
  • Working with Refs
    05:21
  • How Vue Updates the DOM
    06:26
  • Vue App Lifecycle - Theory
    04:46
  • Vue App Lifecycle - Practice
    09:48
  • Module Resources
    00:06

  • Module Introduction
    01:30
  • Understanding the Problem
    08:39
  • Introducing Components
    10:54
  • The Why: Building Complex User Interfaces With Components
    01:00
  • Multiple Vue Apps vs Multiple Components
    00:57
  • Module Resources
    00:06

  • Module Introduction
    01:35
  • Why We Need A Development Server
    03:29
  • Why We Want A Better Developer Experience
    05:50
  • Installing & Using the Vue CLI
    08:26
  • Inspecting the Created Project
    05:59
  • Inspecting the Vue Code & ".vue" Files
    06:04
  • Adding the "Vetur" Extension to VS Code
    01:15
  • More on ".vue" Files
    01:40
  • A New Vue Project
    05:05
  • Creating a Basic Vue App
    09:32
  • Adding a Component
    08:14
  • Adding Styling
    02:16
  • A Small Addition
    00:13
  • Module Resources
    00:06

  • Module Introduction
    01:41
  • Introducing "Props" (Parent => Child Communication)
    10:03
  • Prop Behavior & Changing Props
    06:30
  • Validating Props
    07:14
  • Supported Prop Values
    00:09
  • Working with Dynamic Prop Values
    05:37
  • Emitting Custom Events (Child => Parent Communication)
    11:15
  • Defining & Validating Custom Events
    04:05
  • Prop / Event Fallthrough & Binding All Props
    01:19
  • Demo: Adding Components & Connecting Them
    13:15
  • Demo: Adding More Component Communication
    06:24
  • Time to Practice: Props & Custom Events
    1 question
  • A Potential Problem
    06:26
  • Provide + Inject To The Rescue
    08:16
  • Provide + Inject for Functions / Methods
    03:59
  • Provide + Inject vs Props & Custom Events
    02:06
  • Module Summary
    04:44
  • Module Resources
    00:06

  • Module Introduction
    01:38
  • Project Setup
    02:38
  • Global vs Local Components
    09:22
  • Scoped Styles
    05:15
  • Introducing Slots
    06:23
  • Named Slots
    05:35
  • Slot Styles & Compilation
    02:26
  • More on Slots
    07:19
  • Scoped Slots
    09:34
  • Dynamic Components
    07:06
  • Keeping Dynamic Components Alive
    02:44
  • Applying What We Know & A Problem
    09:24
  • Teleporting Elements
    03:50
  • Working with Fragments
    01:23
  • The Vue Style Guide
    03:02
  • Moving to a Different Folder Structure
    02:56
  • Module Summary
    03:38
  • Module Resources
    00:06

  • Module Introduction
    01:37
  • Setup & First Steps
    05:24
  • First Components & Props
    10:46
  • Styling and More Components
    07:19
  • Header & BaseCard Components
    07:00
  • Adding a Base Button
    05:19
  • Dynamic Components & Attribute Fallthrough
    08:37
  • Adding & Styling Tabs
    04:58
  • Adding a Form
    04:12
  • Fetching User Input
    08:27
  • Adding a Modal Dialog
    12:19
  • Deleting Items
    06:42
  • Adding "Teleport"
    01:28
  • Module Resources
    00:06

Requirements

  • Basic JavaScript Knowledge is Required
  • ES6 Knowledge is a Plus but not a Must
  • Basic HTML and CSS Knowledge is assumed throughout the Course

Description

No matter at which metric you look at (Google Trends, Github Stars, Tweets ...) - VueJS is the shooting star in the world of JavaScript frameworks - it simply is amazing!

This bestselling course teaches the latest version of Vue (Vue.js 3) from the ground up and in great detail. We'll cover all the core basics but we'll not stop thereafter - this course also dives into advanced concepts like the Composition API introduced with Vue 3.

Frontend frameworks like Vue JS 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!

This course covers it all!

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?

  • The Basics (including the basic Syntax, Understanding Templates and much more!)

  • How to Output Reactive Data & Listen to Events

  • Interacting with DOM (Rendering Lists, Conditionally attaching/ detaching Elements ...)

  • Setting up a Development Environment and Workflow

  • Using Components (and what Components are to begin with)

  • A Deep Dive Look Behind the Scenes of Vue

  • Binding to Form Inputs

  • Sending Http Requests to Backend APIs

  • Authentication & Vue

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

All these topics are taught with real examples and demo projects. This course is full of exercises, challenges and bigger courser projects that allow you to practice what you learned.

Along with many other smaller projects, we will build a couple of bigger main projects:

  • The "Monster Slayer" Game - a game running in the browser, 100% powered by Vue

  • The "Learning Resource Manager" - a web app that allows you to manage (add, delete, list) your favorite learning resources

  • The "Find a Coach" app - a web app that allows you to sign up / login, register as a coach, list and filter available coaches and send messages to coaches

At the moment, this course includes both my brand-new Vue 3 course as well as my old Vue 2 course (the section marked as "VUE2"). The Vue 2 course will removed later this year.

Is this course for you?

Now that you know what this course is about, let's see if this course is for you!

Here are three types of students who will love this course:

Student #1:

Has some JavaScript experience and is interested in what this language can do. You heard and read that JavaScript allows you to create nice web applications and enhance existing web pages. VueJS is your choice!

Student #2:

You already have some experience with other frontend frameworks like Angular (2+) or ReactJS. But either due to interest or disappointment of the existing frameworks, you seek some alternatives - VueJS might be what you were looking for!

Student #3:

Has experience with backend frameworks/ languages but now also wants to enter the frontend world. VueJS is an awesome choice here, it's fun, it uses native JS and it's extremely powerful!

Bonus: Student #4

Is disappointed by Angular 2+. Does a good framework need 2 hours of setup? No, certainly not - as VueJS will prove to this student!

Let's dive into VueJS right now!

Who this course is for:

  • This Course is for Everyone interested in Frontend Development and Major JavaScript Frameworks
  • This Course is for you if you want to create Reactive Applications, which run in the Browser
  • This Course also targets Students who prefer a native JavaScript Framework which makes Getting Started much simpler than Angular 2
  • Displeased with Angular 2? VueJS is for you!

Featured review

Jacob Butschek
Jacob Butschek
61 courses
13 reviews
Rating: 5.0 out of 5a year ago
I want to update my review: This is a really helpful course!! I really enjoy Max's way of teaching. The assignments are a very good practice and I really appreciate that Max is splitting up the lessons in as little steps as possible, so it is easier to digest and follow along. Great didactic technigue! Even though Max is not an English native speaker and he has a little German accent, his English is very good and I got used to the accent very fast. (April 2019)

Instructor

Maximilian Schwarzmüller
Professional Web Developer and Instructor
Maximilian Schwarzmüller
  • 4.6 Instructor Rating
  • 569,431 Reviews
  • 1,349,766 Students
  • 35 Courses

Experience as (Web) Developer

Starting out at the age of 13 I never stopped learning new programming skills and languages. Early I started creating websites for friends and just for fun as well. Besides web development I also explored Python and other non-web-only languages. This passion has since lasted and lead to my decision of working as a freelance web developer and consultant. The success and fun I have in this job is immense and really keeps that passion burningly alive.

Starting web development on the backend (PHP with Laravel, NodeJS, Python) I also became more and more of a frontend developer using modern frameworks like React, Angular or VueJS in a lot of projects. I love both worlds nowadays!

As a self-taught developer I had the chance to broaden my horizon by studying Business Administration where I hold a Master's degree. That enabled me to work in a major strategy consultancy as well as a bank. While learning, that I enjoy development more than these fields, the time in this sector greatly improved my overall experience and skills.

Experience as Instructor

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enables me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 1,000,000 students on Udemy as well as a successful YouTube channel is the best proof for that.

Whether working as development instructor or teaching Business Administration I always received great feedback. The most rewarding experience is to see how people find new, better jobs, build awesome web applications, acquire amazing projects or simply enjoy their hobby with the help of my content.

Together with Manuel Lorenz, I founded Academind to offer the best possible learning experience to our more than 1,000,000 students.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.