Techoceanhub logo

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.

Share:

Categories

Archives

Related Posts

Array Destructuring

Array Destructuring Array destructuring is a powerful syntax introduced in ES6 that allows you to unpack elements from an array

Read More »

Explore our Affiliated partner links

hostgator website plan

Hostgator

Best Website hosting plans & Best for 24/7 support.

hostinger webhosting plan

Hostinger

Reasonable website hosting packages for small business & 24/7 Email support

Elementor pro

Design Worpdress website quickly using Elementor Builder and AI

buy elementor website templates

Buy Elementor Website Template

Buy ready made Elementor Website Template from us & Get Free Elementor pro licence for 1 year .