Vue Templates

Understanding Vue's template syntax

📝 What are Vue Templates?

Vue templates use HTML-based syntax to bind data to the DOM. Templates are compiled into optimized JavaScript render functions, making your apps fast and reactive. 


<div id="app">
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
</div>

<script src="https://unpkg.com/vue@3"></script>
<script>
    Vue.createApp({
        data() {
            return {
                title: 'Vue Templates',
                message: 'Easy to understand!'
            }
        }
    }).mount('#app')
</script>

Template Syntax Features

{{ }}

Text Interpolation

Display data using double curly braces 

<p>{{ message }}</p>
v-

Directives

Special attributes with v- prefix 

<p v-if="show">Visible</p>
@

Event Handling

Listen to DOM events with @ 

<button @click="doSomething">
:

Attribute Binding

Bind attributes dynamically with : 

<img :src="imageUrl">

🔹 Text Interpolation

The most basic form of data binding is text interpolation using double curly braces. Vue replaces the mustache tags with the corresponding data values. 

<div id="app">
    <h2>{{ heading }}</h2>
    <p>User: {{ username }}</p>
    <p>Age: {{ age }}</p>
    <p>{{ firstName }} {{ lastName }}</p>
</div>

<script src="https://unpkg.com/vue@3"></script>
<script>
    Vue.createApp({
        data() {
            return {
                heading: 'User Profile',
                username: 'john_doe',
                age: 25,
                firstName: 'John',
                lastName: 'Doe'
            }
        }
    }).mount('#app')
</script>

Output:

User Profile

User: john_doe

Age: 25

John Doe

🔹 Raw HTML with v-html

To output real HTML, use the v-html directive. Be careful with user-generated content to avoid XSS attacks. 

<div id="app">
    <p>Plain text: {{ rawHtml }}</p>
    <p>HTML output: <span v-html="rawHtml"></span></p>
</div>

<script src="https://unpkg.com/vue@3"></script>
<script>
    Vue.createApp({
        data() {
            return {
                rawHtml: '<strong style="color: red;">Bold Red Text</strong>'
            }
        }
    }).mount('#app')
</script>

Output:

Plain text: <strong style="color: red;">Bold Red Text</strong>

HTML output: Bold Red Text

🔹 Attribute Binding with v-bind

Use v-bind (or shorthand :) to dynamically bind attributes. This works with any HTML attribute like id, class, src, href, etc. 

<div id="app">
    <img v-bind:src="imageSrc" v-bind:alt="imageAlt" width="100">
    <a :href="link">{{ linkText }}</a>
    <button :disabled="isDisabled">Submit</button>
</div>

<script src="https://unpkg.com/vue@3"></script>
<script>
    Vue.createApp({
        data() {
            return {
                imageSrc: '/placeholder.svg?height=100&width=100',
                imageAlt: 'Vue Logo',
                link: 'https://vuejs.org',
                linkText: 'Visit Vue.js',
                isDisabled: false
            }
        }
    }).mount('#app')
</script>

Output:

Visit Vue.js

🔹 JavaScript Expressions

Vue templates support JavaScript expressions inside data bindings. You can use operators, ternary expressions, and method calls. 

<div id="app">
    <p>{{ number + 1 }}</p>
    <p>{{ ok ? 'YES' : 'NO' }}</p>
    <p>{{ message.split('').reverse().join('') }}</p>
    <p>Total: {{ price * quantity }}</p>
</div>

<script src="https://unpkg.com/vue@3"></script>
<script>
    Vue.createApp({
        data() {
            return {
                number: 5,
                ok: true,
                message: 'Hello',
                price: 10,
                quantity: 3
            }
        }
    }).mount('#app')
</script>

Output:

6

YES

olleH

Total: 30

🔹 Conditional Rendering

Use v-if, v-else-if, and v-else directives to conditionally render elements based on data values. 

<div id="app">
    <p v-if="score >= 90">Grade: A</p>
    <p v-else-if="score >= 80">Grade: B</p>
    <p v-else-if="score >= 70">Grade: C</p>
    <p v-else>Grade: F</p>
    
    <button @click="score += 10">Increase Score</button>
    <p>Current Score: {{ score }}</p>
</div>

<script src="https://unpkg.com/vue@3"></script>
<script>
    Vue.createApp({
        data() {
            return {
                score: 75
            }
        }
    }).mount('#app')
</script>

Output:

Grade: C

Current Score: 75

🔹 List Rendering with v-for

The v-for directive renders lists by iterating over arrays or objects. Always use a unique :key when rendering lists. 

<div id="app">
    <h3>Fruits:</h3>
    <ul>
        <li v-for="(fruit, index) in fruits" :key="index">
            {{ index + 1 }}. {{ fruit }}
        </li>
    </ul>
</div>

<script src="https://unpkg.com/vue@3"></script>
<script>
    Vue.createApp({
        data() {
            return {
                fruits: ['Apple', 'Banana', 'Orange', 'Mango']
            }
        }
    }).mount('#app')
</script>

Output:

Fruits:

  • 1. Apple
  • 2. Banana
  • 3. Orange
  • 4. Mango

🧠 Test Your Knowledge

What syntax is used for text interpolation in Vue?