Hello World in Vue.js

Vue.js is quickly becoming a very popular option as a library for reactive components. It's lightweight, simple to grasp and fun to play with, and it can prove to be a great alternative to other libraries like React or Angular.

Letโ€™s get our feet wet with the simplest of examples. Hereโ€™s the code for our basic Hello World app, with the interesting parts highlighted:

<!DOCTYPE html>
<html lang="en">
  <meta>
    <meta charset="UTF-8">
    <title>Hello World in Vue.js</title>
  </meta>

  <body>
	
    <div id="hello-world-app">
      <h1>{{ msg }}</h1>
    </div>

    <script
      src="//cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js">
    </script>

    <script>
      new Vue({
        el: "#hello-world-app",
        data() {
          return {
            msg: "Hello World!"
          }
        }
      });
    </script>

  </body>
</html>

Step by step breakdown:

  • First we have a basic HTML boilerplate file.
  • A div with an id of #hello-world-app will contain our app.
  • In the div, we have an h1 and a reference to an msg piece of data.
  • We call for the minified Vue.js library thatโ€™s hosted on cdnjs. 2.1.6 is the latest version as of this writing.
  • We then instantiate a new Vue object and tell it with el that our app is the #hello-world-app div.
  • Finally, we provide the data needed with the data object. In this case, we provide the data for msg.

And thatโ€™s it for this brief introduction! Learn more by reading the getting started section of the official Vue.js guide.

  Tweet It

๐Ÿ•ต Search Results

๐Ÿ”Ž Searching...

Sponsored by #native_company# โ€” Learn More
#native_title# #native_desc#
#native_cta#