Page content

With our environment set up and starter code installed, we're now ready to take the first steps in building the Vuebnb prototype.

Let's add some content to the page, including the header image, the title, and the About section. We'll be adding structure to our HTML file and using Vue.js to insert the correct content where we need it.

The Vue instance

Looking at our app.js file, let's now create our root instance of Vue.js by using the new operator with the Vue object.

app.js:

var app = new Vue();

When you create a Vue instance, you will usually want to pass in a configuration object as an argument. This object is where your project's custom data and functions are defined.

app.js:

var app = new Vue({
  el: '#app'
});

As our project progresses, we'll be adding much more to this configuration object, but for now we've just added the el property that tells Vue where to mount itself in the page.

You can assign to it a string (a CSS selector) or an HTML node object. In our case, we've used...