Getting Started with VueJS
VueJS is a JavaScript framework for creating user interfaces. Vue.js, often simply referred to as Vue, is known for its simplicity and flexibility. Vue has gained widespread popularity among developers for its ease of integration. Vuejs is also used for single-page web applications, the same as ReactJS.
Table of Content
What is VueJs?
It's a JavaScript framework that makes it easy to build web interfaces. With VueJS, you can create dynamic and interactive elements on your website without hard work. It's user-friendly and flexible, making it a great choice for both beginners and experienced developers. This can be used in many different ways:
- Creating dynamic HTML
- Single page application
- Server-side rendering
- Used for mobile, desktop or terminal
How to set up VueJS and create a VueJS project?
You can follow the below steps to setup and create a VueJS project:
Step 1: Install nodejs from nodejs.org
Step 2: Install dependencies using the below npm command.
npm install -g @vue/cliStep 3: Create and visit your VueJS project
vue create your_project_name
cd your-project-name
Step 4: Run the node server to run the code
npm run serveImportant concepts of VueJS
Data Binding
It will make sure that your data whenever changes, will make visible to user interface. Whenever anyone type anything in the input box it will refleceted on the screen and visible to the user.
<template>
<div>
<h1 style="color: green">
GeeksforGeeks
</h1>
<input v-model="userInput"
placeholder="Type your message" />
<p>{{ userInput }}</p>
</div>
</template>
<script>
export default {
data() {
return {
userInput: '',
};
},
};
</script>
Component and props
Your web page is created using many different components. It is piece of code, which can be used multiple time and not have to define again and again.
<!-- ParentComponent.vue -->
<template>
<div>
<h1>
{{ parentMessage }}
</h1>
<ChildComponent :childProp="parentMessage" />
</div>
</template>
<script>
import ChildComponent from
'./ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
parentMessage:
'Hello from Parent!',
};
},
};
</script>
<!-- ChildComponent.vue -->
<template>
<div>
<p>
{{ childProp }}
</p>
</div>
</template>
<script>
export default {
props: ['childProp'],
};
</script>
Directives
These are like commands for VueJS. It start from 'v-' and tell VueJS to do something. Example v-if decides whether to show or hide an element.
<template>
<div>
<p v-if="showMessage">
This message is visible if showMessage is true.
</p>
<ul>
<li v-for="item in items">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
showMessage: true,
items: ['Item 1', 'Item 2', 'Item 3'],
};
},
};
</script>
Computed Properties
Computed properties in Vue.js enable the creation of reactive properties based on other data properties.
<template>
<div>
<input v-model="inputText"
placeholder="Type your message" />
<p>
Message length:
{{ messageLength }}
</p>
</div>
</template>
<script>
export default {
data() {
return {
inputText: '',
};
},
computed: {
messageLength() {
return this.
inputText.length;
},
},
};
</script>
Vue Routes
Vue Router facilitates navigation and the creation of Single Page Applications (SPAs). Also run a command to install the vue-router.
npm install vue-router// main.js file
import { createApp } from 'vue';
import App from './App.vue';
import { createRouter, createWebHistory } from 'vue-router';
import HomePage from './HomePage.vue';
import AboutPage from './AboutPage.vue';
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
component: HomePage
},
{
path: '/about',
component: AboutPage
}
]
});
createApp(App).use(router).mount('#app');
<!-- HomePage.vue -->
<template>
<div>
<h1>
Welcome to the Home Page
</h1>
<p>
This is the home page content.
</p>
</div>
</template>
<script>
export default {
name: 'HomePage',
};
</script>
<style scoped>
/* Add scoped styles here if needed */
</style>
<!-- AboutPage.vue -->
<template>
<div>
<h1>
About Us
</h1>
<p>
This is the about page content.
</p>
</div>
</template>
<script>
export default {
name: 'AboutPage',
};
</script>
<style scoped>
/* Add scoped styles here if needed */
</style>
<!-- App.vue -->
<template>
<div id="app">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
};
</script>
<style>
#app {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 20px;
}
</style>
Creating a simple notes app using VueJS
It is a simple notes taking or ToDo application which allows you to add as well as delete the items. You can create an task you have to do in future and delete it once you have complete it.
Example: The below VueJS code will help you in creating the simple notes taking app.
<!-- App.vue -->
<template>
<div id="app">
<h2 style="text-align: center;">
A Simple Notes App using VueJS
</h2>
<div class="input-container">
<input v-model="newNote"
placeholder="Type your note" />
<button @click="addNote">
Add Note
</button>
</div>
<NoteTaking v-for="note in notes" :key="note.id"
:note="note" @delete="deleteNote" />
</div>
</template>
<script>
import NoteTaking from './NoteTaking.vue';
export default {
components: {
NoteTaking,
},
data() {
return {
newNote: '',
notes: [],
nextNoteId: 1,
};
},
methods: {
addNote() {
if (this.newNote.trim() === '') return;
this.notes.push({
id: this.nextNoteId++,
text: this.newNote
});
this.newNote = '';
},
deleteNote(noteId) {
this.notes = this.notes.
filter((note) => note.id !== noteId);
},
},
};
</script>
<style>
#app {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.input-container {
margin-bottom: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.input-container input {
flex-grow: 1;
padding: 10px;
margin-right: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.input-container button {
background-color: #3498db;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 3px;
cursor: pointer;
}
.input-container button:hover {
background-color: #2980b9;
}
</style>
<!-- NoteTaking.vue -->
<template>
<div class="note">
<p>{{ note.text }}</p>
<button @click="deleteNote">
Delete
</button>
</div>
</template>
<script>
export default {
props: ['note'],
methods: {
deleteNote() {
this.$emit('delete', this.note.id);
},
},
};
</script>
<style scoped>
.note {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #f9f9f9;
margin-bottom: 15px;
padding: 15px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.note p {
margin: 0;
}
.note button {
background-color: #e74c3c;
color: #fff;
border: none;
padding: 8px 15px;
border-radius: 3px;
cursor: pointer;
}
.note button:hover {
background-color: #c0392b;
}
</style>
Output:
