资料内容：
Making the view data-driven
Driving the template with data will allow us to dynamically render the view based upon the data
that we give it. Let’s familiarize ourselves with the applications data model.
The data model
Within our app directory, we’ve included a file called seed.js. seed.js contains sample data for a
list of submissions (it seeds our application with data). The seed.js file contains a JavaScript object
called Seed.submissions. Seed.submissions is an array of JavaScript objects where each represents
a sample submission object:
const submissions = [
{
id: 1,
title: 'Yellow Pail',
description: 'On-demand sand castle construction expertise.',
url: '#',
votes: 16,
avatar: '../public/images/avatars/daniel.jpg',
submissionImage: '../public/images/submissions/image-yellow.png',
},
// ...
]
Each submission has a unique id and a series of properties including title, description, votes, etc.
Since we only have a single submission displayed in our view, we’ll first focus on getting the data
from a single submission object (i.e. submissions[0]) on to the template.
The Vue Instance
The Vue instance is the starting point of all Vue applications. A Vue instance accepts an options
object which can contain details of the instance such as its template, data, methods, etc. Root level
Vue instances allow us to reference the DOM with which the instance is to be mounted/attached to.
Let’s see an example of this by setting up the Vue instance for our application. We’ll write all our
Vue code for the rest of this chapter inside the main.js file. Let’s open main.js and create the Vue
instance using the Vue function:
