"Python Collections (Retired)" was retired on February 10, 2017. You are now viewing the recommended replacement.

Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Vue.js Basics

Well done!

You have completed Vue.js Basics!

Sign up for Treehouse Back to Library

Marvelous Mustaches

4:01 with Treasure Porth

Learn a few more things you can do with templating and data binding, including using JavaScript right in your Vue templates.

Further Reading

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related 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 up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up