Mad 2 Project | Placement Portal App Part -01 Vue Basics
#IITMadras, #IITMBS, #IITMBSc, , #IITMadrasBS, #IITM, #ModernApplicationDevelopment, #MAD1, #MAD2, #MAD1Project, #MAD2Project, #AppDev1, #AppDev2, #ProjectGuidance, #ProjectBootcamp, #WebDevelopment, #FullStackDev, #StudentCommunity, #CodingBootcamp, #LearnToCode, #WebAppProject, #TechGuidance, #ExamReady, #GradedAssignments, , #StudentSupport, #CollegeProjects, #BSDegree, #IITMStudents, #IITMProjects, #EduSupport, #studygroup
In this video, we start learning Vue.js (Version 3) from scratch.
This session is focused purely on Vue.js fundamentals, not directly on the MAT-2 project, but everything taught here will strongly help in project implementation.
This video is designed to:
Build a strong Vue.js foundation
Help beginners who are comfortable with Flask / Python
Reduce frontend fear by relating Vue concepts to backend logic
Cover industry-relevant Vue.js basics
We use Vue via CDN, so no installation or complex setup is required.
🔹 What You’ll Learn in This Video
✔️ What is Vue.js and why it is used
✔️ Vue.js vs plain JavaScript
✔️ Using Vue 3 with CDN
✔️ Creating a Vue app (createApp)
✔️ Mounting Vue to HTML
✔️ Template rendering
✔️ Passing variables to HTML
✔️ Event handling (@click)
✔️ Increment & decrement logic
✔️ Inline vs method-based event handling
✔️ Using loops (v-for)
✔️ Rendering lists dynamically
✔️ Dynamic URLs with v-bind
✔️ Dynamic images using assets
✔️ Vue syntax comparison with Flask/Jinja
This video will help you understand how frontend data binding works, which is crucial before:
Connecting APIs
Fetching backend data
Building dashboards
Implementing MAD- 2 projects
📌 Bootcamp Info
MAD-1 & MAD -2 Bootcamp is running.
Enrollment link is available in the comment section.
Bootcamp includes structured learning, roadmap, and live doubt solving.
👍 Like | 💬 Comment | 🔔 Subscribe for upcoming Vue.js & Project videos
⏱️ Timestamps / Chapters
00:00:00 – Introduction to Vue.js & video overview
00:00:32 – How Vue.js helps in projects & industry
00:01:06 – Creating a basic HTML file
00:01:47 – What is Vue.js? (JavaScript framework explained)
00:02:13 – Vue.js vs plain JavaScript & Flask comparison
00:02:42 – Creating an HTML boilerplate
00:03:12 – Bootcamp information
00:03:52 – Using Vue.js via CDN
00:04:21 – Linking external JavaScript file
00:04:52 – Understanding JavaScript & console.log
00:05:57 – Inspect & console debugging
00:06:28 – Creating Vue app using createApp()
00:07:10 – Mounting Vue app to HTML
00:07:51 – Vue template control using template
00:08:25 – Dynamic text rendering
00:08:52 – Passing variables to template
00:09:37 – Using double curly braces ({{ }})
00:10:18 – Vue scope & DOM binding
00:10:50 – Adding multiple variables
00:11:26 – Button click event (@click)
00:12:29 – Increment & decrement example
00:13:08 – Inline event handling
00:14:18 – Updating variable values dynamically
00:15:27 – Using methods instead of inline logic
00:16:07 – Increment & decrement using methods
00:17:42 – Event listeners concept
00:18:12 – Preparing for loops in Vue
00:18:55 – Creating list (array of objects)
00:19:47 – Using v-for loop
00:20:24 – Rendering dynamic lists
00:21:15 – Displaying multiple values
00:21:53 – Anchor tag & dynamic URLs
00:22:27 – Using v-bind (:href)
00:23:18 – Dynamic URL binding example
00:24:10 – Handling images in Vue
00:24:49 – Using assets folder
00:25:18 – Dynamic images with v-bind:src
00:26:14 – Rendering images using loop
00:27:07 – Final explanation & wrap-up