Certificate in Vue.js

Course details

is a popular front end JavaScript framework used for developing SPAs (single-page applications) and user interfaces. is based on model–view–view model and easily integrates with other libraries or existing projects.

extends HTML with directives which provide functionality to HTML applications. provides built-in directives and user defined directives.

Note: Please note that the course comes with online e-learning (videos) only. No hard copy will be provided.

Why should one take this Certification?
Vskills Certificate in enables you to showcase your skills and knowledge in and front-end web development. The certificate is a proof of your expertise in developing web applications, single-page applications, user interface and websites using

Certified candidates are able to stand apart in the job market and also increase their career opportunities.

Who will benefit from taking this Certification?
Web developers, programmers, front end developers, UI/UX professionals benefit from taking the Vskills Certificate in

Students and job seekers looking to find employment in web development or front-end web development departments of various companies, students generally wanting to improve their skill set and make their CV stronger and existing employees looking for a better role can prove their employers the value of their skills through this certification.
 
Benefits of Certification

• Government certification
• Certification valid for life
• Lifelong e-learning access
• Learning Hours: 12+ hrs

 
How It Works

1. Select Certification & Register
2. Receive Online e-Learning Access (LMS)
3. Take exam online anywhere, anytime
4. Get certified & Increase Employability

Test Details

• Duration: 60 minutes
• No. of questions: 50
• Maximum marks: 50, Passing marks: 25 (50%).
• There is NO negative marking in this module.
• Online exam.

 
TABLE OF CONTENT

Introduction

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

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

Updated on 28 December, 2023