JavaScript All-in-One For Dummies

Chapter 2

Introducing Vue Components

IN THIS CHAPTER

Differentiating the parts of a single file component

Defining components

Stepping through the component lifecycle

Catching and handling errors in Vue components

“Creation always involves building upon something else.”

—LAWRENCE LESSIG

It’s possible to write Vue code without using components. However, splitting an application into components helps make building complex applications easier. In this chapter, I show you how Vue components work and how to write them, and then you get to practice putting components together and passing data between them.

Introducing the Single-File Component

Vue’s components are called Single-File Components, or SFCs, because they’re written by combining template code, logic, and style in a single file. The file extension for a single-file component is .vue.

To start writing a single-file component, create a .vue file containing three elements: <script>, <template>, and <style>, as shown in Listing 2-1.

LISTING 2-1: A Starter Template for a Single-File Component

<script></script><template></template> ...