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

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

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.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}