Vue Template Syntax Quick Reference

🧠 Vue Template Syntax Quick Reference

A fast guide for remembering what’s what in Vue’s template language.

🔧 Directives

Vue directives are special v- prefixed attributes that add behavior to your HTML.
Official list here:
🔗 Built-in Directives

Directive	Purpose	Notes
`v-if`	Conditionally render element	Removes from DOM if false
`v-else-if`, `v-else`	Branch logic
`v-show`	Toggle visibility via CSS	Doesn’t remove from DOM
`v-for`	Loop over items	Requires `:key`
`v-bind`	Bind a value to an attribute	Shorthand: `:`
`v-on`	Listen to events	Shorthand: `@`
`v-model`	Two-way bind input/component	Works on form inputs + some components
`v-slot`	Inject content into slot	Shorthand: `#`
`v-html`	Render raw HTML	⚠️ Use with caution (XSS risk)
`v-text`	Set `textContent`	Rarely used

⚡ Shorthand Recap

Long	Shorthand	Use
`v-bind:href="url"`	`:href="url"`	Dynamic attributes
`v-on:click="fn"`	`@click="fn"`	Event listeners
`v-slot:header`	`#header`	Named slots

📬 Props and Emits (Minimal Overview)

These are the two most common ways parents and children communicate in Vue — alongside slots.

📨 Props

Defined in the child, passed in from the parent
Used to pass data downward into the component
In templates: bound using : (e.g., :title="someTitle")

<!-- Parent -->
<MyCard :title="cardTitle" />

<!-- Child -->
<script setup>
defineProps(["title"]);
</script>

Use type, required, default, and prop validation functions for more control Want to go deeper? See the official guide on Props. For syntax info, check out Composition vs. Options API.

📤 Emits

Emitted by the child, listened to by the parent
Used to notify the parent of something (e.g., click, change)
In templates: listened to using @ (e.g., @close="handleClose")

<!-- Parent -->
<MyCard @close="handleClose" />

<!-- Child -->
<script setup>
const emit = defineEmits(["close"]);
emit("close");
</script>

Want to go deeper? See the official guide on Events For syntax info, check out Composition vs. Options API.

📦 Slots

Slots let a parent pass more than just data into a child — things like markup, layout, and even interactive behavior.

If you’ve worked with props and emit, you already understand the core idea:

props: defined by the child, used by the parent
emit: defined/emitted by the child, listened to by the parent
slots: defined by the child, filled in by the parent

It’s the same directional relationship: → Child defines what’s allowed → Parent decides what to provide

Vue Mastery’s Component Design Patterns course breaks this down really well. A key takeaway is:

If a component has too many props trying to control structure, it's probably time to switch to slots — they’re cleaner, more flexible, and easier to maintain.

🛠 Pro tip: To truly understand slots, build your own child components that expose them. Doing this will unlock your ability to confidently use slots in prebuilt components like q-table, q-select, or anything in your internal UI library.

Defining Slots on the Child:

<template>
  <div>
    <slot name="header" />
    <slot <!-- default slot, no name property --> />
  </div>
</template>

Using the default slot:

Just place content inside the component:

<CustomCard>
  <p>This goes into the default slot</p>
</CustomCard>

Using Named slot of Child in Parent:

<CustomCard>
  <template v-slot:header>  or shorthand #header
    <h1>Custom Header</h1>
  </template>
</CustomCard>

The Vue docs have an excellent example that make slots intuitive.

// passing multiple slot fragments with different names
BaseLayout({
  header: `...`,
  default: `...`,
  footer: `...`
})

// <BaseLayout> renders them in different places
function BaseLayout(slots) {
  return `<div class="container">
      <header>${slots.header}</header>
      <main>${slots.default}</main>
      <footer>${slots.footer}</footer>
    </div>`
}

📌 v-model Patterns

Component Type	Binding
Input field	`v-model="form.name"`
Checkbox	`v-model="form.agree"`
Select	`v-model="form.choice"`
Custom component	Needs to emit `update:modelValue`