Vue - The Complete Guide (incl. Router & Composition API)
Vue.js is an awesome JavaScript Framework for building Frontend Applications! VueJS mixes the Best of Angular + React!
Vue.js is an awesome JavaScript Framework for building Frontend Applications! VueJS mixes the Best of Angular + React!
Join this bestselling Vue course to learn how to use the latest version of VueJS to build amazing, modern web apps!
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 Udemy 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
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!
Khu vực Câu hỏi thường gặp trống
Welcome to the Course!
What is "Vue.js"?
Different Ways of Using Vue
Exploring Vue Alternatives
Building A First App With Just JavaScript
Re-building the App with Vue
Vue vs "Vanilla JavaScript" (just JavaScript)
Setting Up the Course Development Environment
Course Outline & What's In The Course
How To Get The Most Out Of This Course
Join our Online Learning Community
Important: Changed Vue Script Import Path
Course Setup
Module Resources
Module Introduction
Creating and Connecting Vue App Instances
Interpolation and Data Binding
Binding Attributes with the "v-bind" Directive
Understanding "methods" in Vue Apps
Working with Data inside of a Vue App
Outputting Raw HTML Content with v-html
A First Summary
Understanding Event Binding
Events & Methods
Working with Event Arguments
Using the Native Event Object
Exploring Event Modifiers
Locking Content with v-once
Data Binding + Event Binding = Two-Way Binding
Methods used for Data Binding: How It Works
Introducing Computed Properties
Working with Watchers
Methods vs Computed Properties vs Watchers
V-bind and v-on Shorthands
Dynamic Styling with Inline Styles
Adding CSS Classes Dynamically
Classes & Computed Properties
Dynamic Classes: Array Syntax
Module Summary
Important: Changed Vue Script Import Path
Time to Practice: Data Binding
Time to Practice: Event Binding
Time to Practice: Reactivity
Time to Practice: Dynamic Styling
Module Resources
Module Introduction
Why We Need A Development Server
Why We Want A Better Developer Experience
Installing & Using the Vue CLI
Inspecting the Created Project
Inspecting the Vue Code & ".vue" Files
Adding the "Vetur" Extension to VS Code
More on ".vue" Files
A New Vue Project
Creating a Basic Vue App
Adding a Component
Adding Styling
Fixing npm run serve (Vue CLI)
A Small Addition
An Alternative Setup - using "npm init" & Volar
Module Resources
Module Introduction
Introducing "Props" (Parent => Child Communication)
Prop Behavior & Changing Props
Validating Props
Working with Dynamic Prop Values
Emitting Custom Events (Child => Parent Communication)
Defining & Validating Custom Events
Demo: Adding Components & Connecting Them
Demo: Adding More Component Communication
A Potential Problem
Provide + Inject To The Rescue
Provide + Inject for Functions / Methods
Provide + Inject vs Props & Custom Events
Module Summary
Supported Prop Values
Prop / Event Fallthrough & Binding All Props
Time to Practice: Props & Custom Events
Module Resources
Module Introduction
Project Setup
Global vs Local Components
Scoped Styles
Introducing Slots
Named Slots
Slot Styles & Compilation
More on Slots
Scoped Slots
Dynamic Components
Keeping Dynamic Components Alive
Applying What We Know & A Problem
Teleporting Elements
Working with Fragments
The Vue Style Guide
Moving to a Different Folder Structure
Module Summary
Module Resources
Module Introduction
Setup & First Steps
First Components & Props
Styling and More Components
Header & BaseCard Components
Adding a Base Button
Dynamic Components & Attribute Fallthrough
Adding & Styling Tabs
Adding a Form
Fetching User Input
Adding a Modal Dialog
Deleting Items
Adding "Teleport"
Module Resources
Module Introduction
Starting App & Why we need a Backend
Adding a Backend
How To (Not) Send Http Requests
Sending a POST Request to Store Data
Getting Data (GET Request) & Transforming Response Data
Loading Data When a Component Mounts
Showing a "Loading..." Message
Handling the "No Data" State
Handling Technical / Browser-side Errors
Handling Error Responses
Module Summary
Http Requests & Http Methods (Verbs)
Using Axios Instead Of "fetch()"
Module Resources
Module Introduction
What & Why?
Routing Setup
Registering & Rendering Routes
Navigating with router-link
Styling Active Links
Programmatic Navigation
Passing Data with Route Params (Dynamic Segments)
Navigation & Dynamic Paths
Updating Params Data with Watchers
Passing Params as Props
Redirecting & "Catch All" Routes
Using Nested Routes
More Fun with Named Routes & Location Objects
Using Query Params
Rendering Multiple Routes with Named Router Views
Controlling Scroll Behavior
Introducing Navigation Guards
Diving Deeper Into Navigation Guards
The Global "afterEach" Guard
Beyond Entering: Route Leave Guards
Utilizing Route Metadata
Organizing Route Files
Summary
A Vue Bug
Module Resources
Module Introduction
Animation Basics & CSS Transitions
Understanding CSS Animations
Why Is "Just CSS" Not Enough?
Playing CSS Animations with Vue's Help
Using the Transition Component
CSS Animations with the Transition Component
Using Custom CSS Class Names
Example: Animating a Modal
Transitioning Between Multiple Elements
Using Transition Events
Building JavaScript Transitions (instead of CSS)
Disabling CSS Transitions
Getting Started with Animated Lists
Animating Lists with "transition-group"
Animate List Item Movement
Animating Route Changes
An Important Note on Animated Route Changes
Module Resources
Module Introduction
What & Why?
Creating & Using a Store
Connecting Components to State
Introducing Mutations - A Better Way of Changing Data
Passing Data to Mutations with Payloads
Introducing Getters - A Better Way Of Getting Data
Running Async Code with Actions
Understanding the Action "Context"
Using Mapper Helpers
Example: Adding More State
Organizing your Store with Modules
Understanding Local Module State
Namespacing Modules
Structuring Vuex Code & Files
A Challenge!
Challenge Solution (1/3)
Challenge Solution (2/3)
Challenge Solution (3/3)
Summary
Module Resources
Module Introduction
Planning the Project / Web App
Planning the Data Requirements
Planning the Layout / Components
Registering Routes
Adding Route Page Components
Working on the Main Layout & Styling
Wiring Up Pages
Adding Vuex and Coach Data
Working on the Coaches List and List Items
Adding a Couple of Base Components (Base Card, Base Button, Base Badge)
Building the Coach Detail Component
Filtering Coaches
Registering as a Coach: The Form
Adding Coaches to Vuex
Adding Form Validation
Working on the Contact Form
Storing Requests (Messages) With Vuex
Outputting Incoming Requests (Messages)
Filtering Requests for the Active Coach
Sending a PUT Http Request to Store Coach Data
Fetching Coach Data (GET Http Request)
Rendering a Loading Spinner
Adding Http Error Handling
Sending Coaching Requests Http Requests
Caching Http Response Data
Adding Route Transitions
The "Not Found" Page & Summary
Module Resources
Module Introduction
How Authentication Works in Vue Apps (or any SPA)
Locking / Protecting Backend Resources
Adding an Authentication Page (Login & Signup)
Preparing Vuex
Adding a "Signup" Action & Flow
Better UX: Loading Spinner & Error Handling
Adding a "Login" Action & Flow
Attaching the Token to Outgoing Requests
Updating the UI Based on Auth State
Adding a "Logout" Action & Flow
Authentication & Routing (incl. Navigation Guards)
Adding "Auto Login"
Adding "Auto Logout"
Summary
Module Resources
Module Introduction
Which Problem Does The Composition API Solve?
Replacing "data" with "refs"
Building "reactive" Objects
Reactivity: A Deep Dive
Replacing "methods" with Regular Functions
Replacing "Computed Properties" with the "computed" Function
Two-Way-Binding and the Composition API
Working with Watchers
A First Summary
How To Use Template Refs
Components, Props & The Composition API
Emitting Custom Events
Working with Provide/ Inject
Lifecycle Hooks in the Composition API
Migrating from Options API to Composition API - An Example Project
Migrating a First Component
Migrating a Big Component
Migrating the Remaining Components
Routing, Params & The Composition API
The Route & Router Objects and the Composition API
Using Vuex with the Composition API
Summary
Replacing the setup() Method
Time to Practice: Data & Functions
Time to Practice: Composition API Core Building Blocks
Module Resources
Module Introduction
Reusability Concepts
Using Mixins
Understanding Mixin Merging
Global Mixins
Disadvantages of Mixins
Custom Hooks / Composables & The Composition API
More Custom Composition Functions
Why Hooks / Composables Beat Mixins
Example: Creating a "Search" Hook
Custom Hooks Gotchas
More Thoughts on Custom Hooks / Composables
Example: A Custom "Sort" Hook
Module Resources
Basic JavaScript Knowledge is Required
ES6 Knowledge is a Plus but not a Must
Basic HTML and CSS Knowledge is assumed throughout the Course
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
1.2
2 Học viên
275 Khóa học
1253 Đánh giá
Xin chào các bạn, tôi là Nguyễn Đình Cường, một lập trình viên và giảng viên đam mê công nghệ với hơn 15 năm kinh nghiệm trong ngành công nghiệp phần mềm. Tôi tốt nghiệp từ Bưu Chính Viễn Thông và đã từng làm việc cho một số công ty công nghệ hàng đầu như FPT Software và VinGroup. Với chuyên môn chính là phát triển ứng dụng web, tôi đã làm việc với nhiều công nghệ như HTML, CSS, JavaScript, React cho front-end và Node.js, Express, MongoDB cho back-end. Không chỉ dừng lại ở việc viết mã, tôi còn yêu thích tìm hiểu sâu về thiết kế hệ thống và kiến trúc phần mềm. Tôi tin rằng quá trình học lập trình không chỉ đơn thuần là lý thuyết, mà còn là sự trải nghiệm thực tế và giải quyết vấn đề. Trong các khóa học của mình, tôi cố gắng cung cấp cho học viên những bài giảng thú vị và dễ hiểu, cùng với các bài tập thực hành giúp củng cố kiến thức. Tôi hy vọng rằng qua các khóa học của mình, bạn sẽ không chỉ học được cách viết mã, mà còn phát triển tư duy lập trình và kỹ năng giải quyết vấn đề. Hãy cùng nhau khám phá thế giới lập trình và biến ý tưởng của bạn thành hiện thực! Nếu bạn có bất kỳ câu hỏi nào, đừng ngần ngại liên hệ với tôi. Tôi rất vui được hỗ trợ bạn trong hành trình học tập của mình!
Xem chi tiết