DEV Community

Cover image for Beginning with Vuejs

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>
    <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">
        {{ message }}
        {{ sum }}
        {{ array }}
    <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]
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (3)

geminii profile image

Hi 👋
Some improvments :

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

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

ashishk1331 profile image
Ashish Khare😎

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