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.
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.
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 likesrc
,href
, and class names. - 🔄 Dynamically updating attributes based on Vue instance data.
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
andv-else
. - 👁️ Using
v-show
as an alternative for toggling visibility without removing elements from the DOM.
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.
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.
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.
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.