Vue Syntax and Templates

<script setup>
import { ref } from &#039;vue'
const name = ref(&#039;Alice')
const score = ref(95)
const isAdmin = ref(true)
const html = ref(&#039;<strong>Bold text</strong>')
</script>

<template>
  <!-- Basic interpolation -->
  <h1>{{ name }}</h1>

  <!-- Expressions inside {{ }} -->
  <p>Grade: {{ score >= 90 ? &#039;A+' : score >= 80 ? 'A' : 'B' }}</p>
  <p>Name length: {{ name.length }}</p>
  <p>Uppercase: {{ name.toUpperCase() }}</p>
  <p>Calculation: {{ score * 1.5 }}</p>

  <!-- Raw HTML (use with caution — XSS risk) -->
  <p v-html="html"></p>

  <!-- One-time render (no reactivity) -->
  <p v-once>{{ name }} (will not update)</p>
</template>

<script setup>
import { ref } from &#039;vue'
const imageUrl = ref(&#039;/images/avatar.jpg')
const altText = ref(&#039;User avatar')
const buttonClass = ref(&#039;btn-primary')
const isDisabled = ref(false)
const linkHref = ref(&#039;https://vuejs.org')
const inputType = ref(&#039;password')
const styles = ref({ color: &#039;blue', fontSize: '18px' })
</script>

<template>
  <!-- v-bind:attribute="data" -->
  <img v-bind:src="imageUrl" v-bind:alt="altText" />

  <!-- Shorthand: :attribute="data" (much more common) -->
  <img :src="imageUrl" :alt="altText" />
  <a :href="linkHref" target="_blank">Visit Vue.js</a>
  <button :disabled="isDisabled" :class="buttonClass">Submit</button>
  <input :type="inputType" />

  <!-- Dynamic class binding -->
  <div :class="{ &#039;text-green': score > 90, 'text-red': score < 60 }">Score status</div>
  <div :class="[&#039;base-class', isAdmin ? 'admin-class' : 'user-class']">Role</div>

  <!-- Inline style binding -->
  <p :style="styles">Styled text</p>
  <p :style="{ color: &#039;red', 'font-weight': 'bold' }">Inline style</p>
</template>

<script setup>
import { ref } from &#039;vue'
const count = ref(0)
const message = ref(&#039;')

function greet(event) {
  alert(`Hello! Button text: ${event.target.textContent}`)
}

function handleInput(event) {
  message.value = event.target.value
}
</script>

<template>
  <!-- v-on:event="handler" -->
  <button v-on:click="count++">Count: {{ count }}</button>

  <!-- Shorthand: @event="handler" -->
  <button @click="count++">Increment</button>
  <button @click="count = 0">Reset</button>
  <button @click="greet">Greet with event</button>

  <!-- Passing arguments -->
  <button @click="count += 5">Add 5</button>

  <!-- Inline handler with $event -->
  <button @click="(e) => greet(e)">Arrow handler</button>

  <!-- Input events -->
  <input @input="handleInput" :value="message" />
  <p>You typed: {{ message }}</p>

  <!-- Mouse events -->
  <div @mouseenter="message = &#039;Hovered!'" @mouseleave="message = ''">
    Hover over me
  </div>
</template>

<template>
  <!-- ✅ These work: single expressions -->
  {{ name.toUpperCase() }}
  {{ isAdmin ? &#039;Admin' : 'User' }}
  {{ [1, 2, 3].join(&#039;, ') }}
  {{ { key: &#039;value' }.key }}

  <!-- ❌ These do NOT work: statements -->
  <!-- {{ let x = 5 }} -->      <!-- Assignment — not allowed -->
  <!-- {{ if (x) { ... } }} -->  <!-- if statement — use ternary instead -->
  <!-- {{ count++ }} -->         <!-- Side effects — use in @click handler -->

  <!-- ✅ Multi-expression workaround: use computed properties -->
</template>

<!-- ProfileCard.vue -->
<script setup>
import { ref, computed } from &#039;vue'

const user = ref({
  name: &#039;Alice Johnson',
  role: &#039;Senior Developer',
  avatar: &#039;https://picsum.photos/seed/alice/100/100',
  bio: &#039;Vue.js enthusiast, open source contributor.',
  skills: [&#039;Vue 3', 'TypeScript', 'Pinia', 'GraphQL'],
  followers: 1284,
  following: 348,
  isFollowing: false
})

const followerCount = computed(() =>
  user.value.isFollowing ? user.value.followers + 1 : user.value.followers
)

function toggleFollow() {
  user.value.isFollowing = !user.value.isFollowing
}
</script>

<template>
  <div class="profile-card">
    <div class="card-header" :style="{ background: &#039;linear-gradient(135deg, #667eea, #764ba2)' }">
      <img :src="user.avatar" :alt="user.name + &#039; avatar'" class="avatar" />
    </div>
    <div class="card-body">
      <h2>{{ user.name }}</h2>
      <p class="role">{{ user.role }}</p>
      <p class="bio">{{ user.bio }}</p>

      <div class="skills">
        <span v-for="skill in user.skills" :key="skill" class="skill-badge">
          {{ skill }}
        </span>
      </div>

      <div class="stats">
        <div><strong>{{ followerCount }}</strong><span>Followers</span></div>
        <div><strong>{{ user.following }}</strong><span>Following</span></div>
      </div>

      <button
        @click="toggleFollow"
        :class="[&#039;btn', user.isFollowing ? 'btn-following' : 'btn-follow']"
      >
        {{ user.isFollowing ? &#039;✓ Following' : '+ Follow' }}
      </button>
    </div>
  </div>
</template>

<style scoped>
.profile-card { max-width: 340px; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.15); font-family: sans-serif; }
.card-header { padding: 2rem; text-align: center; }
.avatar { width: 80px; height: 80px; border-radius: 50%; border: 4px solid white; }
.card-body { padding: 1.5rem; text-align: center; }
h2 { margin: 0; }
.role { color: #6366f1; font-weight: 600; margin: .25rem 0; }
.bio { color: #64748b; font-size: .9rem; }
.skills { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 1rem 0; }
.skill-badge { background: #ede9fe; color: #7c3aed; padding: .25rem .75rem; border-radius: 99px; font-size: .8rem; font-weight: 600; }
.stats { display: flex; justify-content: center; gap: 2rem; margin: 1rem 0; }
.stats div { display: flex; flex-direction: column; }
.stats span { color: #94a3b8; font-size: .8rem; }
.btn { width: 100%; padding: .75rem; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: .2s; }
.btn-follow { background: #6366f1; color: white; }
.btn-following { background: #e2e8f0; color: #475569; }
</style>