- [Instructor] In order to configure our Vue app
so that it can manage part of our page,
we'll add another script element down here
making sure that it appears
after the one that loads the Vue framework.
Next I'm going to declare a new constant
called FlashcardApp.
And by the way, you'll see const used in this way
in the Vue 3 guide as well.
A discussion of why that makes sense
as opposed to var or let
is beyond the scope of this course,
but feel free to ask in the Q&A tab
if you want to know more about that.
So this is not really the app itself,
but an object that describes it by representing some options
that we're going to pass to a method
that will create the app.
One of those options is the data
that our app is going to work with,
and we declare that with a function called data
that returns an object.
The object that the data function returns
will contain, for now, just a property called deckName,
the name of our flashcard deck.
And this is going to be Vue.js Fundamentals.
This is going to be a deck of flashcards
related to Vue.js concepts,
but this app could actually be used to present
any deck of flashcards.
And this is all we need to get going for now.
So on a new line, I'm going to call Vue.createApp,
passing in our options object.
And then chain onto that a call to mount,
which will take a selector
for the DOM element that we want Vue to manage for us
by mounting the app on it.
In this case, we can use this div up here
that already has an ID of app.
So just like a CSS selector, I'm going to do #app.
And now what does this allow us to do?
Well, instead of having to write code
that, say, selects this H1 element
and imperatively sets the inner text,
I can just declaratively say that I want the inner text
of this element to be the value of our
deck name data property,
and I can do that using the
mustache or double curly brace syntax.
The other benefit to this is that
it's very easy now for someone to come along later on,
and that someone may be you in the future,
and just quickly scan this HTML template,
and have a good idea of what's going on
as compared to when you have some code in a script somewhere
that's explicitly accessing this element's inner text value.
So if I go over to the browser now and refresh,
I can see that deck name has now been replaced
by Vue.js Fundamentals.
One problem with this is that you might notice
a brief flicker of the curly braces
when the page is loading before Vue has a chance
to take over and replace the div that it's mounted on
with its own version.
In the next video, we'll look at a simple solution for this,
and also explore some other ways to bind data
to DOM elements.