Vue components using an HTML-like file format called Single-File Component (also known as *.vue files, abbreviated as SFC). It encapsulates the component’s logic (JavaScript), template (HTML), and styles (CSS) in a single file.

Here’s the example:

It is the recommended way to author Vue components if your use case warrants a build setup.

As you can see in above example, there are 3 sections

  1. Script Section – This section mostly used for declaring and imports variables and files respectively.
    And we write our logic in the script section only.
  2. Template section – This section mostly used for writing HTML.
  3. Styling section – This section mostly used for writing styling of HTML content.

Vue application instance creation

Every Vue application starts by creating a new application instance with the createApp function:

<div id="app">
  <button @click="count++">{{ count }}</button>
</div>

js

import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      count: 0
    }
  }
})

app.mount('#app')

Leave a Reply

Your email address will not be published. Required fields are marked *