vuejs-paginator example html markup

Question

我有一个非常愚蠢的问题：vuejs-paginator 但我很难运行此示例(我是这里的后端开发人员(。

所以，我头上有：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuejs-paginator/2.0.0/vuejs-paginator.js"></script>

然后如页面中所述，我有：

<script>
new Vue({
el: '#app',
data () {
return {
// The resource variable
animals: [],
// Here you define the url of your paginated API
resource_url: 'http://hootlex.github.io/vuejs-paginator/samples/animals1.json'
}
},
components: {
VPaginator: VuePaginator
},
methods: {
updateResource(data){
this.animals = data
}
}
});            
</script>

现在，我的HTML中应该有什么F，我不知道，作者似乎说，我使用：

<v-paginator resource_url="api/animals" @update="updateResource"></v-paginator>

但是，我认为这只是为了分页。app元素包含什么，它在哪里？文档似乎没有显示这一点？然后，作者展示了一些random标记：

<ul>
<li v-for="animal in animals">
{{ animal.name }}
</li>
</ul>

这应该去哪里？我应该有一个app的div 元素吗？

Answer 1

您可以通过将内容添加到template键来向应用添加内容：

<script>
new Vue({
el: '#app',
data () {
return {
// The resource variable
animals: [],
// Here you define the url of your paginated API
resource_url: 'http://hootlex.github.io/vuejs-paginator/samples/animals1.json'
}
},
components: {
VPaginator: VuePaginator
},
methods: {
updateResource(data){
this.animals = data
}
},
template: `
<div>
<ul>
<li v-for="animal in animals">
{{ animal.name }}
</li>
</ul>
<v-paginator :resource_url="resource_url" @update="updateResource"></v-paginator>
</div>
`
});            
</script>

类似的东西。

您还需要在 html 中设置初始<div id="app"></div>。这是 Vue 将挂载应用程序并加载内容的元素。

编辑

该插件使用this.$http，这需要某种未指定的依赖项。

我对以下codepen进行了更改，现在可以正常工作：

https://codesandbox.io/s/competent-dream-zngzt