30-Day Vue.

js
Challenge!

Day 4
 Creating Your
First Vue.js
Component

Building Blocks of
Vue.js Applications
What is a Vue.js
Component?
A Vue.js component is a reusable and
self-contained unit of code that
encapsulates a specific piece of
functionality or user interface.
Components can be composed
together to build complex applications.

1
Anatomy of a Vue.js
Component
Vue.js components consist of three
main parts: template, script, and style.
The template defines the structure of
the component's HTML, the script
contains the component's logic and
data, and the style defines the
component's CSS styles.

2
<template>
<div>
</div>
</template>

<script setup lang="ts">

</script>

<style scoped>
</style>

3
Creating a Vue.js
Component
To create a Vue.js component, define a
new Vue instance with a template,
script, and style section. Once defined,
the component can be used anywhere
in the application by including its tag in
the HTML markup.

4
Hello World
Component
Let's create a simple "Hello World"
Vue.js component together. We'll define
a template with a message to display,
add data to hold the message, and
render it in the component's HTML. This
hands-on example will demonstrate
the basic structure and functionality of
Vue.js components.

5
<template>
<p>
{{ message }}
</p>
</template>

<script setup lang="ts">

const message=ref('Hello World')
</script>

<style scoped></style>

6
Follow
For 30-Day Vue
js Challenge
@UsmanKhalid