What does each single file component in vue consist of?

Vue single file component consists of three parts: Template: defines the visual representation, using HTML syntax. Script: Define logical behavior, using JavaScript syntax. Style: Define styles, using CSS syntax.

The composition of Vue single file component

Vue single file component consists of three parts:

1. Template

The template part defines the visual representation of the component. It is written using HTML syntax and can dynamically render data using Vue directives and interpolation.

2. Script

The script part defines the logical behavior of the component. It is written in JavaScript and contains the component's data, methods, and lifecycle hooks.

3. Style

The style part defines the style of the component. It can be written using CSS syntax and can contain class selectors, ID selectors, and media queries.

Example:

<template>
  <div>
    <h1 id="title">{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello Vue',
      message: 'Welcome to the Vue world!'
    }
  }
}
</script>

<style>
h1 {
  color: blue;
}
p {
  color: red;
}
</style>

In this example:

• The template section defines a template with the title and The div container for the message.
• The script section defines the component's title and message data.
• The style section defines the style attributes of the h1 and p elements.

The above is the detailed content of What does each single file component in vue consist of?. For more information, please follow other related articles on the PHP Chinese website!