- [Instructor] One of the advantages of using Vue.js
is the way that it lets you manage
what is going on with the information
that the application has access to.
Now that is called state.
And how we work with that data is called state management.
To manage this data, Vue.js normally uses
a special data attribute that has a number of variables
or key value pairs like we see right here.
So I can create one here called name,
and then give it a value,
and we'll set this to Modern Hard Rock.
And then we can output that value
by using our template language,
which is usually double curly braces like this,
and type in name right here.
When I save this, you'll see
that the value of the variable is displayed right here.
This is called declarative rendering,
and it means that you can use JavaScript's expressions
in your template to display the data.
So I can add something like a plus here.
It doesn't have to be just the output of the variable,
but it can be a regular JavaScript expression.
Vue.js also offers powerful directives
to help you manage how that data is displayed
and also keeps track of events.
So let's go ahead and modify this.
We'll leave this as name,
and I'm going to add a description section right here.
So, I'm going to go to this URL
to get a little bit more data for this description.
And I'll go ahead and copy this name as well.
So I'm going to switch back.
And just paste over this data right here.
Now in addition that, I can use what's called a directive
to control how that data looks in my application.
Let's go ahead and change this icon to a play icon.
And I'm going to take this description
and wrap it around a span tag,
and then I'll use this directive's call to v-if.
This is like an if statement in JavaScript,
and I can tell Vue.js to display that description
only if the value of a certain variable is true,
or really whatever you want.
So let's say, we'll call this showDescription.
So we'll need to create that variable here.
And we'll set that to true.
So let's go ahead and save that.
And the description is going to show up
because the value of that variable is true right now.
But if I were able to change that to false,
you'll see that the description will not show up.
And the interesting thing about Vue.js
is that the data and the template are linked together
so changing the data can change the template.
We call that reactiveness or reactive data.
And you can really see it
by looking at the inspect element on your browser,
and switch it on over to the View tab.
So make sure you've installed the View Developer tools.
And then what you want to do is click on the application.
Right here you can see
the value of showDescription is false.
And if I change that to true,
you will see that the description shows up again.
So modifying the value of showDescription,
it's going to affect whether or not
that information is displayed.
And we can do that dynamically by adding a series of events.
So if I want to, I can add an event to this icon here.
So I can say click or look for a click event,
and when you get that click,
then I want you to set showDescription
to the opposite of whatever it is at the moment.
So essentially, this is going to
toggle the description on and off.
So now if I click on this, you'll see
that it turns on and off depending on how many times
I click on it.
And this is the beauty of Vue.js,
that it works by giving you all these powers
without you having to worry to update the DOM yourself,
the data object, declarative rendering,
powerful directives like v-if,
and event-driven things like click and any other event
as well as the reactive system.