Beginning with Vuejs

#vue #html #webdev #javascript

The easiest way to try out Vue.js is using it by importing the library from a CDN, in order to do this, we create a simple html document.

<!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">
        {{ message }}
        <br>
        {{ sum }}
        <br>
        {{ array }}
    </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: {
            message: 'Hello Vue!', //this are the data
            sum: 2+2,
            array: [1,5,6, "Rome", "Italy", "cookies", 10]
          }
        })
    </script>
</body>
</html>

And this is the resultant page:

as we can see, at the end of the body, once all the html code has been loaded, we call our script and instantiate the vue instance. If we did it before, it wouldn't work.