FREELessons: 10Length: 51 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Text Interpolation

In this lesson, you will learn the simplest way to display JavaScript data, using the Vue framework’s moustache syntax.

Useful Links

2.3 Text Interpolation

Hello and welcome back. In this lesson, we are going to be starting with the same file that we were looking at in the last lesson. And we're gonna start adding a little bit of dynamic data to our page. So, once again, you can find the URL for this starting pin in the course notes for this lesson. Once you've opened that up, go ahead click on fork to create a new copy of it, and we'll get started making changes to our new copy. So eventually, we're gonna start pulling in the product information down here at the bottom dynamically. But for now, to keep things simple, I just wanna focus on the title of the page, up here at the very top. Now, I realize this isn't the kind of data you would usually pull in from a database. Usually, this would just be hard coded. But this will at least get the point across on how we can do some simple Vue.js templating. So what I'm gonna do is I'm gonna jump in to JavaScript. And we're gonna start in our JavaScript window and I'm gonna create a variable called myApp, you can call it whatever you want to. So this is gonna be a Vue instance, it's gonna be an instance of the Vue framework. And the way we do this, is we're gonna set this equal to a new instance of Vue, with a capital V, V-U-E. And then we need opening and closing parentheses. And then inside the parentheses, we need a JavaScript object with some data in it. So this JavaScript object is created using curly brackets, and we'll nudge that closing bracket down a couple of lines and then put a semicolon there at the end. And then in between those curly brackets, we're going to define a couple of things. The first thing we're going to define is the name of the element or the ID of the element where our dynamic data is gonna be contained. And it's gonna be contained up here at the very top. And in our HTML, we can see that this top section has an id of main-header. So let's use that. So the way we do that inside this Vue object, we need a property called el, and that stands for element. So we have el and then a colon, and then inside quotation marks we need the ID of the element that's going to contain our data. And that ID is main-header. So I am typing in #main-header. And then we have a comma, and then we need the actual data. So, data is gonna be another object, and the way we do this is, is we type in the word data, colon, space, and then our data object. So our object is going to be contained within these opening and closing curly brackets. And inside these curly brackets, we can have any number of different property value pairs. So, for example, if we wanted the title of our page to be pulled in dynamically, then we could put that data here. So inside our curry brackets for this data object, let's create a variable or a property called title. So we're gonna call it title, we'll do colon, space and we're gonna call it TIMMY'S DINER. So now we have our main title here. And instead of hard coding that title up here in this h1, what I wanna do is I want to point to this title attribute or this title property and pull the text from there. And this is only going to work if we're pulling it from within this element here, and our element is this main header here. So, we shouldn't have any problem as long as we put our data or our element that contains our data inside this main header element. And this h1 is exactly where it needs to be. So I'm gonna get rid of the hard coded title here, and we're gonna use what's called text interpolation. And that's just a fancy way of saying, we're gonna take this text here and put it right here using the property name that we've given it, which is title. So anything inside this data object is fair game, and right now all we have is this title object. So inside our h1 element, the way this works is we're gonna have two opening curly brackets, the name of the data property we want to display, and then two closing curly brackets. This is also known as mustache syntax. So we're gonna have our opening curly brackets. And I'll go ahead and put a space here to make it a little more legible. And then the name of our property, which is title, and then another space. And then I'll put our two closing curly brackets. And you'll see that once we do that, it replaces what we typed in here with that title property, which is stored down here in our JavaScript, TIMMY'S DINER. So now if we wanted to change this, we could change this down here in our JavaScript. So we could change this to Timothy's diner or TIMMY'S DINER number 2. And all of that would show up here in the title now. So any time we make changes to this title property, we will see those changes reflected on the website. So let's get rid of that number 2 there, and let's say we wanted a subtitle, as well. So let's create a new property here called subtitle, and the rules for these properties are gonna be the same as the rule for any variable. And let's just say breakfast, lunch, and dinner here. So, we've got that typed out, now let's replace the text that we have up here using the same syntax. So, as you can imagine, we would do the exact same thing we did above. We'll have our opening and closing curly brackets. Remember, we have two pairs of curly brackets, it's not just one pair. And then inside those curly brackets, we're gonna have the name of the property that we want to pull in, which is called subtitle. And when we do that, it pulls in that text from our JavaScript. So that's how we can use text interpolation with Vue.js to pull in simple strings of data and display them on our website. So, as you can imagine, this is a very powerful way to display data that's being pulled from a database or from an API or something like that. So let's save our changes and we'll move on to the next lesson. Thank you for watching.

Back to the top