September 7, 2020
Some useful directives of VueJS: v-bind, v-once, v-html

Vue.js is an open source progressive JavaScript framework used to develop interactive web interfaces.
Vue.js focusses mainly on the view layer of the application and offers a lot of functionality. Also, can be used  for single page application development.

Directives are special attributes with the v- prefix.

There are below some directives which we have discussed in this below given video :-

  • v-once:
    You can also perform one-time interpolations that do not update on data change by using the v-once directive
  • v-html:
    The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use the v-html directive:
  • v-bind:
    Mustaches cannot be used inside HTML attributes. Instead, use a v-bind directive:

Code Snippet:-

<!DOCTYPE html>
<html>
    <head>
        <script src=“vue.js”></script>
    </head>
    <body>
        <div id=“app”>    
            <p v-once>{{mymessage}}<p>  
            <p>{{changeMessage()}}<p>    
            <img v-bind:src=“imgUrl”>
            <p v-html=“rawHtml”></p>
        </div>        
        <script>
            new Vue({
                el:“#app”,
                data:{
                    mymessage:“Welcome to Vue.js Learning”,  
                    imgUrl:“any image URL [logo.png]”,
                    rawHtml:“<span><b>This is vue directives</b></span>”  
                },
                methods:{
                    changeMessage:function(){
                        this.mymessage=“hello!”;
                        return this.mymessage;
                    }
                }         
            })         
        </script>
    </body>
</html>


 I am adding a video for your reference.

Feel free to comment and subscribe my Youtube channel for more videos like these.

Author