Scribd
Upload
6 views

Vue.js Group_1

Vue.js is a progressive JavaScript framework for building user interfaces and single-page applications, known for its simplicity and ease of integration. It has evolved since its creation in 2014, with significant updates in 2016 and 2020 that improved performance and introduced new features. The framework supports a component-based architecture and reactive data binding, making it suitable for both small and large-scale applications.

Uploaded by

Jade Marie Lagura
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views

Vue.js Group_1

Vue.js is a progressive JavaScript framework for building user interfaces and single-page applications, known for its simplicity and ease of integration. It has evolved since its creation in 2014, with significant updates in 2016 and 2020 that improved performance and introduced new features. The framework supports a component-based architecture and reactive data binding, making it suitable for both small and large-scale applications.

Uploaded by

Jade Marie Lagura
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

WEB SYSTEMS AND TECHNOLOGIES

Vue.js Framework Documentation

MR. RAY AN QUIÑON


Instructor

GROUP-1 | BSIT-2D

Johnful P. Flores

Jade Marie P. Lagura

Medalyn S. Amatiaga

Mariella O. Dapin

Desiree Joy S. Gamaya

Nesam Mae C. Paler

A.Y. 2025
What is Vue.js?
Vue.js is a progressive JavaScript framework for building user interfaces and single-page applications. It
is designed to be incrementally adoptable, making it easy to integrate with other libraries or projects.
Vue focuses on the view layer and provides reactive data-binding, component-based architecture, and a
smooth development experience. With Vue, you can build sophisticated applications with ease while
maintaining a lightweight and performant system.

History of Vue.js
Vue.js was created by Evan You in 2014. It quickly gained popularity due to its simplicity, flexibility,
and ease of integration with other projects. Over time, it has evolved into one of the leading front-end
frameworks.

Evolution of Vue.js

 2014: Vue.js was first released, providing a simple and flexible alternative to AngularJS.
 2016 (Vue 2.0): Introduced the virtual DOM, improved reactivity, and better performance.
 2020 (Vue 3.0): Major improvements, including the Composition API, improved TypeScript
support, and enhanced performance.

Today, Vue.js is widely used for developing web applications, single-page applications (SPAs), and
mobile applications via frameworks like Nuxt.js and Quasar.

How to Set Up Vue.js (Tools and Installation)


To get started with Vue.js, follow these steps to set up the development environment.

1. Install Node.js
Vue.js requires Node.js for managing project dependencies and running development servers.

 Download Node.js from the official website: https://nodejs.org/

 Choose the LTS (Long Term Support) version for stability.

 Once installed, verify Node.js by opening a terminal or command prompt and running the following
command:

This will print the version number if the installation was successful.
2. Install a Code Editor

 The recommended editor is Visual Studio Code (VS Code), available at code.visualstudio.com.
 Install the Vetur or Volar extension for Vue.js support.

3. Create a New Vue.js Project

Use Vue CLI (Command Line Interface) or Vite to set up a new Vue project.

Using Vue CLI:

Using Vite (Recommended for Vue 3):

4. Install Dependencies

Move into the project folder and install the required dependencies:

5. Start the Development Server

To preview the Vue application, run:

Then, open http://localhost:5173/ to see the Vue app in action.

How Vue.js Works


Vue applications are built using components. A Vue component consists of three key sections:

1. Template (HTML) – Defines the structure of the page.


2. Style (CSS) – Controls the visual appearance.
3. Script (JavaScript) – Manages the logic and interactivity.
Unlike traditional frameworks, Vue uses a reactive data model, which means the UI updates
automatically when data changes.

1. Creating and Using Components

To create a new component in Vue, define a .vue file inside the components/ folder.

Example: Creating a Greeting Component (Greeting.vue)

Using Greeting.vue in App.vue

This will display: *Hello, World!*

2. Reactivity: Automatic UI Updates

Vue’s reactivity system automatically updates the UI when data changes.

Example: Counter Component (Counter.vue)


This will create a button that, when clicked, increases the count and automatically updates the displayed
value.

3. Handling User Input (v-model)

Vue makes working with form inputs easy using v-model.

Example: Two-Way Data Binding

As the user types in the input field, the message variable automatically updates, and the UI reflects this
change.

4. Looping Over Data (v-for)

Use v-for to dynamically render lists.

Example: Displaying a List of Names

This generates a list of names from the names array.


5. Conditional Rendering (v-if)

Vue allows you to show or hide elements using v-if.

Example: Show a Message if Logged In

This toggles between "You are logged in" and "You are logged out" based on the loggedIn data
property.

Why Use Vue.js?

Simplicity and Flexibility: Vue.js is easy to integrate with existing projects and allows gradual
adoption. It's great for both small and large-scale applications.

Reactive Data Binding: Vue’s reactivity system makes it simple to manage and update the user
interface.

Component-based Architecture: Encourages the use of reusable, modular components, making it


easier to manage and scale applications.

Strong Ecosystem: Vue provides official tools like Vue Router (for routing) and Vuex (for state
management), and has a large and active community.

Conclusion:

Vue.js provides a simple yet powerful way to build modern web applications with high efficiency and
flexibility.

You might also like