Vue js Hello World [Your First Step With Vue.js]

0

Vue js Hello World [Your First Step With Vue.js]

Vue.js is quickly becoming a very popular and strong competition for other front-end frameworks. It’s a progressive and lightweight framework for building user interfaces. Here, we’ll make our first step by creating a simple Vue js hello world example.

Like Angular, Vue js is also perfectly capable of powering Single Page Applications and it can be an alternative to other frameworks like Angular and React.

Surely, in near future we will see super competition between all these front-end frameworks (Angular, React and Vue).

So, this is the time to make our first step with Vue js by creating a simple Hello World example.

1. Create a simple HTML file

First of all, we’ll create a traditional HTML file which will allow us to print a simple message on the browser window.

To use the vue.js in our app, we just need to import as a script what we generally do with our traditional libraries.

<script src="https://unpkg.com/vue@2.1.4/dist/vue.js"></script>

Here, you have an option to include CDN library of vue.js as well.

<!DOCTYPE html>
<html lang="en">
  <meta>
    <meta charset="UTF-8">
    <title>Hello World in Vue.js</title>
  </meta>
  <head>
    <script src="https://unpkg.com/vue@2.1.4/dist/vue.js"></script>
  </head>
 </html>

2. Define an HTML element and create vue.js instance

Here, we’ll create an HTML element which will populate the value dynamically from Vue.js instance.

  • We’ve an HTML div with ID hello-world-app, and there’s msg variable which will populate the data dynamically.
  • Now, create a Vue instance by using new Vue keyword.
  • Next, define the el with the div ID which is #hello-world-app.
  • Finally, we’ve provided the value of msg in data object.

<body>
<div id="hello-world-app">
      <h1>{{ msg }}</h1>
</div>
<script>
      new Vue({
        el: "#hello-world-app",
        data: {
            msg: "Vue js Hello World - Your First Vue.js App"
        }
      });
</script>
</body>

That’s it, now you can run your application in the browser. It will say Vue js Hello World – Your First Vue.js App.

Moreover, If you’re in dilemma of choosing a front-end framework for your next project then Compare it with other frameworks that will help you.

I hope, you loved this article. Feel free to share your questions/suggestions by commenting below.

Leave a Reply

Be the First to Comment!

avatar
  Subscribe  
Notify of