Over a million developers have joined DZone.

Display Data with Vue.js

DZone's Guide to

Display Data with Vue.js

Here is the first lesson on Vue.js shows how to use Vue objects.

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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.

    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello World!'

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!.


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.

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}