1.1 Single file components, reactivity and rendering - VVJS/intro GitHub Wiki

First we will use GIT to checkout the project to be at this step in the workshop:

git checkout 1.1 --force

Single file components

Now open the App.vue file, which can be found in the /src/ path. This is a Vue single file component. Usually a single file component will have at least one of (but usually both of) 1) a template section for your html, and 2) a script section for your logic - usually in javascript. There is also usually 3) a style section later on for your css. You can find more information on single file components here.

Reactivity

Let's begin by looking into the script area. You can see two properties here, the name of the component, and the data method. The data method will look something like this:

    data() {
        return {
            drawer: true,
            items: [
                {
                    icon: 'bubble_chart',
                    title: 'Inspire'
                }
            ],
            title: 'Vuetify.js'
        }
    }

This data method has a boolean: drawer, an array: items, and a string: title. If you change the title property in the object returned from the data method, you should see your title change on your page! Try changing some of the other properties returned from the data object to see what they do.

Rendering

When looking at the HTML, don't worry if many of the elements look familiar are—they are part of Vuetify, a Material Design framework. We are simply using them to keep our project looking pretty, we could easily have them be replaced with normal html markup (it just wouldn't look as nice). What is part of vue is the v-model on the v-navigation-drawer element. v-model is a two way binding, which means you can both use it, and change its value from this component. You can learn more about v-model here.

If we scroll down to the v-toolbar-title we will see the moustache tags around the word title.

<v-toolbar app>
  <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
    <v-toolbar-title>
      {{ title }}
    </v-toolbar-title>
  <v-spacer></v-spacer>
</v-toolbar>

Now these moustache tags (or squiggles, squigglies, braces), render out the value of title into the view so we can see it. That's what you had been changing in the "rendering" section, hopefully you set the value of this title to something more appropriate like 'Intro to Vue.js.' That concludes this first section on the basics on Vue.js, remember to check the docs for more information!

Now on to the next step.

⚠️ **GitHub.com Fallback** ⚠️