Vue js 3 data and attributes binding

 

Data and attribute binding:

//app.js 

//eivabe kaj korake bole string interpulation

var app = Vue.createApp({

    data(){

        return{   

            tutorialInfo: {

                name: 'vue js 3',

                githublink: 'https://github.com/Developerzakir'

            }

        };

    }

});

app.mount('#app');

.................................

//index.html er code

  <div id="app">

        <h3>

            welcome to 

            {{tutorialInfo.name}}

        </h3>

    </div>

output: welcome to vue js 3

...............................................

//attribute binding

//github e click korle github er link e niye jabe.

         <p>

            <a v-bind:href="tutorialInfo.githublink">Github</a>     //attribute binding

        </p>

..................................

/html tag niye kaj

var app = Vue.createApp({

    data(){

        return{   

        

            htmlcode: ' <a href="https://github.com/Developerzakir">git</a>'

        };

    }

});

app.mount('#app');

............................

    <div id="app">

     

      

        <p v-html="htmlcode"></p>       //html tag niye kaj

       

    </div>

output: git

....................................