在网页开发中，常常需要将大量的数据分页展示在页面上，以便于用户浏览和使用。在Vue框架下，我们可以使用组件和指令来轻松实现按页展示的功能。

首先，我们需要定义一个组件来渲染分页的内容和控制分页操作。在这个组件中，我们需要定义一些数据和方法。例如，我们需要一个data属性来存储分页数据，包括总页数、当前页码等。我们还需要一个方法来更新数据和控制页面跳转。

Vue.component('pagination', {
data: function() {
return {
currentPage: 1,
totalPages: 10,
itemsPerPage: 10,
items: []
}
},
methods: {
fetchData: function() {
// 获取数据的方法
},
paginate: function(page) {
// 处理分页跳转的方法
}
},
mounted: function() {
this.fetchData();
},
template: `
// 分页页面展示内容
// 分页控制按钮
`
});

在组件的template中，我们可以使用Vue的模板语法来渲染页面内容和控制按钮。为了方便展示，我们可以使用v-for指令来循环遍历数据，并使用v-if指令来显示当前页的数据。

< template>< div>< ul class="list-group">< li class="list-group-item" v-for="(item,index) in items">{{item}}< /li>< /ul>

接下来，我们需要在Vue实例中使用这个组件。可以将组件直接挂载在页面上，也可以通过指令的形式来使用。

var app = new Vue({
el: "#app",
data: {
// 其他数据
},
methods: {
// 其他方法
}
});
// 指令形式
Vue.directive('pagination', {
bind: function(el, binding, vnode) {
// 操作分页的方法
}
});

通过指令的形式，我们可以在页面中的任意位置调用分页功能。同时，使用组件的形式也可以实现分页的嵌套和复用。