Vue Template Syntax

<template>
  <div>
    <!-- 1. Text interpolation with {{ }} -->
    <p>{{ message }}</p>
    <p>{{ 2 + 2 }}</p>
    <p>{{ message.toUpperCase() }}</p>
    <p>{{ isActive ? 'Yes' : 'No' }}</p>

    <!-- 2. v-html — render raw HTML (careful: XSS risk) -->
    <div v-html="rawHtml"></div>

    <!-- 3. v-bind — bind attribute to data (:shorthand) -->
    <img :src="imageUrl" :alt="imageAlt" />
    <a :href="url" :target="openInNew ? '_blank' : '_self'">Link</a>
    <button :disabled="isLoading">Submit</button>

    <!-- 4. Dynamic class binding -->
    <div :class="{ active: isActive, 'text-danger': hasError }"></div>
    <div :class="[baseClass, isActive ? 'active' : '']"></div>

    <!-- 5. Dynamic style binding -->
    <div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div>
    <div :style="[baseStyles, overrideStyles]"></div>

    <!-- 6. v-bind shorthand for object -->
    <input v-bind="inputAttrs" />
    <!-- same as: <input :type="inputAttrs.type" :placeholder="inputAttrs.placeholder" /> -->
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const message = ref('Hello, Vue!')
const rawHtml = ref('<strong>Bold text</strong>')
const imageUrl = ref('/images/photo.jpg')
const imageAlt = ref('A photo')
const url = ref('https://vuejs.org')
const openInNew = ref(true)
const isLoading = ref(false)
const isActive = ref(true)
const hasError = ref(false)
const baseClass = ref('card')
const textColor = ref('#42b883')
const fontSize = ref(16)
const baseStyles = reactive({ fontFamily: 'Arial' })
const overrideStyles = reactive({ fontWeight: 'bold' })
const inputAttrs = reactive({ type: 'email', placeholder: 'Enter email', required: true })
</script>