DEV Community

loading...
Cover image for Data binding in Vuejs

Data binding in Vuejs

mattiatoselli
Web developer at Fluentify LTD, developing with Linux, Docker and aws.
Updated on ・1 min read

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)