Starting with directives - directive v-bind and v-if

Filip Jerga
A free video tutorial from Filip Jerga
Software Engineer
4.6 instructor rating • 16 courses • 28,659 students

Learn more from the full course

The Complete Vue JS Developer Course – inc. Vue JS 2!

Build real web apps with Vuex, Router, Node! Master Vue Js and Vue JS 2!

43:55:45 of on-demand video • Updated July 2020

  • Develop powerful, modern, real-world web applications with Vue JS 2 and Node
  • Completely understand the processes and concepts of Vue JS 2
  • Use gained knowledge to create your own Web Applications
  • Become fluent in concepts and tools like Vuex, MongoDb, Sockets, Authentication
English [Auto] Hey guys. Welcome back. In love lecture in parts of the Blue Jays framework the liquid blue is stands and provided some data at the wait so they create a message variable with a value Hello view enemy. These places value on a screen that is called string interpolation or text interpolation. SO BE OUR interpolate the message your variable. OK intellectual continue to provide more data out of your juice instance Animal Planet will be the more immediate application. So for us. Abiola Vega zero sum of data so does other message. I will pay zero sum the code and you can find all of these inside the very sources of these lecture. So please go to read the rest of this lecture and find this code and a basic and their message so let's continue and let's see what we have here behaving here. Title message and there is also a message that the message of view here is a day that they use their dues and my name and some I.D. I just made up this idea here is I goals object and then here we have two goals so we can find. Here are two goals of the. Notes. Progress got the glory you did it and operated. So title here is a learned Rojas of our goal. Here are some notes I started today and it the good progress zero percent got the glory is an idea which points us to categories here and you can find these ideas. Here you can seeing and these books get the glory and also how they create art and updated art and the times. Then in the merely seconds there is actual date Mila. Translated late it'll be laid there. OK. So we hit our goals. Got the galleries and also are a user. But before all play with these data here I would like to show you Show you directives in a view. So here we have this title message and what we can do it. Let's go up here and let's find our message here. And actually I will put this message inside the bara section of Sibel. Cut it from here and I will provide this message here. OK. You can save this file and you can go to browser us please refresh your application and you can find this hello view here and their newest. OK. So I will I will show you how to pull the binding. Let's go back and let's zoom right on this. Adriana the dash bind. Go on. And now de la times like this. OK. Equals sign. And now quotes like this and the you want to bind to these eight to. I don't want to bind the message here anymore but I want to bind their vital message. OK. So let's copy the title message variable. Let's grow up here and let's throw out a two hour Lee bind title. And as you can see here I believe the bride here curly brackets anymore because these are the images they're active and the menu writing directives. You don't eat to provide curly brackets these know the interpolation as we are writing here x interpolation. OK. So that's the message here. Well let's say you guys OK. 70s let's go back to our browsers or the refreshes. OK. And you can see nothing happened. OK. So what is going on. Let's inspect these page always when you're not sure just inspect your page and then you can click here on these. On this point they're here. Let's click it. And now we can inspect single elements on your page so I'll inspect it ahead of you. A double click on this and now you can find the title attribute and a title attribute is our title message of you perfect. So many ambulance men I know holler over this hell of you and you can just tower and leave mouse here and you can see here the message. Perfect. So days I attribute the binding and actually I can of course changes the manual because days of your days and days pretty reactive. So I like clearer console. I will write it up and I will write here my title message you can see here is that title message to you but they want to override this updated message right. So Google arrives here uptight title message and the ride. Here I am in your message ladies. Let let's press enter and now we have a new message. So an I Viola and go here. Let's wait and I am a new message. Hi. See ya. Amazing. So love we can do more. I mean this. I will clear this out and let's go back to our gonna get a US and let's provide here's some more data. So I created a new very advanced solar variety or a new new field and let's call it let's say is thanks to display it specs displayed displayed like it is all right and you can see here it is will be Boolean Boolean value and instead display you'll be initially true. And then I mean I'm working with that bully. I always like to provide a great band to do so Maria will be the E or a Hess so it's more meaningful it was giving more meaning to his variable. So is that is explained. Yeah it's true. So now we're going to use this variable as a valuable tool to display some content conditionally on the screen. Okay so what I mean by that. Let's go up here. Okay let's find our message here. So just under a container we hit our message and I will make some space. OK. So does some space here. And I will bribe my age line instead of a D. OK. So these and doesn't drop their element. Just wrapping might my age rather. OK. And I will use your calendar directives. And let's write here the dash. If these conditional directives equals and let's write here is that is displayed like this. So what is happening now. The if means that if instead of displayed belong to these places a each thing is displayed is in this case true. So you want to display this age. OK. So just make sure both your browsers don't forget to save this file. Let's go to our browsers and it's refractive speech. OK. No Ginger dot here I can insert baby element it's still here. But I will change the value of our new of our new variable so as to go up and let's find here instead of display it you can see here is a true but I will change it to it false. All right so change it to a false and you can see now it is not here anymore. So these so-called conditional and these are conditional directive the if. Okay guys. So that's it from these lecture and neglected to continue with some more directive. So I showed you would be if at next lecture I will show you the four guys have to see you get a good lecture.