Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Vue.js Basics!
You have completed Vue.js Basics!
Preview
Learn a few more things you can do with templating and data binding, including using JavaScript right in your Vue templates.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
In a single project,
you can create multiple view templates,
0:04
attached to multiple view instances.
0:08
I'll show you what I mean.
0:10
Let's create another view instance,
0:11
and talk a bit more about what
you can do with Mustache syntax.
0:13
First, I'll copy and paste the instance
we made in the last part of the course.
0:17
And rename the new instance so it's
assigned to a constant called example.
0:21
I'll also attach it to an HTML
element with an ID of example.
0:29
Now we have two view instances, and each
instance has its own properties and scope.
0:35
This is the basis of
Vue's component system.
0:40
Which allows you to split up little
pieces of functionality into modular,
0:43
reusable chunks.
0:48
We won't get into components
in this course, but
0:49
we will be laying some
important groundwork.
0:51
For more information on Vue.js components
you can see the teacher's notes.
0:54
We'll leave the properties on the data
object the same, title and message, but
0:57
give the properties different values.
1:02
Keep in mind that you can name properties
on your data object whatever you'd like.
1:17
What's important is that they
match what's in your template.
1:21
So title, message, title, message.
1:24
Just be sure to choose names that
are descriptive and make sense.
1:30
Let's add a new HTML
template to index.html.
1:34
I'll copy and paste our template from
before, but change the id to example.
1:38
And again, I'm changing the id to
example because that's the element
1:52
property that I've defined here.
1:57
Now let's make sure this is working.
2:02
Great, you can do more than display
plain text inside curly braces.
2:06
You can combine values and
evaluate JavaScript as well.
2:11
Let's see how this works by
creating a third property
2:15
in the view instance called, name.
2:18
Set it to any name you'd like.
2:20
Now I'll delete Chewie
from the title property.
2:26
And in our second view template
inside of the curly braces,
2:31
we can concatenate
the two data properties.
2:35
Now we have two pieces of
data displayed as one.
2:50
We can use java script within
the curly braces as well.
2:54
So for example, If I wanted whatever name
we passed into the template to be in
2:57
all caps, I could use JavaScript's
toUpperCase method on it, like this.
3:02
And you can see the name is in all caps.
3:11
I can concatenate as I've
just demonstrated, but
3:13
I could also have easily done this.
3:16
Let's not forget our comma here.
3:32
And you can see it
achieves the same effect.
3:36
Now I have set up a template where I
can feed any cat name, Chewie, Furface,
3:39
Melissa, and Vue will update and
format the information automatically.
3:43
We'll see later how we can use this
to display multiple items without
3:48
having to repeat any code.
3:53
Next we'll look at more ways
to bind data to templates for
3:55
all sorts of fun and
interactive possibilities.
3:58
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up