Directives and V-if

David Joseph Katz
A free video tutorial from David Joseph Katz
Software Engineer
4.4 instructor rating • 19 courses • 232,642 students

Learn more from the full course

Vue JS 2.0 - Mastering Web Apps

Create the VueJS 2.0 apps you always wanted. Build 5 apps, learn development secrets, VueRouter, Vuex, & more!

04:24:43 of on-demand video • Updated December 2017

  • Build entire Vue JS, VueRouter, and Vuex applications from scratch.
  • Develop apps that deal with APIs and web requests.
  • Create web apps with a full authentication service, and real-time database.
English [Auto] Let's continue exploring the basics of view by introducing directives directives in view. Allow us to add special reactivity to pieces of the rendered dumb. Let's see a directive in action. Now let's adapt this instance code that we started out with from the last. However rather than writing over this index that each year now let's create a new folder called directives and create a new index that each team will file. That way we have multiple example references so new folder directives and then index that ECMO. Now you'll probably want to also treat an instance folder so instance then let's go ahead and move the previous index that each email right into the instance folder. Right now we'll go ahead copy this whole thing in place into a new index. Each email within the directives and there we go. We have an index the H.M. loaded for our directives folder now modify our code a little bit. Our view insensitive with the idea evap will now have an inner div that has some directive functionality added to it create a new div and let's give it a reactive attribute. So right within we'll say DIVX and for our reactive attribute we use something called V bind. Title equals random then within the divil say hover over me or over me for your random number. Excellent. Now notice the syntax which denotes a view directive in each now. Now we're making the title attribute re-active for this element and the title is what appears when you hover over elements of web page and then re-assigning it the random portion of our data. Now the only problem is we don't have random declared in our data. So let's do that now. So let's change this text to a random piece formatted to a combination of Javascript functions which give us a random number from 1 and 50 including one in 50. So say math floor mat at random times 50. So math not random gives us a decimal from 0 to 1. Well multiply that by 50 and then we'll floor it. So that way any decimal number just gets completely routed to the lower integer and we'll add 1. So that way we include 1 to 50 instead of 0 to 49. Now as we save we go to the directives and we reload just to make sure everything's properly working. Now hover over me for the random number and boom there is a 28 appearing as do it again. So when it reloads that way we get a fresh number. And this time it's a 31. Awesome. Now we can show that this is truly reactive by inspecting the element. So let's go ahead and do a control inspect go to the console element. Once again zoom and make sure that this is visible. And now we can directly access the app instance. So we say APTA random equals 100 for example. Boom. As I hover over the Ellman now it says one. All right. Let's quickly look at another directive the if attribute which allows us to achieve a conditional rendering in view at a shown property to the data object. Let's map it to a booming variable which is false then on the random element added the IF and set it to that shown attribute. So it will say the IF and lushest reorder this way looks neat. And V.F. equals shown and once again we had that V dash syntax for our directive. Now as we save since shown is false our element disappears. But if we say at shown is equal to true the Rigaud are element then reappears. All right directives will serve as one of the primary ways we interact with view to create applications. The VBI directive will be fundamental for reactivity and the V IV will be instrumental in conditional rendering. All right with this intro to directives done we can continue learning view.