The document discusses various Vue template features including template interpolation, directives like v-bind and v-if, attribute bindings, v-for loops, and event handling. Code examples are provided to demonstrate template interpolation, directives, attribute bindings, conditional rendering with v-if and v-else, iterating over arrays with v-for, and handling click events.

1. Babel Coder
VUE TEMPLATE

2. Babel Coder
TEMPLATE INTERPOLATION
<script setup lang="ts">
const greeting = 'hello world'
</script>
<template>
<p>{{ greeting }}</p>
</template>
hello world

3. Babel Coder
DIRECTIVES
• Directives are special attributes with
the v- prefix
• v-bind, v-for, v-if, v-slot, v-on

4. Babel Coder
ATTRIBUTE BINDINGS
<script setup lang="ts">
const href = 'https://www.google.com'
</script>
<template>
<a v-bind:href=“href"></a>
<a :href="href"></a>
</template>

5. Babel Coder
V-IF
<script setup lang="ts">
const isOpen = true
</script>
<template>
<div v-if="isOpen">
Hello
</div>
</template>

6. Babel Coder
V-ELSE
<script setup lang="ts">
const isOpen = false
</script>
<template>
<div v-if="isOpen">
Hello
</div>
<div v-else>
World
</div>
</template>

7. Babel Coder
V-FOR
<script setup lang="ts">
const articles = [
{ id: 1, title: 'Title#1', published: true },
{ id: 2, title: 'Title#2', published: false },
{ id: 3, title: 'Title#3', published: true },
]
</script>
<template>
<ul>
<li v-for="article of articles" :key="article.id">
{{ article.title }}
</li>
</ul>
</template>

8. Babel Coder
V-FOR
<script setup lang="ts">
const articles = [
{ id: 1, title: 'Title#1', published: true },
{ id: 2, title: 'Title#2', published: false },
{ id: 3, title: 'Title#3', published: true },
]
</script>
<template>
<ul>
<li v-for="(article, index) of articles" :key="article.id">
{{ index }} {{ article.title }}
</li>
</ul>
</template>
•0 Title#1
•1 Title#2
•2 Title#3

9. Babel Coder
V-FOR
<script setup lang="ts">
const articles = [
{ id: 1, title: 'Title#1', published: true },
{ id: 2, title: 'Title#2', published: false },
{ id: 3, title: 'Title#3', published: true },
]
</script>
<template>
<ul>
<template v-for="article of articles">
<li v-if="article.published" :key="article.id">
{{ article.title }}
</li>
</template>
</ul>
</template>
•Title#1
•Title#3

10. Babel Coder
EVENT HANDLING
<template>
<button @click="event => console.log(event)">
Click Me
</button>
</template>

11. Babel Coder
EVENT HANDLING
<template>
<button @click="console.log($event)">
Click Me
</button>
</template>

12. Babel Coder
EVENT HANDLING
<script setup lang="ts">
function handleClick(event: MouseEvent) {
console.log(event)
}
</script>
<template>
<button @click="handleClick">
Click Me
</button>
</template>