Vue JS Directives

Binding Attributes with v-bind

    What if we have a link property, and it stores a link? What if we want to output this link to an anchor tag?
    This is made possible with the v-bind directive. We can use the v-bind directive to bind attributes to HTML elements. We can’t use our {{ curly braces }} in places where we are modifying HTML elements. We can only use the {{ curly braces }} in places where we would normally see TEXT only. V-bind tells Vue JS,  “hey, dont use the normal attribute here, instead, bind it, with the following argument: ” v-bind:href=”propertyHere”

Disabling re-rendering with v-once

     If we use the v-once directive, we can prevent the value from being updated and something other than the initial value being rendered later on. This is helpful if we expect the value to be changed by some other actuation later on in the application, but need to display the initial value as a static piece of data.

Outputting HTML with v-html

    When using the {{ curly braces }} we need to remember we can ONLY output text. But what if we have a scenario where we have data in the form of literal HTML syntax we want to place in our template? Luckily, we can use the v-html directive for this using v-html:=”rawHTMLHere”. This is the default operation of Vue, and is in place for security reasons. However if there is a case where we are getting HTML data that we know in fact has been sanitized, or are planning on sanitizing it yourself, you can use this directive.

Leave a Comment