Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:
vue.js

Published at DZone with permission of Paul Underwood, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

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

{{ parent.tldr }}

{{ parent.urlSource.name }}