WordPress文章列表使用Vue

开始准备

需要准备jquery-2.1.1.min.js、vue.js、axios.min.js文件，放在当前使用的主题目录下面。

1、在header.php文件里面加载上面我们准备的js文件，代码如下：

<script src="<?php bloginfo('template_directory')?>/js/jquery-2.1.1.min.js"></script>
<script src="<?php bloginfo('template_directory')?>/js/vue.js"></script>
<script src="<?php bloginfo('template_directory')?>/js/axios.min.js"></script>

2、在主题目录下面新建一个category.php文件，代码如下：

<div class="main" id="app">
    <div class="container">
        <ul class="posts">
            <li v-for="(item,key,i) in info">
                <a class="link"  v-bind:href="item.link"> <img v-bind:src="item.thumbnailurl" >
                    <div class="right">
                        <h2>{{item.title.rendered}}</h2>
                        <p v-html="item.excerpt.rendered"></p>
                        <div class="meta">问答| {{item.date|dateFormat('yyyy-MM-DD')}}   </div>
                    </div>
                </a>
            </li>
        </ul>
        <div id="pagination"><a @click="add">点击加载更多</a></div>
        <div>{{msg}}</div>
    </div>
</div>

3、在footer.php里面加入以下js代码：

<script>
    Vue.filter('dateFormat',function(dateStr,pattern=""){
        var dt = new Date(dateStr)
        var y = dt.getFullYear()
        var m = (dt.getMonth()+1).toString().padStart(2,'0')
        var d = dt.getDate();
        if(pattern.toLowerCase()==='yyyy-mm-dd'){
            return `${y}-${m}-${d}`
        }else{
            var hh = dt.getHours()
            var mm = dt.getMinutes()
            var ss = dt.getSeconds()
            return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
        }
    })
    new Vue({
        el: '#app',
        data () {

            return {
                msg:'哈哈哈',
                page:1,
                info: null,
            }
        },
        mounted () {
            axios
                .get('/wp-json/wp/v2/posts/?page='+this.page)
                .then(response => (this.info = response.data))
                .catch(function (error) { // 请求失败处理
                        console.log(error);
                });
        },
        methods:{
            add(){
                var page = this.page;
                this.page = page+1;
                axios
                    .get('/wp-json/wp/v2/posts/?page='+this.page)
                    .then(response => (this.info = response.data))
                    .catch(function (error) { // 请求失败处理
                            console.log(error);
                    });

                console.log(page);
            },
        }
    })
</script>