DEV Community

Cover image for Data binding in Vuejs
mattiatoselli
mattiatoselli

Posted on • Edited on

2 2

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.

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more