Vue.js Table of Contents


Table of Content
 

 

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

 For Support