Display Data with Vue.js

This is the first post from the learning Vue.js series, you can see all the code examples in this series on the following GitHub repository. Vue Examples.

The first thing you need to learn with VueJS is how you can use the Vue Object inside your application.

To get started all you need to do is include the following JavaScript.

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

Now you have access the Vue object in your application.

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

The code above creates a Vue object and uses the element with ID of app. Then it has a data property which has a message key with a value Hello World.

With the data property of message we can now use this with the application by using the handlebars syntax.

{{ message }}

Using the handlebar syntax for message will print the contents of message which is Hello World!.

Reactive

VueJS links the data and the DOM together which makes the code and the page reactive, so if you change the data the page will automatically update. You can see this happening by opening up your browser console and typing app.message, which will print Hello World! in your console as it matches the data property in Vue.

To see the reactive working in VueJS you can open your console and change the message value.

app.message = 'New text'

When you hit enter you'll see the new value of app.message in the console and you'll also see Hello World on the page text is now changed to New text.

View the demo page to see this in action.