Introduction

• What is Vue.js and What can it Do?
• Overview of Vue 3 Changes

Vue.js Basics

• The Vue Instance
• Data and Lists
• Looping with Objects
• List Indexes and Keys
• Binding Attributes
• Mini Challenge-Dynamic Links
• Mini Challenge-Dynamic Links-Solution
• JavaScript Expressions
• Event Handling
• Methods
• Raw HTML
• The Vue Life Cycle

Component Basics

• What are Components?
• First Look at Components
• Props and Reusing Components
• Local Components

Build Tools and Single-Page Applications

• Single-Page Applications
• The Vue CLI
• Project Structure
• The vetur Extension

Countdown Project

• Starter Project Download
• Single File Components
• Making Our Components Dynamic
• Calculating Days Left
• Conditional Rendering
• More on Conditional Rendering
• Computed Properties
• Watchers
• Computed or Watchers
• Ordering and Toggling Past Events
• Teleport

Forms, Events, and Modifiers

• Our Form Component
• Styling and Positioning the Form Modal
• Emit Custom Events
• Binding Form Inputs
• Emit Data with a Custom Event
• Emit Multiple Events
• Modifiers
• Validating Our Form
• Updating Events
• Removing Events

Validation and a Deeper Look at Props

• Prop Validation
• Non-Prop Attributes
• More on Non-Prop Attributes

Slots and Dynamic Components

• What We will be Building
• Project Pages and Components
• Introduction to Slots
• Overview Page Structure
• Slots in Practice
• Passing Dynamic Data and Scope
• Fallback Content
• Named Slots
• Scoped Slots
• Orders Page
• Bestsellers Page
• Dynamic Components

Provide/Inject

• What is provide-inject
• Setting Up a Provider
• Injecting Data
• Mini Challenge - Update Orders - Bestsellers Pages
• Update Orders and Bestsellers Pages to Use Provide
• Updating the Provider from a Child Component

Introduction to Routing

• What We will be Building and Project Starter
• Setting Up the Vue Router
• Router Link and Router View
• Params and Queries
• Matching Dynamic Routes
• Nested Routes
• Active Classes
• Fallback Pages
• Setting Up Our Project Components and Routes
• Programmatic Navigation
• Different Router Modes

Composition API

• What is the Composition API
• Composition Setup
• Primitive Versus Reference Types
• Quick Introduction to Proxies
• Using Reactive and isReactive
• Adding Reactivity with Ref
• Destructuring and toRefs
• Readonly
• Computed
• Standalone Composition Functions
• Mini Challenge-Moving Over the Cards by Category
• Moving Over the Cards by Category
• Accessing the Router
• Watch and WatchEffect
• Using Alongside the Options API

Pushing on with Our Project

• Linking to Selected Card and Category Styling
• The Create View
• Retrieving the Selected Card
• Selecting the Current Page
• Switching Card Pages
• The Card Preview Component
• Text Output Component
• Card Edit Component
• Text Input Component and Hover Menu
• Adding Menu Options
• Menu Options Continued
• Menu Styling
• Updating the Card
• Adding New Sections
• Removing Sections
• Rearranging the Order of Sections
• Changing the Section Height
• Additional Styling
• Provide and Inject with Composition

Navigation Guards and Lazy Loading

• Navigation Guards
• Lazy Loading Routes
• Grouping Routes into Chunks

Uploading Images

• Image Upload Component
• Setting Up Cloudinary
• Reading File Objects and Previewing
• Uploading the Image File
• Saving the Image URL to Our Card
• Repositioning the Image
• Removing Images

Deployment

• Deployment to Netlify

Apply for Certification

https://www.vskills.in/certification/web-development/vuejs-certificate