Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

Vue App

Related:
Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

What is a Vue app?

If you create an vue app, you’ll need a vue instance. A vue instance contains the apps variables and methods.

If you know object orientated programming: it’s an object that contains the app.

Create a vue.js app

We create the file app.js with this contents:

new Vue({
el: '#app',

data: {
message: 'Vue.js example!'
}
});

We defined the scope of our application using ‘el‘. This is simply the content of the div in index.html.

‘data’ holds all the variables for our app. In this example we have only one variable, message.

Now that we created the javascript code, lets create the view: create the file index.html

<script src="//unpkg.com/vue"></script>
<div id="app">
{{ message }}
</div>
<script src="app.js"></script>

Load it in your browser, you’ll see the value of message.

vuejs instance

The variable message (and Vue variables) are only accessible within the div with id “app”. Outside of the div they are not accessible.

Download Vue.js Examples


← What is Vue.js? Vue.js for →

Posts


© vuejsexamples.net - Privacy Policy - Cookie Policy