Important 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">
w3wiki
</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>
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?
- How to set up VueJS and create a VueJS project?
- Important concepts of VueJS
- Creating a simple notes app using VueJS
- VueJS FAQs
Contact Us