Day 1: Introduction to Vue.js and Basic Setup

Morning:

1. Introduction to Vue.js

What is Vue.js?
- Vue.js is a progressive framework used to build user interfaces and single-page applications.
- It focuses on the view layer, making it easy to integrate with other libraries or existing projects.
Core Concepts:
- Components: Reusable UI building blocks.
- Directives: Tokens in the markup that tell Vue’s compiler how to associate attributes with expressions (e.g., v-if, v-for).
- Reactivity: When data changes, the view updates automatically.

2. Setting up the Development Environment:

Installing Node.js:
1. Go to Node.js official website and download the latest stable version.
2. Install it using the given instructions.
Vue CLI Installation:

//Install node 🦁👑
npm install -g @vue/cli
//Create new Project in vue
vue create day1-sample
cd day1-sample

Afternoon:

1. Vue Component Basics:

Understanding the Vue Instance:
- Each Vue component is an instance of Vue.
- It has properties like data, methods, and lifecycle hooks.

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

In your HTML

<div id="app">
  {{ message }}
</div>

Data, Methods, and Computed Properties:

new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    increment: function() {
      this.count++;
    }
  },
  computed: {
    doubleCount: function() {
      return this.count * 2;
    }
  }
});

In your HTML

<div id="app">
  <p>Count: {{ count }}</p>
  <p>Double Count: {{ doubleCount }}</p>
  <button @click="increment">Increment</button>
</div>

2. Data Binding and Directives:

v-model: Two-way data binding for form input.

<input v-model="message">

v-for: Rendering a list by iterating over an array.

<ul>
  <li v-for="item in items">{{ item.text }}</li>
</ul>

FULL CODE

2. Implement the sample:

App.vue:

Replace the content of src/App.vue with:

<template>
  <div id="app">
    <header>
      <h1>{{ message }}</h1>
    </header>

    <section>
      <input v-model="newItem" @keyup.enter="addItem" placeholder="Add a new item..." />
      <ul>
        <li v-for="item in items" :key="item.id">
          {{ item.text }}
          <button @click="removeItem(item.id)">Remove</button>
        </li>
      </ul>

      <div v-if="items.length === 0">No items added yet.</div>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Day 1 Vue Sample App',
      newItem: '',
      items: [],
      nextId: 1
    };
  },
  methods: {
    addItem() {
      if (this.newItem.trim() === '') return;

      this.items.push({
        id: this.nextId,
        text: this.newItem.trim()
      });

      this.newItem = '';
      this.nextId++;
    },
    removeItem(id) {
      this.items = this.items.filter(item => item.id !== id);
    }
  }
};
</script>

<style>
/* Simple styling for better visualization */
header {
  background-color: #4CAF50;
  color: white;
  text-align: center;
  padding: 1rem 0;
}

section {
  max-width: 500px;
  margin: 2rem auto;
  border: 1px solid #ccc;
  padding: 1rem;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
}

button {
  background-color: #f44336;
  color: white;
  border: none;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 5px;
}

button:hover {
  background-color: #d32f2f;
}
</style>

This app consists of a simple list. You can add items to the list and remove them. It demonstrates:

Data binding with v-model
List rendering with v-for
Event handling with @click and @keyup.enter
Conditional rendering with v-if

3. Run the App:

In the terminal:

npm run serve

You can clone this repo and continue your tutorial, https://github.com/LeoReyesDev/vue-tutorial happy coding 🙂