DEV Community

Cover image for Beginning with Vuejs
mattiatoselli
mattiatoselli

Posted on

Beginning with Vuejs

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>
Enter fullscreen mode Exit fullscreen mode

And this is the resultant page:
image

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.

Discussion (3)

Collapse
geminii profile image
Jimmy

Hi 👋
Some improvments :

  • use latest vue cdn (currently version 3)
  • add language for you script examples
Collapse
mattiatoselli profile image
mattiatoselli Author

Hi, this is just an introduction, in further tutorials we are going to use the VUE CLI so we are going to use Vue3 :)

Collapse
hugekontrast profile image
Ashish Khare😎

Only this much.
[ That's what she said. ]