Data Properties (Props)

One of the most used terms and reactive elements used when constructing Vue components is data property. These manifest themselves within the data function of a Vue instance:

<template>
    <div>{{color}}</div>
</template>
<script>
    export default {
        data() {
          return {
            color: 'red'
          }
        }
    }
</script>

You can use data property to essentially store any information you want to use within your Vue templates. When this data property is updated or is changed, it will reactively update in the corresponding template.

Exercise 1.01: Building Your First Component

In this exercise, we are going to build our first component inside of a Vue project. In this context, components are imported using ES6. We will require Node.js and yarn to be installed. These will be covered in the Preface. By the end of the exercise, you will be able to confidently create new Vue components using Vetur and import them into your project.

To access the code files for this exercise, refer to https://packt.live/35Lhycl.

1. Open a command-line terminal and navigate into the Exercise 1.01 folder and run the following commands in order:

   > cd Exercise1.01/
   > code .
   > yarn
   > yarn serve

   Go to https://localhost:8080.

   Note

   Your app will hot reload when you save new changes, so you can see them instantly.

2. In VSCode (which will have opened when you ran the code . command), go into the src/App.vue directory and delete everything in that file and save.
3. In your browser, everything should be blank a clean slate to start working from.
4. The three primary components that make up a single-file component are the <template>, <script>, and <style> blocks. If you installed the Vetur extension from the Preface, write vue and press Tab to choose the first selection of the prompt. This is the quickest way to set up your default code blocks as displayed in the following screenshot:
   

   Figure 1.5: VSCode Vetur

   The following is the code generated after pressing Tab when using Vetur:

   // src/App.vue
   <template>
   </template>
   <script>
   export default {
   }
   </script>
   <style>
   </style>

5. Create another file in the components folder called Exercise1-01.vue and repeat the same step for scaffolding the Vue blocks using Vetur:

   // src/components/Exercise1-01.vue
   <template>
   </template>
   <script>
   export default {
   }
   </script>
   <style>
   </style>

6. Within our Exercise1-01.vue component, compose a set of <div> tags, with an <h1> element and a heading inside the <template> tags:

   <template>
     <div>
       <h1>My first component!</h1>
     </div>
   </template>

7. Inside the <style> block, add some styling as follows:

   <template>
     <div>
       <h1>My first component!</h1>
     </div>
   </template>
   <style>
     h1 {
       font-family: 'Avenir', Helvetica, Arial, sans-serif;
       text-align: center;
       color: #2c3e50;
       margin-top: 60px;
     }
   </style>

8. Import our component into the App.vue by using the ES6 import method and defining the component inside the components object in the <script> block. We can now reference this component inside the HTML by using its name in camelCase or kebab-case (both will work):

   <template>
     <Exercise />
   </template>
   <script>
   import Exercise from './components/Exercise1-01'
   export default {
     components: {
       Exercise,
     }
   }
   </script>

   When you press Save, https://localhost:8080 should reload and display the following output:

   

Figure 1.6: Localhost output for Exercise 1.01

In this exercise, we saw how to structure Vue components using template tags, scaffold basic Vue components using Vetur, output HTML, and use ES6 syntax to import the Exercise1-01 component into App.vue.

Note

You can only have one root HTML element inside <template> tags. Complex components should be wrapped in a containing HTML tag of your choice. <div>, <article>, and <section> are all semantic HTML component wrappers.