/Getting-started-with-Vue.JS

Primary LanguageJavaScript

🌟 Getting Started with Vue.js

Introduction

This repository contains my journey of learning Vue.js. Vue.js is a progressive JavaScript framework used for building user interfaces. The lessons I followed are part of a structured course, and this README provides an overview of what I learned and how I applied it.

Lessons Overview

📦 Lesson 2 - Creating the Vue Application

In this lesson, I learned how to create a new Vue application. The steps involved setting up the development environment and initializing a Vue project using Vue CLI.

Key Points:

  • 📥 Installing Vue CLI globally using npm.
  • 🏗️ Creating a new Vue project with vue create my-project.
  • 🗂️ Understanding the project structure and configuration files.

🔗 Lesson 3 - Attribute Binding

This lesson focused on attribute binding in Vue. I learned how to dynamically bind HTML attributes to Vue data properties using the v-bind directive.

Key Points:

  • 📎 Using v-bind to bind HTML attributes like src, href, and class names.
  • 🔄 Dynamically updating attributes based on Vue instance data.

🔄 Lesson 4 - Conditional Rendering

Conditional rendering was covered in this lesson. I learned how to conditionally render elements in the DOM using the v-if, v-else-if, and v-else directives.

Key Points:

  • 👀 Conditionally displaying elements with v-if and v-else.
  • 👁️ Using v-show as an alternative for toggling visibility without removing elements from the DOM.

📋 Lesson 5 - List Rendering

In this lesson, I learned about rendering lists of items using the v-for directive. This included iterating over arrays and objects.

Key Points:

  • 🔁 Using v-for to loop through arrays and objects.
  • 📃 Displaying list data dynamically and understanding the importance of unique keys for list items.

🎛️ Lesson 6 - Event Handling

Event handling in Vue was the focus of this lesson. I learned how to listen for and respond to user events using the v-on directive.

Key Points:

  • 🖱️ Binding event listeners to DOM events like click, submit, etc.
  • 🛠️ Methods to handle events and pass event data.

🎨 Lesson 7 - Class and Style Binding

This lesson covered class and style binding. I learned how to bind CSS classes and inline styles dynamically based on Vue instance data.

Key Points:

  • 🎭 Binding classes dynamically with v-bind:class.
  • 🎨 Binding inline styles dynamically with v-bind:style.
  • 🖍️ Conditional class and style binding based on data properties.

🧮 Lesson 8 - Computed Properties

In this lesson, I learned about computed properties in Vue. Computed properties are used to derive data that depends on other data.

Key Points:

  • 🧠 Defining computed properties and using them in templates.
  • ⚖️ Understanding the difference between computed properties and methods.
  • 🚀 Caching computed properties for performance optimization.