DIRECTIVES

• Directives are these tiny pieces of HTML attributes that view offers us. They’re always prep-ended with this v and dash. And then it basically attaches some little piece of functionality to that bit of HTML mark up so that you’re not diving into the DOM and doing something with it.

  

CUSTOM DIRECTIVES :-

1. V-FOR :

• There was the example of li v-for ,we went through previously ,where it loops through the set of values(items in items)

  

• But we can also do a static number,where we don’t have any data .for eg:’that is given in figure’ –> li v-for num in 5 and then outputting the number, and I can loop through it that way.

  

2. V-MODEL :

• V-model is super awesome because it establishes a relationship between the data and like a form input.

  

• For example: here I have some Data(),then I type a message-“THis is a good place to write things.”,then I can output it in booktext ,but I create a relation between the text areas that says v-model,which can dynamically updates values.

  INPUT CODE-

  

• That means ,whenever I type the message in the above text area it immediately outputted below. we can add animations to it-“animated output”(shown in figure).

  OUTPUT-

  

• We can even make changes , like I typed above- ‘Hi Frontend Masters’ and erase the previous text ,it will automatically animated in the same way.

  

• we can also use V-Model for things like check boxes and erase. So if I have something like John, Paul, George, and Ringo. I have all of these check boxes and this is again normal HTML input type-‘checkboxes’ and ID(In image below ).Here v-model is checkedNames .so,if go to vue ,we established the relation with the app and we say that checkboxName is that array. Then whatever name we check ,will be going to show below in checkedNames.

  

3. MODIFIERS :

• They are of 3 types:-

• v-model.trim

• v-model.number

• v-model.lazy

• when we use v-model.lazy, it won’t calculate the content automatically ,ie. I am storing the data (under the Type here),until I need it and as the erase button is clicked the output changes are made.

  

4. V-IF/V-SHOW :

• it’s a conditional that would display information based on the requirements.

  

• For example- here we have v-model tacos,tacos is a empty -it stars with an empty string .If ,we see button does not shows up until I type any text in the box, let’s say Al Pastor, the button then shows up. If we type v-show in place of v-if ,then it’s going to show the same result, ie. the button will appear only when any text is typed.BUT THERE IS DIFFERENCE BETWEEN BOTH WHEN WE GO AND SEE IN DOM.

  

• In case of v-if ,there no button present under element until we type something in the box.vf will literally unmount and remount that element into the dom.No button is present under element till we type anything. It will not exist during that time.

  

• But in case of v-show the button is still present under elements even if we haven’t type anything in the box. V show is just toggling its visibility for us*

  

5. V-IF/V-ELSE :

• Conditionally render one thing or another thing based on a condition.

  

• For example: Here we have “ Do you like tacos “ which shows a ‘ Thumbs up ‘ on yes condition and ‘ You are a monster “ on no condition.

  

• If we take a closer look to understand what’s happening here ,we can see first that tacos is an empty string (as shown in the image below), as it always starts with an empty string and the message shows on screen based on condition. Like here v-if=”tacos===yes”, then thumbs up render ,else condition ~ v-else “ You are a monster “ render.

  

6. V-BIND OR ‘:’

• We can use “:” instead of writing v-bind in code as it used frequently.

  

• Using v-bind ,the button would be present in the result screen but in active or inactive form. Like here the button active in color orange when we type something in text box , when nothing is written there it is still present there but in the inactive form.

  

  “Inactive button”

  

  “Active button”

• Here we can see that the tacos is an empty string and we established a relation that when we type for eg: favourite type of tacos then the button which is present in inactive form would get active on screen.

Note

• The background color of button can be changed in CSS window. Here we chosen color orange as shown in image below.

7. V-ONCE AND V-PRE:-

- let’s understand through this example :

• v-model tacos we create relationship with it ,initially tacos is not an empty string text is written in it “I like al pastor tacos”,u can see in second image below.so,when we write v-once=”tacos”,then changes made are not updated ,it will not change once it get input but when we write a new text like “I like carne asada” then the text starts showing below as we have written in code {{$data}} -ie. outputting the data ,actually that will update this vue instance but not v-once it will remain on screen .

• And v-pre just print the data written as it is on the screen ,it do not process data and if any code is written there it will also starting showing on the screen.like if we change {{tacos}} to {{$data}} ,it will output {{$data}}. v-pre is very useful for documentation.

  

8.V-ON OR @ :

• We can use “@” instead of writing v-bind in code as it used frequently.

  

* example :- like here product shown is backpack and for any product we can always add item quantity through’+’ but it can be not be lessen than 0 ,when we click ‘-’ .this all is managed by the v-bind.

• in js bable ,it is shown that counter =0,initially item =zero. @click=counter>0 means the items ‘+’ will always be greater than zero ; counter+=1 and -=1 means items will increase and decrease by one.

  

9. MULTIPLE BINDINGS:

10. MULTIPLE BINDINGS:

11. V-HTML :

- let’s understand through this example :

• like when we link and we don’t want html tags like<A> tag to appear ,this directives is really useful while giving links.

Warning

12. V-TEXT :

* EXAMPLE:

Updates whatever we write.

Warning

# DIRECTIVES - ALL IN ONE :

previous

Comparison With Vanilla Javascript

next

CHALLENGE 1: CALCULATOR