Assembling components
Vue.js divides an application into a set of components. These components are then assembled to form the final application.
Let’s study an example of how to create components and then assemble the created components. The goal is to use three counters (associated with three input fields) like the one in the previous example, then display the total of these counters. The total updates, as numbers are typed into each of the input fields.
We will create two components for this:
- The
<counter>
component is used to manage a counter. - The
<counters>
component allows you to manage the three counters together and display the total.
The index.html
file will display the <counters>
component in its template
section:
index.html file
<html> <head> <meta charset="utf-8" /> <script src="https://unpkg.com/vue@next"></script...