1. What is Vue.js?

Vue.js is an open-source, front-end JavaScript framework created by Evan You in 2014. Unlike other JavaScript frameworks like Angular and React, Vue is designed to be incrementally adoptable. This means you can use it for small parts of your project or scale it up to build large-scale applications.

Key Features of Vue.js:

• Reactive Data Binding: Vue provides two-way data binding, making it easy to synchronize the state of the UI with the data.
• Component-Based Architecture: Vue allows you to break down your application into smaller, reusable components.
• Directives: Vue provides powerful directives like v-if, v-for, v-bind, v-model, and more, to make the development process easier.
• Vue Router: Vue has a powerful router system to manage navigation in single-page applications.
• Vuex: Vuex is a state management library for managing the state of an application.

2. Setting Up Vue.js

To start using Vue.js in your project, follow these simple steps:

Step 1: Install Vue CLI

The Vue CLI helps you quickly create and manage Vue.js projects.

1. Install Node.js (if you don’t have it already) from nodejs.org.
2. Install the Vue CLI globally using npm:

npm install -g @vue/cli

Step 2: Create a Vue Project

After the Vue CLI is installed, you can create a new Vue project:

This command will prompt you to choose a preset for your project. For now, you can choose the default settings.

Step 3: Run Your Project

Navigate into your project folder and start the development server:

cd my-vue-project
npm run serve

3. Vue.js App Structure

When you create a new Vue project, the default project structure looks like this:

my-vue-project/
 ├── node_modules/
 ├── public/
 │    ├── index.html
 ├── src/
 │    ├── assets/
 │    ├── components/
 │    ├── App.vue
 │    ├── main.js
 ├── package.json
 ├── vue.config.js

• public/index.html: The main HTML file of your application.
• src/main.js: The entry point for your Vue app, where Vue is initialized.
• src/App.vue: The root component of your Vue application.
• src/components/: Folder where all your Vue components reside.

4. Creating Your First Vue Component

Vue applications are built using components. A component is a reusable building block that encapsulates HTML, JavaScript, and CSS.

Step 1: Create a New Component

1. Inside the src/components/ directory, create a new file called HelloWorld.vue.

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
    <p>Welcome to Vue.js!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js!'
    };
  }
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

Step 2: Use the Component in App.vue

To use this component, you need to import it into App.vue and include it in the template.

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
}
</style>

5. Vue.js Directives

Vue.js provides special attributes called directives to make it easier to manipulate the DOM and interact with data.

Common Vue Directives:

• v-bind: Binds an attribute to an expression.
• v-if: Conditionally renders elements.
• v-for: Loops through an array and renders elements.
• v-model: Creates two-way data binding for form inputs.

Example of v-if and v-for:

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>

    <button v-if="showButton" @click="toggleButton">Toggle Button</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Vue.js' },
        { id: 2, name: 'React.js' },
        { id: 3, name: 'Angular.js' }
      ],
      showButton: true
    };
  },
  methods: {
    toggleButton() {
      this.showButton = !this.showButton;
    }
  }
};
</script>

In the example above:

• v-for is used to loop through an array of items and render each item as a list element.
• v-if conditionally renders a button depending on the value of showButton.

6. Vue.js Two-Way Data Binding

One of the core features of Vue.js is two-way data binding, which means the UI and the data are automatically synchronized. This is done using the v-model directive.

Example of v-model:

<template>
  <div>
    <input v-model="inputText" placeholder="Type something">
    <p>You typed: {{ inputText }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: ''
    };
  }
};
</script>