Vue.js for Reactive UI

[Audio] Good day, class! For today's lesson, we will explore Vue.js, a JavaScript framework used to create interactive and dynamic user interfaces. In modern web development, users expect websites to respond immediately to their actions. For example, when you type into a search box, click a button, add a product to a shopping cart, or update your profile, the interface should reflect those changes without requiring the entire page to reload. Vue.js helps developers build this kind of behavior through reactive data, template syntax, directives, and reusable components. Throughout this lesson, we will learn how Vue connects application data to the elements displayed in a browser and how event handling enables users to interact with a web application..

[Audio] Vue, pronounced "view," is a JavaScript framework for building user interfaces. It works with familiar web technologies, including HTML for structure, CSS for presentation, and JavaScript for application logic. What makes Vue useful is that it provides a declarative and component-based approach to interface development. Declarative programming means describing the desired result rather than manually specifying every step required to update the browser. For instance, imagine a student information page that displays a student's name. Instead of manually searching for an HTML element and changing its text whenever the name changes, a developer can connect the displayed text to a Vue data variable. When the variable changes, Vue updates the relevant part of the interface automatically. Vue can be used for a small interactive component within an existing webpage or for a complete single-page application..

[Audio] This has two essential concepts in Vue: declarative rendering and reactivity. Declarative rendering allows developers to describe what the HTML output should look like based on the application's data. For example, the template expression } tells Vue to display the current value of the variable named message. If that variable contains the text "Welcome to our class!", Vue displays that message in the webpage. Reactivity refers to Vue's ability to track relevant changes in reactive data and update the affected parts of the interface. Suppose the value of message changes from "Good morning" to "Good afternoon." In a reactive Vue component, the displayed text updates without requiring the developer to manually modify the DOM. These two features work together to reduce repetitive code, improve maintainability, and make interactive interfaces easier to develop..

[Audio] A Single-File Component (SFC) is a special file format used in most modern Vue projects — it uses the .vue file extension. Each .vue file encapsulates everything a component needs: Template – the HTML structure (what the user sees) Script – the JavaScript logic (how it behaves) Style – the CSS (how it looks) All these parts live together in a single file, making components self-contained, reusable, and organized. A Single-File Component, or SFC, is a Vue component stored in a file with the .vue extension. It combines the component's template, JavaScript logic, and CSS styling in one organized file. The template section defines the interface elements, the script section contains the logic and data, and the style section controls the appearance. For example, a reusable student profile component might contain a template that displays the student's name, a script that receives the name as a property, and a style section that controls the profile card's background, spacing, and typography. Keeping these related parts together makes the component easier to understand and maintain. The scoped attribute in a style block limits the component's CSS to that component's elements under Vue's normal SFC compilation. SFCs are commonly used in projects that have a build tool, such as Vite..

[Audio] Vue.js was created by Evan You and first released in February 2014. Before developing Vue, Evan You worked with AngularJS and appreciated its data-binding capabilities and declarative syntax. However, he wanted a more lightweight and flexible approach that developers could adopt without the complexity of a large framework. This led to Vue, which emphasized simplicity, reactivity, and a gradual learning process. The history of Vue demonstrates how programming frameworks evolve in response to developers' needs. For example, a developer working on a small website may need only a simple interactive search field, while another developer may need a complete application with routing and centralized state management. Vue's design makes it possible to begin with smaller tasks and expand as requirements become more complex..

[Audio] Declarative rendering (}) let developers display data in HTML without manual DOM updates. The reactive data system automatically refreshed the page when data changed. The component-based architecture allowed breaking apps into smaller, reusable parts. These features made Vue simple to learn but powerful enough to build modern single-page applications (SPAs) efficiently. The early versions of Vue introduced three important features: declarative rendering using double curly braces, a reactive data system, and component-based architecture. Declarative rendering made it easier to display JavaScript data in HTML, while reactivity reduced the need for manual DOM manipulation. Component-based architecture allowed developers to divide an application into smaller, reusable interface elements. Consider an online enrollment system with a navigation bar, student profile, subject list, and registration summary. Instead of writing the entire interface as one large block of code, developers can organize these sections into separate components. Each component can manage its own presentation and responsibilities while working with the rest of the application. These features helped Vue become useful for developing single-page applications, where users can navigate and interact with different views without repeatedly loading entirely new pages..

[Audio] Vue 2 marked a major step forward for the framework. It was rewritten for speed, scalability, and better developer experience, making it one of the most popular front-end tools at the time. It introduced the Virtual DOM (for faster rendering), Single-File Components (.vue) that combine HTML, CSS, and JS in one file, and improved performance and tooling, which made building and maintaining large web apps much easier. Vue 2 introduced major improvements in performance, scalability, and developer tooling. One of its important features was the Virtual DOM, a programming technique in which a lightweight representation of the interface is used to determine what changes are needed before updating the actual browser DOM. This can help Vue update the interface efficiently. Vue 2 also became widely associated with Single-File Components, which allowed developers to organize HTML-like templates, JavaScript, and CSS in .vue files. For example, in an online store, a product quantity might change from one to two. Rather than rebuilding the entire page manually, Vue can update the relevant interface output. It is important to understand that Vue 2 is a historical milestone; new projects generally use Vue 3, while Vue 2 knowledge remains relevant when maintaining older applications..

[Audio] Vue 3 was a complete rewrite built with TypeScript, focusing on making Vue more flexible, maintainable, and developer-friendly. TypeScript is a programming language developed by Microsoft that builds on JavaScript by adding static typing. It lets you define data types (like string, number, boolean) for your variables and functions. In short: TypeScript = JavaScript + types, making your code safer, clearer, and easier to maintain It introduced the Composition API, which allows developers to organize and reuse logic more easily. Vue 3 also brought faster performance, smaller bundle sizes, stronger TypeScript integration, and fragment support, letting components have multiple root elements instead of just one. Vue 3 introduced a major architectural update with a stronger focus on flexibility, performance, maintainability, and TypeScript support. One of its most significant additions was the Composition API, which gives developers another way to organize component logic into reusable functions. TypeScript, developed by Microsoft, extends JavaScript with static typing and related development tools. For example, a developer can declare that a variable should contain a number rather than a string, allowing some errors to be identified during development. Vue 3 also improved rendering performance and reduced bundle size in many situations. Another feature is fragment support, which allows a component template to contain multiple root elements without requiring an unnecessary wrapper element. These changes make Vue 3 suitable for projects ranging from simple classroom demonstrations to larger applications maintained by development teams. ..

[Audio] Vue has grown into one of the "big three" front-end frameworks, alongside React and Angular, thanks to its active and expanding community. It has evolved beyond just a framework into a complete ecosystem, offering powerful official tools such as: Vite – a fast, next-generation build tool created by Vue's founder, Evan You. Pinia – the modern, official state management library that replaced Vuex. Vue Router 4 – handles navigation for single-page applications (SPAs). Nuxt.js – enables server-side rendering and full-stack web development with Vue. Vue is supported by a broader ecosystem of tools that help developers build complete applications. Vite is a build tool commonly used to start and develop modern Vue projects, offering fast development-server startup and updates. Pinia is the recommended state management library for sharing application state across components. Vue Router 4 manages navigation between views in single-page applications, while Nuxt builds on Vue to support features such as server-side rendering and full-stack development. Consider an online university portal with a dashboard, student profile, enrollment page, and grades page. Vue provides the interface, Vue Router manages navigation, and Pinia can hold shared state such as the logged-in user's information. Vite supports the development workflow, while Nuxt may be considered when the project needs its broader application framework capabilities. Each tool has a different purpose, and developers should select tools according to the application's requirements..

[Audio] Vue has stayed true to its core principles since it was first created: Approachable – It's easy for beginners to start with, especially for those who already know HTML, CSS, and JavaScript. Versatile – Vue can handle everything from small interface elements to large, complex single-page applications. Performant – Its reactivity system and virtual DOM make updates fast and efficient. Progressive – You can adopt Vue step by step, adding it to existing projects without needing a full rewrite. Vue's design philosophy is commonly summarized through four principles: approachable, versatile, performant, and progressive. Approachable means that developers familiar with HTML, CSS, and JavaScript can begin learning Vue without first mastering a complicated architecture. Versatile means that Vue can be used for small interface elements or larger applications. Performant refers to its efficient reactivity and rendering mechanisms. Progressive means that Vue can be adopted incrementally instead of requiring an entire website to be rewritten at once. For example, a university website could introduce Vue into a student feedback form while leaving other pages unchanged. Later, the institution could expand its use to a registration dashboard or a complete student portal. These principles encourage developers to choose an appropriate level of complexity instead of introducing unnecessary tools into every project..

[Audio] CDN - Best for beginners or small demos — no setup, no build tools. A Content Delivery Network (CDN) is one of the easiest ways to begin experimenting with Vue because it allows developers to include Vue through a script URL in an HTML file. This approach is useful for beginners, demonstrations, and small projects that do not require a build system..

[Audio] CDN - Best for beginners or small demos — no setup, no build tools. Vite is the officially recommended build tool for modern Vue apps. Vite is the recommended starting point for many modern Vue 3 projects because it provides a development server, module processing, and a production build workflow. Before using it, students should install a compatible version of Node.js and npm.

[Audio] CDN - Best for beginners or small demos — no setup, no build tools. Vite is the officially recommended build tool for modern Vue apps. The Vue CLI was the main tool before Vite became standard. Still useful for projects using older setups or Vue 2. If you already have a Node.js project and want to integrate Vue manually: npm is the package manager commonly used with Node.js projects. If a developer already has a suitable JavaScript project and wants to integrate Vue, the developer can install Vue as a dependency:.

[Audio] CDN - Best for beginners or small demos — no setup, no build tools. Vite is the officially recommended build tool for modern Vue apps. The Vue CLI was the main tool before Vite became standard. Still useful for projects using older setups or Vue 2. ue CLI was an important tool for creating and configuring Vue projects before Vite became the preferred choice for many new projects. It provides a command-line workflow for generating projects and selecting features such as routing and state management.

[Audio] React and Vue are both used to build interactive user interfaces, but they organize their code differently. In React, developers commonly define components using JavaScript functions and JSX, which allows HTML-like syntax within JavaScript. Vue commonly uses Single-File Components, separating the template, script, and style into recognizable sections. The slide also compares state management: React's useState() hook and Vue's ref() function both support reactive interface state, although their APIs and update patterns differ. For example, a counter in React might use const [count, setCount] = useState(0), while Vue 3 Composition API code might use const count = ref(0). In Vue, incrementing count.value in the script updates the reactive state. Understanding these differences helps students choose a framework based on project needs, team familiarity, and the existing technology stack rather than assuming that one framework is always superior..

[Audio] In Vue.js, the letter v stands for "Vue directive" — it's a prefix that tells Vue to apply special reactive behavior or DOM manipulation to an HTML element. A directive is a special attribute in Vue that starts with v-. It tells Vue to do something with the element — for example: show or hide it, loop over data, bind data dynamically, handle user input or events, etc. v-model - Two-way data binding between form input and data. V-if and else – conditions This slide compares how React and Vue display variables and respond to user actions. In React JSX, a value is displayed using an expression such as . In a Vue template, the corresponding syntax is }. Event handling also differs: React commonly uses onClick, whereas Vue uses v-on:click or the shorter @click syntax. For example, Vue can increment a counter with + when count is a suitable reactive variable. The slide also introduces Vue directives, which are special template attributes that control behavior. The prefix v- identifies directives such as v-model, v-if, and v-for. Students should recognize that these are framework-specific conventions: they serve similar interface-development goals, but the syntax and programming model are different..

[Audio] Conditional rendering determines which content should appear based on a condition, while list rendering creates repeated elements from a collection of data. In React, a developer might use a ternary expression to display different messages or use JavaScript's .map() method to generate a list. Vue provides directives such as v-if, v-else, and v-for to express these tasks directly in a template..

[Audio] Props are values passed from a parent component to a child component. In React, props are commonly received through a function's parameters. In Vue, props can be declared using the defineProps() macro in a component or through the props option in the Options API. For example, a reusable Vue greeting component might accept a name prop and display Hello, }!. The parent could reuse the same component for different students without duplicating the greeting's template. This slide also highlights the difference between React's JavaScript-oriented JSX approach and Vue's HTML-oriented template syntax with directives. Both approaches support reusable components and dynamic content, but developers should understand the conventions of whichever framework they are using..

[Audio] Vue directives makes HTML reactive, dynamic, and interactive ✨. They're special attributes that start with v- and tell Vue to do something with the DOM. Vue directives are special HTML attributes that begin with the prefix v-. They extend ordinary HTML elements by connecting them to Vue's data and behavior. Directives can display or hide content, bind attributes, handle events, repeat elements, and connect form inputs to reactive data. For example, an ordinary HTML paragraph always displays the text written between its tags. However, a paragraph using v-if="isVisible" appears only when the isVisible condition is true. Similarly, v-model="username" connects a form input to a data variable, allowing changes in the input to update that variable. Directives are important because they let developers express common interface behaviors directly in Vue templates without manually writing DOM manipulation code for every change..

[Audio] This means: "Only show this tag if the data property isVisible is true." Shows or hides an element based on a condition. The v-if directive conditionally renders an element based on an expression. Consider the example Visible Text. If isVisible is true, Vue renders the paragraph. If it is false, Vue removes that element from the rendered DOM. For example, an enrollment website might display a confirmation message only after a student successfully submits a registration form. The confirmation paragraph could use v-if="registrationComplete" so that it appears only after the relevant state becomes true. Students should understand that v-if is not simply a visual styling rule; it controls whether the element is rendered. If an element needs to be shown and hidden frequently, v-show may be more suitable because it keeps the element in the DOM and toggles its CSS display property..

[Audio] V-text You want to display raw text You want to avoid HTML injection V-html Inserts the value of htmlContent as actual HTML The v-text directive sets an element's text content to a specified value. For example, displays the value of message as text, much like }. If the value contains text that resembles HTML tags, those characters are treated as text rather than being interpreted as markup. The v-html directive has a different purpose: it inserts a value as HTML. For example, can render a paragraph or bold text contained in htmlContent. However, developers must be careful with v-html. If the content comes from an untrusted user, it could contain malicious HTML or scripts and create a cross-site scripting (XSS) vulnerability. Use v-text or interpolation for ordinary user-provided content, and use v-html only when HTML rendering is necessary and the content has been appropriately sanitized. This distinction is particularly important when developing secure web applications..

[Audio] V-bind Binds a JavaScript expression to an HTML attribute. One way data binding. V-model Creates a two-way binding between a form input and component data. The v-bind directive connects an HTML attribute to a JavaScript expression. For example, sets the image's source using the value of imageUrl. Vue also provides the shorthand :src="imageUrl". When imageUrl changes, Vue updates the bound attribute. This is an example of one-way data binding from application state to the interface. In contrast, v-model provides two-way synchronization for supported form controls. For example, keeps the input value and the corresponding Vue variable synchronized. When a student types a name, the variable updates; when the variable changes programmatically, the input reflects the new value. These directives are useful in profile pages, registration forms, search boxes, and settings screens, where the interface must reflect application data and respond to user input..

[Audio] The v-if directive renders an element when a condition is true, while v-else provides the alternative when the preceding v-if condition is false.

[Audio] This means: "Only show this tag if the data property isVisible is true." Shows or hides an element based on a condition. The v-else-if directive allows developers to evaluate another condition when the preceding v-if condition is false. For example, a student result page could display "Passed" when score >= 75, "For Remediation" when a score is below 75 but meets a specified minimum, and another message for the remaining cases. The v-show directive serves a different purpose: it toggles an element's visibility using CSS while keeping the element in the DOM. For example, Additional details displays the paragraph when visible is true and hides it when false. Use v-if when an element needs to be created or removed conditionally, and consider v-show when visibility changes frequently. Both directives are useful, but their different rendering behavior affects performance and component lifecycle..

[Audio] The v-for directive creates repeated elements from an array or other supported iterable data. For example, } generates a list item for every element in the items collection. The :key binding provides a stable identifier so Vue can track the identity of each item as the list changes. The v-on directive listens for DOM events and runs the associated expression or handler. For example, Click Me calls the appropriate handler when clicked. Vue provides the shorthand @click for v-on:click. Together, these directives support interactive lists, such as a task manager where users can view multiple tasks and click a button to mark a task complete or remove it..

[Audio] The v-on directive (or its shorthand @) is used in Vue.js to listen for DOM events like clicks, input, or keypresses, and then execute JavaScript methods when those events happen. Event handling enables a web application to respond to user actions, including clicks, typing, form submissions, and keyboard input. Vue uses the v-on directive to listen for DOM events and execute an expression or handler. Its shorthand is the @ symbol. For example, v-on:click="showMessage" and @click="showMessage" both attach a click handler named showMessage to an element. When the user clicks a button, Vue invokes the handler. In an online enrollment application, clicking "Check Subjects" might trigger a function that validates the selected subjects and updates the displayed result. This concept is central to event-driven programming because application behavior is initiated by events rather than occurring only in a fixed sequence..

[Audio] Inline Handlers: Run small pieces of JavaScript directly inside the directive. Method Handlers: Call a method defined in the component for cleaner, reusable logic. Vue supports two common styles of event handling: inline handlers and method handlers. An inline handler contains a small JavaScript expression directly in the template, such as @click="count++". This is convenient when the operation is simple and easy to understand. A method handler refers to a function defined in the component, such as @click="saveRecord". This is preferable when the behavior involves multiple steps, validation, calculations, or reusable logic. For example, incrementing a counter can be written inline, but saving a student's enrollment record may require checking required fields, preparing the data, displaying feedback, and handling errors. Placing that logic in a method makes the template easier to read and the code easier to test and maintain..

[Audio] ref('Vue.js') creates a reactive reference using Vue's Composition API. name is now a reactive variable holding the string 'Vue.js'. To access or update its value, you use .value (e.g., name.value = 'Hello'). greet is a method that: Shows an alert with the current value of name. If a native DOM event is passed (like a click), it shows the tag name of the element that triggered the event (e.g., BUTTON). This is a Vue template syntax. @click="greet" binds the greet method to the button's click event. When the button is clicked: greet() runs. It receives the native DOM event automatically. You'll see two alerts: one greeting, and one showing the tag name (BUTTON). Method handlers are useful when the event requires more than a simple expression. The slide illustrates a Vue component that creates a reactive name variable with ref('Vue.js') and defines a greet method. A ref stores a reactive value; inside the script, its value is read or changed using .value. For example, name.value = 'Event-Driven Programming' updates the value of the reference. In a template, Vue automatically unwraps the ref in common interpolation and binding contexts. When a method is bound as @click="greet", Vue invokes the handler when the button is clicked. If the handler is written to display an alert containing the current name and another alert showing the triggering element's tag name, clicking the button can produce two alerts. The native DOM event is available to the handler when Vue invokes a method handler in this form, so the handler can inspect event.target.tagName, which would commonly be BUTTON for a click on the button itself. This example illustrates how Vue event handling can combine application data with information about the browser event..

[Audio] Event modifiers are postfixes (The word "postfix" means something added to the end of a word, name, or variable — the opposite of a prefix (which goes at the beginning).) added to Vue's v-on directive (or shorthand @) to control how DOM events behave—without cluttering your JavaScript methods. They help you: Prevent default browser actions Stop event bubbling Limit event scope Control timing and behavior of listeners .self What it does: Ensures the event only fires if the target is the element itself—not a child. Why it's useful: Avoids accidental triggers from nested elements. .capture What it does: Adds the event listener during the capture phase instead of the default bubbling phase. Why it's useful: Rarely needed, but helpful when you want a parent to intercept events before children. .once What it does: Ensures the handler runs only one time, then removes itself. Why it's useful: Great for initialization or one-time setup actions. .passive What it does: Tells the browser that preventDefault() won't be called, allowing better scrolling performance. Why it's useful: Used with scroll or touch events to optimize responsiveness. Vue event modifiers simplify common event-handling tasks by allowing developers to add behavior directly to a directive. They appear as suffixes separated by dots. The .self modifier runs the handler only when the event originates on the element itself, rather than a descendant. The .capture modifier registers the listener for the capture phase of event propagation. The .once modifier ensures that the handler is invoked only once. The .passive modifier indicates that the listener will not call preventDefault(), allowing the browser to optimize certain scrolling and touch interactions. For example, @click.once="showWelcome" displays a welcome notification on the first click but does not invoke that listener on subsequent clicks. The expression @click.self="closePanel" can be useful on an overlay when the panel should close only if the user clicks the overlay itself, not an element inside the panel. The .capture modifier is helpful in situations where a parent needs to handle an event during capture before it reaches a descendant. The .passive modifier is commonly relevant to scroll and touch events. Students should remember that .passive and .prevent should not be combined because passive listeners must not cancel the browser's default action..

[Audio] Props (short for properties) are a way to pass data from a parent component down to a child component. ✅ This is the Composition API with which is concise and automatically scoped. defineProps(['foo']) tells Vue this component expects a prop named foo. You can access props.foo directly in your logic. This approach is great for single-file components and modern Vue projects. Using setup() in Options API export default } ✅ This is the traditional Options API witpropsh a setup() function. Props are declared in the props option. Inside setup(), Vue passes the props as the first argument. This is useful if you're mixing Options API with Composition API or working in legacy codebases. Props, short for properties, allow a parent component to pass data to a child component. This supports component reusability because a single component can display different information depending on the values it receives. In Vue 3, a component using can declare props with defineProps(). For example, a student profile component could declare const props = defineProps(['name', 'course']) and display the student's name and course in its template. The parent component can then provide values such as name="Maria" and course="BS Information Technology". The same profile component can be reused for other students by passing different values. The slide also refers to the traditional Options API, in which props are declared through the props option. Both approaches support parent-to-child communication, but the syntax depends on the component style being used. As a general practice, props should be treated as inputs rather than modified directly by the child component..

[Audio] ✅ Use case: When child components need to communicate actions or data back to their parent components. In this example, we have two components — a ChildComponent and a ParentComponent — that communicate using Vue's defineEmits() function. 1. Child Component (ChildComponent.vue) defineEmits(['message']) tells Vue that this component can emit a custom event named message. The emit variable will be and used to trigger those declared events. When the button is clicked, the sendMessage() function runs, calling emit('message', 'Hello from child!'). This sends the event message and includes the string "Hello from child!" as data. 2. Parent Component (ParentComponent.vue) The parent includes the ChildComponent in its template and listens for the message event using @message. When the child emits the event, the parent's handleMessage() function is called, receiving the data sent by the child ("Hello from child!"). This allows the parent to react to child events — for example, showing a notification or updating state. While props allow a parent component to send information to a child, custom events allow the child to notify the parent that an action has occurred. In Vue 3, defineEmits() declares the custom events a component can emit. Consider a ChildComponent.vue file that contains a button. When the button is clicked, the child calls emit('message', 'Hello from child!'). This sends an event named message along with a string payload. The parent component includes the child component in its template and listens for the event using @message="handleMessage". When the event occurs, the parent's handleMessage function receives the message and can display it, save it, or update other application data. For example, a reusable notification component could emit a message event when a user clicks a button, while the parent decides where and how to display the notification. This separation makes components easier to reuse because the child does not need to know all the details of the parent's implementation. Emphasize the distinction: props pass data down from parent to child, while emitted events communicate from child to parent..