Learning JS frameworks with me(part 3):Vue.js- The Progressive JavaScript Framework

I've been taking you along on my journey through JavaScript frameworks, and so far we've explored vanilla JavaScript, jQuery, angular.js. Today, we're diving into Vue.js—a framework that strikes a beautiful balance between simplicity and power. When I first encountered Vue, I was immediately drawn to its gentle learning curve and intuitive reactivity system. As someone who had worked extensively with jQuery, Vue felt like a natural evolution rather than a jarring paradigm shift. Let's explore what makes Vue special, why it's worth learning in 2025, and how to build your first Vue application. The Rise of Vue.js Vue.js was created by Evan You in 2014 while he was working at Google. Frustrated by the complexity of Angular but impressed by its data-binding capabilities, Evan set out to create something that combined the best parts of Angular with a lighter weight, more approachable API. What started as a personal project has grown into one of the most popular frontend frameworks in the world. Vue consistently ranks in the top 3 most-loved frontend frameworks in developer surveys, and powers everything from small personal websites to enterprise applications at companies like Alibaba, Xiaomi, and Adobe. Why Vue.js Matters in 2025 With so many frameworks to choose from, you might wonder why Vue deserves your attention. Here's why I believe Vue remains relevant and valuable: Progressive Architecture: Unlike some frameworks that require you to go all-in, Vue can be adopted incrementally. I've successfully integrated Vue into legacy jQuery codebases, adding reactivity one component at a time. Balanced Learning Curve: Vue strikes the perfect balance between simplicity and power. You can get started with basic directives and components, then gradually adopt more advanced features as you need them. Single-File Components: Vue's .vue files elegantly combine template, logic, and styling in one cohesive unit, making components easier to understand and maintain. Powerful Ecosystem: Vue Core, Vue Router, Vuex (or Pinia), and Vue DevTools form a complete ecosystem for building sophisticated applications. Strong Community: The Vue community is known for being welcoming and supportive, with excellent documentation and learning resources. Vue 3 Innovations: With the Composition API, improved TypeScript support, and performance enhancements, Vue 3 keeps the framework modern and competitive. Setting Up Your First Vue Project Let's get hands-on and build the same task application we created with vanilla JS and jQuery, but this time with Vue. We'll start with Vue's CDN version for simplicity, then mention how you'd set up a more robust project with Vue CLI or Vite. Step 1: Create Your Project Structure vue-project/ ├── index.html ├── css/ │ └── style.css └── js/ └── main.js Step 2: Set Up Your HTML File Vue Task List My Vue Task App Task List Add Task {{ option.label }} {{ task.text }} Delete Step 3: Use The Same CSS We'll continue using the same CSS from our previous examples to maintain visual consistency. This helps highlight the differences in the JavaScript approach rather than the styling. Step 4: Vue Magic in the JavaScript File Now, here's where Vue really shines. Let's write the JavaScript code to power our task manager: // js/main.js const { createApp, ref, computed, onMounted, watch } = Vue; const app = createApp({ setup() { // Reactive state with ref const newTask = ref(''); const tasks = ref([]); const currentFilter = ref('all'); const filterOptions = [ { label: 'All', value: 'all' }, { label: 'Active', value: 'active' }, { label: 'Completed', value: 'completed' } ]; // Load tasks from localStorage onMounted(() => { const savedTasks = JSON.parse(localStorage.getItem('tasks')) || []; tasks.value = savedTasks; }); // Watch for changes and save to localStorage watch(tasks, (newTasks) => { localStorage.setItem('tasks', JSON.stringify(newTasks)); }, { deep: true }); // Computed property for filtered tasks const filteredTasks = computed(() => { if (currentFilter.value === 'active') { return tasks.value.filter(task => !task.completed); } else if (currentFilter.value === 'completed') { return

Mar 30, 2025 - 11:02

Learning JS frameworks with me(part 3):Vue.js- The Progressive JavaScript Framework

I've been taking you along on my journey through JavaScript frameworks, and so far we've explored vanilla JavaScript, jQuery, angular.js. Today, we're diving into Vue.js—a framework that strikes a beautiful balance between simplicity and power.

When I first encountered Vue, I was immediately drawn to its gentle learning curve and intuitive reactivity system. As someone who had worked extensively with jQuery, Vue felt like a natural evolution rather than a jarring paradigm shift.

Let's explore what makes Vue special, why it's worth learning in 2025, and how to build your first Vue application.

The Rise of Vue.js

Vue.js was created by Evan You in 2014 while he was working at Google. Frustrated by the complexity of Angular but impressed by its data-binding capabilities, Evan set out to create something that combined the best parts of Angular with a lighter weight, more approachable API.

What started as a personal project has grown into one of the most popular frontend frameworks in the world. Vue consistently ranks in the top 3 most-loved frontend frameworks in developer surveys, and powers everything from small personal websites to enterprise applications at companies like Alibaba, Xiaomi, and Adobe.

Why Vue.js Matters in 2025

With so many frameworks to choose from, you might wonder why Vue deserves your attention. Here's why I believe Vue remains relevant and valuable:

Progressive Architecture: Unlike some frameworks that require you to go all-in, Vue can be adopted incrementally. I've successfully integrated Vue into legacy jQuery codebases, adding reactivity one component at a time.
Balanced Learning Curve: Vue strikes the perfect balance between simplicity and power. You can get started with basic directives and components, then gradually adopt more advanced features as you need them.
Single-File Components: Vue's .vue files elegantly combine template, logic, and styling in one cohesive unit, making components easier to understand and maintain.
Powerful Ecosystem: Vue Core, Vue Router, Vuex (or Pinia), and Vue DevTools form a complete ecosystem for building sophisticated applications.
Strong Community: The Vue community is known for being welcoming and supportive, with excellent documentation and learning resources.
Vue 3 Innovations: With the Composition API, improved TypeScript support, and performance enhancements, Vue 3 keeps the framework modern and competitive.

Setting Up Your First Vue Project

Let's get hands-on and build the same task application we created with vanilla JS and jQuery, but this time with Vue. We'll start with Vue's CDN version for simplicity, then mention how you'd set up a more robust project with Vue CLI or Vite.

Step 1: Create Your Project Structure

vue-project/
├── index.html
├── css/
│   └── style.css
└── js/
    └── main.js

Step 2: Set Up Your HTML File


 lang="en">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    </span>Vue Task List<span class="nt">
     rel="stylesheet" href="css/style.css">
    
    


    
        My Vue Task App
    

    
         class="todo-app">
             id="app">
                Task List
                 @submit.prevent="addTask">
                     type="text" v-model="newTask" placeholder="Add a new task..." required>
                     type="submit">Add Task
                

                 v-if="tasks.length > 0" class="filter-controls">
                     
                        v-for="option in filterOptions" 
                        :key="option.value"
                        @click="currentFilter = option.value"
                        :class="['filter-btn', { active: currentFilter === option.value }]"
                    >
                        {{ option.label }}



                 id="task-list">
                     v-for="task in filteredTasks" :key="task.id" :data-id="task.id">
                         
                            :class="{ completed: task.completed }"
                            @click="toggleTask(task)"
                        >
                            {{ task.text }}
                        
                         class="delete-btn" @click="deleteTask(task.id)">Delete