What is VueJS ?
Last Updated :
24 Apr, 2024
Vue.js is a free JavaScript framework for building interactive and dynamic user interfaces. It provides a special helper for JavaScript developers, similar to React. Vue.js is maintained by developers from various communities, including its creator Evan You, and is continuously updated to ensure its awesomeness. With Vue.js, websites can become highly interactive and lively, especially suitable for modern single-page applications. It facilitates the creation and reuse of different parts of a webpage, akin to having building blocks that can be rearranged easily.
Why learn VueJS?
- Easy to Learn: Vue.js has a gentle learning curve and offers comprehensive documentation, making it accessible to beginners.
- Versatile: Vue.js can be used for building small to large-scale applications and is suitable for both simple and complex projects.
- Performance: Vue.js offers high performance with virtual DOM and efficient rendering techniques.
- Active Community: Vue.js has a large and active community of developers, providing support, resources, and plugins.
- Flexibility: Vue.js allows developers to choose their preferred tooling, state management, and routing libraries, providing flexibility in development.
Key Features of Vue.js
- JavaScript Library: An open-source library advanced by its community and maintained by Evan You.
- User Interface Building: Used for constructing dynamic and interactive user interfaces in applications.
- Component-Based: Allows you to create reusable UI components for modular development.
- Virtual DOM: Optimizes rendering via the usage of a virtual representation of the DOM.
- Declarative Syntax: Describes the desired UI outcome, simplifying code and rendering.
- Efficient State Management: Provides mechanisms for managing state correctly.
- Unidirectional Data Flow: Data updates in a single direction, assisting traceability and data management.
Different Ways to Create a Vue.js App
Setting up Vue.js Using CDN links:
Setting up Vue.js using CDN links allows you to quickly start building Vue.js applications without the need for complex setup or build processes. CDN (Content Delivery Network) links provide a way to include Vue.js directly into your HTML file, making it accessible to your application.
CDN link:
"https://unpkg.com/vue@3/dist/vue.global.js
Example: This example shows the use of CDN link to run the VueJs application locally.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Vue.js CDN Example</title>
</head>
<style>
#app {
color: green;
font-size: x-large;
}
</style>
<body>
<div id="app">{{ message }}</div>
<script src=
"https://unpkg.com/vue@3/dist/vue.global.js">
</script>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
const message = ref('Hello GFG!')
return {
message
}
}
}).mount('#app')
</script>
</body>
</html>
Output:
output
Explanation:
- We create an HTML file with a <div> element with the id app, where our Vue.js app will be mounted.
- We include Vue.js library directly from the CDN using the <script> tag.
- We define our Vue.js app script within another <script> tag. This script creates a new Vue instance, binds it to the #app element, and defines a data property message with the value ‘Hello, Vue.js!’.
- The {{ message }} syntax in the HTML template interpolates the message data property into the paragraph element, displaying the message on the webpage.
- When you open this HTML file in a browser, you’ll see the message “Hello, Vue.js!” displayed on the webpage, demonstrating a Vue.js app set up using CDN links.
Steps to Setup the Vue.js App Using Vue CLI:
Step 1: Install Node.js from the official website.
Step 2: Open your terminal;
Step 3: Create a new Vue project by running:
npm create vue@latest
then select these option:
output
Step 4: Navigate to the project directory and Start the development server
cd vue-project
npm install
npm run dev
Step 5: Remove the code for the HomeView.vue and paste this.
JavaScript
// HomeView.vue
<script setup>
</script>
<template>
<main>
<div class="contact">
<h1>This is an Home page</h1>
<button @click='console.log("hello")'>
Click me</button>
</div>
</main>
</template >
Output:
Advantages of Vue.js
- Easy to Learn and Use: Vue.js has a gentle learning curve, making it accessible to beginners and experienced developers alike.
- Versatility and Flexibility: Vue.js can be used for building small to large-scale applications and offers flexibility in tooling and architecture choices.
- Performance: Vue.js provides efficient rendering with virtual DOM, resulting in better performance and faster updates.
- Active Community and Ecosystem: Vue.js has a large and active community of developers, providing support, resources, and a rich ecosystem of plugins and libraries.
- Incremental Adoption: Vue.js can be incrementally adopted into existing projects, allowing developers to integrate Vue.js features gradually without rewriting the entire application.
Disadvantages of Vue.js
- Smaller Ecosystem compared to React and Angular: Vue.js has a smaller ecosystem of tools, libraries, and resources compared to more established frameworks like React and Angular.
- Less Corporate Backing compared to React and Angular: Vue.js lacks the strong corporate backing of companies like Facebook (React) and Google (Angular), which may impact its adoption in large-scale projects.
- Rapidly Evolving, which may lead to some instability in early versions: Vue.js is continuously evolving, which may result in occasional instability or breaking changes in early versions of the framework.
Conclusion
Vue.js is a powerful and versatile JavaScript framework that offers simplicity, flexibility, and high performance. It provides developers with the tools they need to build modern and reactive web applications. By learning Vue.js, developers can enhance their skills and productivity, and build robust applications efficiently.
Share your thoughts in the comments
Please Login to comment...