DEV Community

Cover image for Data binding in Vuejs

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>
    <meta charset="utf-8">
    <!-- importing vue js dev library -->
    <!-- development version, includes helpful console warnings -->
    <script src=""></script>
    <title>My vue Test</title>
    <div id="app">
        What's your name?
        <input type="text" name="name" v-bind:value="name">
        <button v-on:click="changeName()">
            change name
    <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() {
       = "Martino";
Enter fullscreen mode Exit fullscreen mode

this is the resulting page:

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

Top comments (0)