Vue Ui : A Step-by-Step Guide
Here is Vue Ui: A Step-by-Step Guide, Vue js is a simple-to-use JavaScript framework that aims to make the process of creating interactive web applications simpler. As a newbie or a seasoned developer, Vue allows you to develop dynamic user interfaces easily.
What is Vue Js | Vue Ui?
Vue.js is an emerging JavaScript framework employed for front-end development. It enables easy development of interactive user interfaces using interactive data binding and component-based organization.
Why use Vue js?
- Vue.js boasts a straightforward architecture and is straightforward to learn.
- Offers interactive data binding for the interface to be updated instantly.
- Assists in the organization of code via reusable components.
- Light and fast in performance, well-suited for contemporary app development.
How to install Vue.js in your project
To start quickly, you can include Vue.js via a CDN, without the necessity of complicated installation or configuration.
Vue Ui
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js App</title>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello, Vue.js!'
};
}
});
app.mount('#app');
</script>
</body>
</html>More Vue.js Features
Vue.js has numerous advanced features that make application development more powerful. Among the fundamental concepts are:
- v-if – Applied to conditionally render elements in the DOM.
- v-for – Facilitates repeating elements in lists.
- Vue components – Enables breaking down the user interface into chunks that can be reused.
- Vue directives – Enables dynamic properties to be bound in a customizable manner.
1. Parent Component (App.vue)
Vue Ui
<script setup>
import { ref, computed, watch, onMounted } from 'vue';
import TodoItem from './TodoItem.vue';
// Reactive state
const newTodo = ref('');
const todos = ref([
{ id: 1, text: 'Learn Vue.js', completed: false },
{ id: 2, text: 'Build a cool project', completed: false }
]);
// Computed property: count remaining tasks
const remainingTasks = computed(() => todos.value.filter(todo => !todo.completed).length);
// Watcher: Log when todos change
watch(todos, (newVal) => {
console.log('Todos updated:', newVal);
}, { deep: true });
// Lifecycle hook: Load tasks from local storage
onMounted(() => {
const savedTodos = localStorage.getItem('todos');
if (savedTodos) {
todos.value = JSON.parse(savedTodos);
}
});
// Methods
const addTodo = () => {
if (newTodo.value.trim() === '') return;
todos.value.push({ id: Date.now(), text: newTodo.value, completed: false });
newTodo.value = '';
saveToLocalStorage();
};
const removeTodo = (id) => {
todos.value = todos.value.filter(todo => todo.id !== id);
saveToLocalStorage();
};
const toggleComplete = (id) => {
const todo = todos.value.find(todo => todo.id === id);
if (todo) {
todo.completed = !todo.completed;
saveToLocalStorage();
}
};
const saveToLocalStorage = () => {
localStorage.setItem('todos', JSON.stringify(todos.value));
};
</script>
<template>
<div class="app">
<h1>Vue 3 Todo List</h1>
<p>Remaining Tasks: {{ remainingTasks }}</p>
<input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new task" />
<button @click="addTodo">Add</button>
<ul>
<TodoItem
v-for="todo in todos"
:key="todo.id"
:todo="todo"
@remove="removeTodo"
@toggle="toggleComplete"
/>
</ul>
</div>
</template>
<style scoped>
.app {
text-align: center;
max-width: 400px;
margin: auto;
}
input {
padding: 5px;
margin-right: 5px;
}
button {
padding: 5px 10px;
}
</style>
2. Child Component (TodoItem.vue)
<script setup>
import { defineProps, defineEmits } from 'vue';
// Props (Received from parent)
const props = defineProps({
todo: Object
});
// Events (Emit actions back to parent)
const emit = defineEmits(['remove', 'toggle']);
</script>
<template>
<li>
<input type="checkbox" :checked="todo.completed" @change="emit('toggle', todo.id)" />
<span :class="{ completed: todo.completed }">{{ todo.text }}</span>
<button @click="emit('remove', todo.id)">❌</button>
</li>
</template>
<style scoped>
li {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px;
border-bottom: 1px solid #ccc;
}
.completed {
text-decoration: line-through;
color: gray;
}
button {
background: none;
border: none;
cursor: pointer;
}
</style>
The main features are used In Vue Js
✅ Answer: Ref for State Management ()
✅ Lifestyle hook: to load on a
✅ Calculation properties: Remains to count the remaining incomplete todos
✅ Clock: Inspection of TODOs changes and stores local storage
✅ props and events: Communication of parent-child with emit ()
✅ track: Not used here but can be added for customization
Do you want to add me to more Vue.JS facilities or another example?
Conclusion
Vue.js is an efficient and lightweight front-end framework that enables developers to easily build dynamic and interactive web applications. By understanding core concepts like reactivity, event handling, and component architecture, you can create professional web applications.
Begin your journey with Vue.js today, and begin building robust and responsive web applications.
