Introduction to Vue.js

A brief overview of core concepts in Vue.js.

Creating a Vue Application

You can create and mount a Vue application using Vue.createApp(). This function initializes the Vue instance and mounts it to a DOM element.

const app = Vue.createApp({
    // Options go here
});
app.mount('#app');

Data Function

The data() function is used to define the reactive data properties of your application. It returns an object containing the data.

data() {
    return {
        message: 'Hello, Vue!'
    };
}

Methods

methods is used to define functions that can be called within your Vue instance, often in response to user actions.

methods: {
    greet() {
        alert(this.message);
    }
}

Computed Properties

computed properties are used to derive new values from existing data. They are cached based on their dependencies.

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

Displaying Data

You can display data in your template using {{ data }} syntax. For example:

<div>
    <p>{{ message }}</p>
</div>

Two-Way Binding with v-model

The v-model directive creates two-way data binding on form input elements.

<input v-model="message" />

Event Handling

Use @click.prevent to attach functions to click events and prevent default behavior.

<button @click.prevent="greet">Greet</button>

Dynamic Styles with :style

Use :style to bind inline styles dynamically, often leveraging computed properties.

<div :style="{ color: isRed ? 'red' : 'blue' }">Hello</div>

Input Attributes

You can also set attributes like readonly or copy dynamically.

<input v-model="message" :readonly="isReadOnly" />

These are just some of the core concepts of Vue.js. With its reactive data binding and component-based architecture, Vue.js makes building interactive web applications simpler and more efficient.