2.2 Displaying Data With String Interpolation

Let's start to dive into Vue.js. So, the first thing that we're gonna wanna do is start to tweak this boilerplate application and start to turn it into a little bit more of what we want our application to wind up being. And that's kind of a flash card quiz type app. So, the first thing that I wanna do is, I want to start to get rid of a lot of this boilerplate. So we have all this stuff here that is not pertinent to my application, so let's start to get rid of a bunch of this. Let's go ahead and get rid of everything inside the div with an ID of app in the template section, and then we're gonna get rid of this import statement for the hello component. We don't really need that, we'll get rid of it out of the components section as well. And down here in the styles, we could probably get rid of everything although I like that margin at the top, so let's leave that in there as well. So let's go ahead and save that. Offer to come back and take a look at my application, it's blank and that's great. Now we have an empty canvas we can kind of start to get started with. All right, so now we've broken this view down to its absolute basic components. Once again, we have a template section at the top. We have the script section in the middle, and styles at the bottom. All right so, let's talk a little bit about this middle part because that's gonna become very important right now and throughout the life of our application. So what exactly is this export default business? Well if you are familiar with JavaScript at all and ECMAScript, really what we're doing here is we are exporting an ECMAScript module if you wanna think of it that way. If you want to think of it in terms of JavaScript, in app or a view component is really a kind of a module or at least it contain a module, and what we're doing is we're exporting data and properties, and functionality into our component that can be consumed by the template that is defined up above it. So really that's what's going on down here. Now, there's a number of different properties and functions and things that you can define that are well-defined within the module that's being exported inside this component. And its all very well defined, but we're gonna talk about some specific that are important for you to understand as you're getting started in the world of Vue components. So lets begin with the data that we're gonna be using in our application. Now the data is gonna be very important because we're gonna need to define Some quizzes and maybe some flashcards, and group these things together and all that sort of good stuff. Now typically, in a large scale application you'll be using databases or maybe web services or things like that, but in this particular course that's gonna be a little outside the scope. So what I really wanna do is just boil it down and start with some very simple data so you can see how Vue can allow us to deal with data and display it to the end user as kind of that first building block. So what I'm gonna do here is I'm gonna use a special function that can be defined within our module. And that's gonna be a data function. And that data function is simply going to return some type of data. So, this case as an example I'm gonna return a single object that's gonna have two properties, title and I want to say this is gonna be chapter one and then it's gonna have a description. Now, obviously you can add as many to this as you want, but for this case I just want to keep it fairly simple. This is a sample description, how about that? So let's go ahead and save that. Now, it's really not doing anything yet because we're not displaying anything to the end user. But what I'd like to do, is display this information so I can show it and you can see how you can start to use this data within your app. All right, so let's start to use this within a card using this semantic UI framework that we started to talk about before. Now the way that we do that is once again, is we're going to create a div with a class of UI centered card like we saw before. We'll create another div in here called content which we've seen before, and then another div with a class of header, once again like we've seen before. And what we wanna display here is our title. Now if I save that and I come back and take a look we're gonna see, yep, I do have a card. But the problem here is I just have title here, I don't really have the data there, just what I typed in. And why is that? Well because all I've done is I've typed in some text. And HTML is HTML is HTML. So once this reaches the page to be rendered, any browser you use is gonna say, okay I'm gonna display that text. But I don't wanna display the text, I wanna display the data that's associated or the value that's associated with the title property that I've defined in here. And once again, this data function is going to return data that is accessible everywhere within my component. So how do I get access to this, or how do I display the information associated with this title property? And I do that via string interpolation, which is done with the double curly brackets or the mustaches. So we can go ahead and save that. Now, once I've done that, now once the Vue gets a hold of my application and this is rendered on the page, it's going to replace title with the value that's associated with it n this object which is chapter one. So if I come back here and take a look, sure enough, I'd now see chapter one. All right, that's a great start, but this is kind of a boring card and all I can see is this one piece of information, this one title or the header. Let's go ahead and add some additional data. Now there is another section that I can create within a card known as meta and within here, I'm going to put in my description. So let's go ahead and save them. So now I have Chapter 1, this is a sample description. So you're starting to see now that I can create a card that has multiple sections, and we're gonna add to this as we go along, but this is the basic process of taking data and displaying it to the end user using string interpolation.