Vue.js Introduction

Vue.js is a progressive JavaScript framework used for building user interfaces. Vue.js is designed to be incrementally adoptable, making it easy to integrate into existing projects. It focuses on the view layer and provides a flexible and efficient way to create interactive web applications.

Key Concepts:

Vue Instance:

• At the core of Vue.js is the Vue instance. You create a Vue instance by instantiating Vue and passing an options object that defines the data, methods, lifecycle hooks, and more.

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

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Hello, Vue!'
        }
    });
</script>
 

Data Binding:

• Vue provides two-way data binding between the model and the view. Use v-bind to bind an attribute or v-model for form input bindings.

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
 

Directives:

• Directives are special tokens in the markup that tell the library to do something to a DOM element. For example, v-for for rendering lists and v-if for conditional rendering.

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

Methods:

• You can define methods in the Vue instance to handle events or perform specific actions.

<div id="app">
    <button v-on:click="sayHello">Say Hello</button>
</div>

<script>
    new Vue({
        el: '#app',
        methods: {
            sayHello: function () {
                alert('Hello!');
            }
        }
    });
</script>
 

Components:

• Vue allows you to create reusable components with their own template, script, and style.

       

<div id="app">
    <my-component></my-component>
</div>

<script>
    Vue.component('my-component', {
        template: '<p>This is a custom component!</p>'
    });

    new Vue({
        el: '#app'
    });
</script>
 

Lifecycle Hooks:

• Vue provides several lifecycle hooks (e.g., created, mounted, updated, destroyed) that allow you to execute code at different stages of a component's lifecycle.