All language subtitles for 1) Vue Instance

This course assumes a basic knowledge

of HTML, CSS, and JavaScript.

We'll be covering everything you need to know

to start building apps in Vue,

or to add Vue to an existing project.

Now before we dive into code,

let's take a look at the project we'll be building.

As you can see, it is a product page.

We're gonna introduce new Vue concepts

and add features as we go.

Up here you can see that we have In Stock

and below we have an Add to Cart button.

Now when I hover over these colors,

not only does the image change,

but this Out of Stock and In Stock is changing,

and that is disabling and enabling the button.

We also have a Cart here, which we can add to,

and we'll be developing some other features, such as tabs,

and we'll work with forms to add reviews,

so it'll be a pretty comprehensive application.

I also wanted to show you the Vue DevTools.

This is a really handy tool.

It's not only gonna show you

the structure of your application,

but you can also dive in and see the data,

the props, all sorts of useful information

about what is happening with your application

and with your individual components.

You'll learn all about this.

So please have this installed.

I'm using Chrome and if you are using Chrome,

and you're also running local files,

make sure to have this clicked, Allow access to file URLs.

This'll make sure that Vue activates on your project.

All right, now that we have everything we need,

let's start coding.

Here's a code that we're starting off with.

We've got an HTML file, and that is linked with a script tag

down to our main.js.

In our JavaScript, we have a variable called product,

whose value is Socks.

Now, we have a common problem in front-end development.

We want to get this data into our HTML.

Fortunately, Vue has a very simple way to do that.

First, we'll go to vuejs.org

and we'll look at the introduction page.

We're gonna take this script here,

copy it over and paste it,

and this will install Vue.

That's as simple as it gets.

All right we're gonna change out our variable here

and change it to app and make a new Vue instance.

We're gonna pass in some information.

So here we're putting an element property.

We're going to say app,

so this is going to connect to the div up here,

with the id of app.

So now our Vue instance is plugged into that div.

We're also gonna give it some data.

In this case, we're moving that variable,

product = 'Socks'.

Now it's becoming our data.

If we refresh, we have the same information.

That's because we haven't told that data where to go.

So as you can see, Product goes here.

So let's switch that out for product.

And when we do that, that will pull in the actual product

from our Vue instance's data.

We refresh again, and Socks is appearing.

Awesome, it worked!

Now let's explore a little deeper,

how this is actually working.

In our JavaScript, we say new Vue.

This creates a new Vue instance,

which is the root of a Vue application.

You can think of it like a heart, that powers everything.

It's created by passing an options object into it,

which has a variety of optional properties

which are used to store data and perform actions.

In order to form a relationship

between the Vue instance and part of the DOM,

we use the property el.

Here we are specifying that we'd like to plug our instance

into the div with the id of app.

Now this div, and the content within it,

is hooked up to our instance.

The instance can also have a property for data.

Here we're giving our instance a product,

whose value is Socks.

In order to display Socks,

we're using these double curly braces up here.

You can think of them somewhat like a phone,

which has a direct line into another phone

in the Vue instance.

So when we reference product up here,

it's as if we're asking our cell phone below,

what's the value of product?

And the phone says, Socks,

and Socks appears on the webpage.

This double curly brace syntax is called an Expression.

You may already be familiar with them.

They're used to produce or evaluate a value.

You can use them to add a character,

or number to your data, to combine values,

to perform conditional logic with a ternary operator,

to run methods on your data,

along with a lot of other use cases.

If we were to change Socks to Boots,

our expression would receive the updated value product

and the h1 would update accordingly.

But why?

Well, Vue is reactive.

In other words, the instance's data is linked

to every place that data is being referenced.

So if we are referencing product in multiple elements,

both elements would update to display product's new value.

Anywhere that relies on our instance's data,

will update when that data changes.

Let's open the Console

and show this reactivity happening live.

So here I am, back in my application,

and I'm gonna open the Console.

And I'm gonna type in app,

again that's the name of our Vue instance,

then product, which is the name of our data,

and I'm gonna give it a new value,

Coat, in this case.

Now Socks changes to Coat.

If I change Coat, to say, Compass,

Coat will change to Compass.

So there it is.

Our h1 is immediately updating with that new data value

because of the reactivity system.

All right, let's review.

So the Vue instance is the heart of the application.

It plugs in to an element in the DOM,

and that element can use an expression

to display that instance's data.

Time for a challenge.

Add a description to your data object.

Then use an expression

to display the description beneath the h1.

You can find a link to the Code Playground below.