Tech Ocean Hub

Posted by manasvisawant45 on September 7, 2020 9:27 pm

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.

Menu

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

Course Category

Archieve