書名： Full-Stack Vue.js 2 and Laravel 5
作者名： Anthony Gore
本章字數： 138字
更新時間： 2021-07-02 19:57:18

Mock listing

While we're developing, it'd be nice to work with some mock data so that we can see how our completed page will look. I've included sample/data.js in the project for this very reason. Let's load it in our document, making sure it goes above ourapp.jsfile.

index.html:

<body>
<p id="toolbar">...</p>
<p id="app">...</p>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="sample/data.js"></script>
<script src="app.js"></script>
</body>

Have a look at the file and you'll see that it declares a sample object. We will now utilize it in our data configuration.

app.js:

data: {
  title: sample.title,
  address: sample.address,
  about: sample.about
}

Once you save and refresh, you'll see more realistic data on the page:

Figure 2.5. Page including mock-listing sample

Using global variables split over different script files in this way is not an ideal practice. We'll only be doing this in the prototype, though, and later we'll get this mock-listing sample from the server.

官术网_书友最值得收藏!

Full-Stack Vue.js 2 and Laravel 5

Mock listing