DEV Community

Cover image for Data binding in Vuejs
mattiatoselli
mattiatoselli

Posted on • Updated on

Data binding in Vuejs

In this article we are going explore a particularly interesting feature that has many applications. What is referred to as data-binding. Basically, through the framework, we can map the attributes of our html tags with values ​​provided by our Vue instance. We could bind for example the value of an input field:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- importing vue js dev library -->
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>My vue Test</title>
</head>
<body>
    <div id="app">
        What's your name?
        <br>
        <input type="text" name="name" v-bind:value="name">
        <br>
        <button v-on:click="changeName()">
            change name
        </button>
    </div>
    <script type="text/javascript">
        var app = new Vue({ //instantiating the vue instance
          el: '#app', //we select where vue is going to work in the DOM
          data: {
            name: 'Mattia'//this are the data
          },
          methods: {
            changeName: function() {
                this.name = "Martino";
            }
          }
        })
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

this is the resulting page:
image

If we click on the button, the name shown as value in the field will be changed immediately.

Discussion (0)