Vue.js - An Introduction

1

Vue.js - An Introduction

Vue.js is a lightweight, progressive framework for building user interfaces. In this tutorial, I’m going to show you how to build a dead simple “Hello World” example.

<body>
    <div id='app'>
        <h1>{{ message }}</h1>
    </div>
    
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello World!'
            }
        })
    </script>
</body>

Let’s break this down:

  • We have a handlebar-like template that takes in a value: message
  • In our script tag, we declare a new instance of Vue
  • The instance of Vue has a data object that will contain all of our data, in our case the message value
  • We tell Vue what element it needs to bind to using the el property

As you might expect, the following will render as:

<h1>Hello World!</h1>

This is the most basic example you can make, but there’s also so much more that you can do. Vue.js is a very powerful front-end library, you can go through their guide to learn more.

2 Likes