vue.js分页如何写

Question

使用vue-resource的$http请求参数,参数应该怎么写跟vue.js配合,有案例吗,谢谢大家

Answer 1

https://segmentfault.com/a/1190000003931500

Answer 2

https://github.com/ChobitsSP/vue-pagination/tree/master/demo

Answer 3

刚好开始学vue，第一个练手的就是分页。
先看个效果图：

vue声明式渲染中有段话：

我们已经生成了我们的第一个 Vue 应用！看起来这跟单单渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被绑定在一起，所有的元素都是响应式的。我们如何知道？打开你的浏览器的控制台（就在这个页面打开），并修改 app.message，你将看到上例相应地更新。
再次打开浏览器的 JavaScript 控制台输入 app2.message = '新消息'，就会再一次看到这个绑定了 title 属性的 HTML 已经进行了更新。

只需要改变data里面的数据，页面渲染的数据就自动更改了，对于只用过jq的我来说，好叼有木有~

那么通过v-for渲染一个表格，给分页按钮加上点击事件获取数据更改v-for的数据，就能自动分页啦。

html:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="data">
    <table class="table table-striped table-hover">
        <tr v-for="todo in datas">
            <td>{{todo.title}}</td>
            <td>{{todo.learn_name}}</td>
            <td>{{todo.is_exist}}</td>
            <td>{{todo.is_download}}</td>
        </tr>
    </table>
</div>

<div id="page">
    <button v-for="list in lists" v-on:click="clickEvent(list.page)">{{list.page}}</button>
</div>

    var data = new Vue({
        el:'#data',
        data:{
            datas:[
                <?php foreach ($data as $value):?>
                {
                    title: '<?php echo $value["title"]?>' ,
                    learn_name: '<?php echo $value["learn_name"]?>',
                    is_exist: '<?php echo $value["is_exist"]?>',
                    is_download: '<?php echo $value["is_download"]?>'
                },
                <?php endforeach;?>
            ]
        }
    });

new Vue({
    el:'#page',
    data:{
        lists:[
            {page:1},
            {page:2},
            {page:3},
            {page:4}
        ]
    },
    methods:{
        clickEvent:function (page) {
            url = '<?php echo Yii::$app->urlManager->createUrl("/collect-data-copy/result")?>';
            $.post(url,{page:page},function (res) {
                data.datas = res;
            },'json');
        }
    }
});

Answer 4

简单可以封装哈
//api.js
const UserResource = Vue.resource(API_ROOT + 'users{/id}');
export default {getMe: function () {

return UserResource.get({id:'me'})

}
}
//test.js
import api from '../api';
api.getMe().then(response => { response => {

console.log(response.data);

},
response => {

console.log("error");

})

Answer 5

我的实现https://github.com/TIGERB/eas...你可以参考下，互相学习 哈哈

Answer 6

https://github.com/825618507/...