- [Ray] Let's talk about some of the features
that make VJS super special.
Now I am in an application called CodePen,
which you can find at this URL,
and you can see that it's doing the same thing as the code
that we entered in JSBin,
but it definitely looks a lot different.
I don't have all of the, sort of, HTML tags, head tags,
scripts, and all that stuff.
All of that is actually in there, it's just that you
can't see it, so that you can focus
just on the important code.
So, this is functionally the same as what we did
in the previous page.
That's more of a template that you can use if you need
the code for the entire page.
This is more of a focus,
you can see that we have the JavaScript here on this tab,
and then the HTML over here on the left.
Now, if you do want to export this, so you can use it
on a website you can click on this export link right here,
and then click on export zip,
and if you have an account you can actually
export it as a gist,
and there is a lot of really cool features.
Now I have also changed the way that I am going to show
this to you on a video, just because I think that these
darker fonts are a little bit hard to see.
You can see that in my version of CodePen,
everything's a lot lighter and it's easier to see.
Everything is laid out on the left here,
the JavaScript is actually docked, which you can
double click on these if you want to expand them.
And, you can also drag them to sort of shut them down.
So this just allows me to show you only the relevant code,
and then the preview here on the right.
It's actually pretty easy do if you hit Change View
right here, you can try different layouts and there's
a lot of options with CodePens.
So, I just made things look nicer with the fonts being
a little bit bigger and a better background.
But, let's talk about those features in VJS.
Now the code you write in VJS is reactive,
which means that once you create a reference to some data,
that reference is actually connected to the data,
and reacts to change this.
You can test this by using the console to modify the value
of the data.
So, in CodePen the console is right here,
it's just a button,
and you can see that because we're development mode
you're seeing all of this stuff right here.
So let me go ahead and clear,
and then I'm going to click down here,
and I'm going to type app to reference the variable
that I created right here,
and then I am going to change the name to something else.
So let's do Fluffy Coat and I'll hit return.
And, you can see that as soon as I change this variable
the actually page gets modified,
and that's because my data and my layout is reactive.
Now normally if I was working with HTML,
I would have to target an element in the DOM,
and do something like get element by ID,
and then do something like modify the inner HTML
or the inner text,
but with something like VJS whenever you modify the data,
it takes care of updating the layout
and the design of the page for you,
and that's one of the reasons why it's so powerful.
In addition to that, this data doesn't necessarily
have to live right here, it can be somewhere else.
So, what I am going to do is create a reference
to a variable that I'm going to call data,
and I'm going to create this variable up here.
So, I'm going to go this URL to get some data.
I'm going to hit this Raw button here,
and I'm just going to grab this from there,
then I'll switch back into CodePen.
I'm actually going to replace this variable here cause
I've already typed it in the template,
and just paste that there so that now my data is read from
a different variable.
And, now what I want to do is go ahead and add an additional
sort of bunch of tags here with some of this information.
So I'll say, {{description}},
and I'll create something here,
and which is actually pretty cool,
you can have a .div that has the style of an h3,
so that's what I'm doing here.
And then I will put in a dollar sign, and then I'll use
the price variable here.
And, you can see that I don't really need to type
everything here in the data, it can be external.
That's going to come in handy later on when I'm reading
from an external file,
and the other thing to remember is that all the information
in view is reactive.
Which means your page adjusts to the value of the data
as it gets modified.