Vue JS 2 Data Binding


In this post, We cover data binding in Vue js, In the Last post, we see how to print data in Vue from Vue instance but it's it something different.

So we create a new property in Vue instance called website and assigned a link https://www.codermen.com/   

new Vue({
    el: '#vue-app', 
   
   	data:{
   		website: 'https://www.codermen.com/',
   	},
});

 

We here we want to use this output this link which is stored in Vue instance in Href Attribute in a  link to do this we use directive v-bind in Vue Js. this directive tells Vue to use dynamic data in Href which is stored in Vue instance.

Here is a code sample

  <body> 
    <div id="vue-app">

       <a v-bind:href="website">Link</a>
       
    </div>
    <script src="app.js"></script>
  </body>

same as it's we can use v-bind directive for input and other 

 
  <body> 
    <div id="vue-app">

        <!-- for href -->
       <a v-bind:href="website">Link</a>

       <!-- same as input fields -->
        <input type="text" name="name" v-bind:value="name">

    </div>
    <script src="app.js"></script>
  </body>

This v-bind directive uses to edit data when the user wants to edit the data.