Template Interpolation

Interpolation allows inserting dynamic data directly into the DOM structure. It utilizes double curly braces {{ }} containing a JavaScript expression. These expressions have access to all properties defined within the component's data object.

Directives

Directives are special attributes with the v- prefix used to reactively apply side effects to the DOM. They handle attributes, content rendering, and event bindings.

Data Binding Strategies

• One-Way Binding (v-bind): Data flows strictly from the data model to the view. Changes in the model update the view, but user input in the view does not update the model. The shorthand for v-bind is :.
  • Example: :src="imageUrl"
• Two-Way Binding (v-model): Data flows in both directions between the model and the view. This is typically restricted to form input elements (such as <input>, <textarea>, or <select>). v-model implicitly binds to the element's value property. Therefore, v-model:value="text" can be shortened to v-model="text".

Data Proxying

Vue employs a data proxy mechanism where properties defined in data are proxied to the Vue instance (vm). This allows direct access to properties (e.g., vm.name) rather than vm._data.name.

Conceptual Example:

const source = { x: 10 };
const proxy = {};

Object.defineProperty(proxy, 'x', {
    get() {
        return source.x;
    },
    set(val) {
        source.x = val;
    }
});

Methods and Event Handling

Methods are defined in the methods block. Unlike data properties which are proxied, methods are directly mounted onto the Vue instance.

Event listeners are registered using v-on or its shorthand @.

Basic Event Example:

<div id="root">
    <h2>{{ title }}</h2>
    <button @click="handleClick">Click Me</button>
</div>

<script>
    new Vue({
        el: '#root',
        data: {
            title: 'Hello World'
        },
        methods: {
            handleClick(e) {
                console.log(e.target.innerHTML);
            }
        }
    });
</script>

Passing Arguments with Events

When listening to events, you can pass custom arguments alongside the native Event object.

Argument Handling Example:

<div id="root">
    <button @click="sendAlert(123, $event)">Send Data</button>
</div>

<script>
    new Vue({
        el: '#root',
        methods: {
            sendAlert(id, event) {
                console.log('ID:', id, 'Event:', event);
            }
        }
    });
</script>

Event Modifiers

Vue provides modifiers to handle common event concerns without menual JavaScript.

• .prevent: Calls event.preventDefault().
• .stop: Calls event.stopPropagation().
• .once: The event will be triggered only once.
• Chaining: @click.stop.prevent="handler"

Key Modifiers

You can listen for specific keyboard keys using modifiers like .enter, .esc, .delete, or specific key codes.

• Example: @keyup.enter="submitForm"

Computed Properties

Computed property are functions that return a value. They are cached based on their reactive dependencies. You access them as properties (without parentheses) in the template.

computed: {
    fullName() {
        return this.firstName + ' ' + this.lastName;
    }
}

Watch Properties

Watchers allow performing asynchronous or expensive operasions in response to data changes.

watch: {
    searchQuery: {
        immediate: true, // Execute handler immediately on init
        deep: true,      // Watch for nested property changes
        handler(newVal, oldVal) {
            console.log(`Changed from ${oldVal} to ${newVal}`);
        }
    }
}