VUEJS 3 POUR DÉBUTANTS EN 40 MINUTES ⏱️

Introduction

This tutorial is designed for beginners who want to learn Vue.js, a popular JavaScript framework for building user interfaces. In this guide, you will follow a structured approach to create a Vue.js project from scratch, covering essential concepts such as components, reactivity, and event handling. By the end, you'll have a foundational understanding of Vue.js and be ready to build your own web applications.

Step 1: Install the Project

To start working with Vue.js, you first need to set up your development environment.

1. Install Node.js: Ensure you have Node.js installed on your machine. You can download it from the official website.
2. Install Vue CLI: Open your terminal and run the following command to install the Vue CLI globally:

   npm install -g @vue/cli
   

3. Create a New Vue Project: Use the Vue CLI to create a new project. In your terminal, run:

   vue create my-vue-app
   

   You will be prompted to select features; choose the default preset for a basic setup.
4. Navigate to Your Project Directory:

   cd my-vue-app
   

Step 2: Set Up Project Structure

Understanding the structure of a Vue.js project is crucial for effective development.

• Main Files and Folders:
  • src/: Contains your application code.
  • main.js: The entry point of your application.
  • App.vue: The root component of your application.
  • components/: A folder to store your Vue components.

Step 3: Options vs Composition API

Vue.js offers two main ways to define components: Options API and Composition API.

• Options API: Uses a straightforward object-based syntax. Each component has options like data, methods, and computed.
• Composition API: Introduced in Vue 3, it allows for more flexibility and reusability. Use setup() function to organize logic inside components.

Step 4: Create Your First Vue Component

Creating components is fundamental in Vue.js.

1. Create a New Component: In the components/ folder, create a file named MyComponent.vue.
2. Define the Component Structure:

   <template>
     <div>
       <h1>Hello from MyComponent!</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: "MyComponent"
   }
   </script>
   

3. Import and Use Component: In App.vue, import and use your new component:

   <template>
     <div id="app">
       <MyComponent />
     </div>
   </template>
   
   <script>
   import MyComponent from './components/MyComponent.vue';
   
   export default {
     components: {
       MyComponent
     }
   }
   </script>
   

Step 5: Understand Props

Props allow you to pass data between components.

1. Define Props in Child Component:

   <script>
   export default {
     name: "MyComponent",
     props: {
       message: String
     }
   }
   </script>
   

2. Pass Props from Parent Component:

   <MyComponent message="Hello from Parent!" />
   

Step 6: Learn Reactivity with Ref and Reactive

Reactivity is a core feature of Vue.js.

• Using ref: For primitive data types:

  import { ref } from 'vue';
  
  setup() {
    const count = ref(0);
    return { count };
  }
  

• Using reactive: For objects:

  import { reactive } from 'vue';
  
  setup() {
    const state = reactive({ count: 0 });
    return { state };
  }
  

Step 7: Implement Conditional Rendering and Event Handling

Control the display of components based on application state.

• Conditional Rendering:

  <template>
    <div>
      <p v-if="isVisible">Content is visible</p>
    </div>
  </template>
  

• Event Handling:

  <button @click="increment">Increase Count</button>
  

Step 8: Explore Slots

Slots allow for flexible component design and reusability.

• Define a Slot in Your Component:

  <template>
    <div>
      <slot></slot>
    </div>
  </template>
  

• Use Slots in Parent Component:

  <MyComponent>
    <p>This will be inserted into the slot</p>
  </MyComponent>
  

Step 9: Use Class and Style Bindings

Bind CSS classes and styles dynamically to your components.

• Class Binding:

  <div :class="{ active: isActive }"></div>
  

• Style Binding:

  <div :style="{ color: activeColor }"></div>
  

Step 10: Computed Properties

Use computed properties for derived state.

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  }
}

Step 11: Watchers

Watchers allow you to react to data changes.

watch: {
  count(newValue) {
    console.log(`Count changed to: ${newValue}`);
  }
}

Step 12: Emit Events

Components can communicate via events.

• Emit an Event from Child:

  this.$emit('myEvent', data);
  

• Listen to Event in Parent:

  <MyComponent @myEvent="handleEvent" />
  

Conclusion

Congratulations! You've learned the basics of Vue.js, including installation, component creation, props, reactivity, and event handling. With this foundational knowledge, you're ready to dive deeper into Vue.js and start building your own applications. Next steps could include exploring advanced features, integrating with APIs, or learning about Vue Router for single-page applications. Happy coding!