vue教程2-07 微博评论功能

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="style/weibo.css" rel="stylesheet" type="text/css" />
    <style>
        [v-cloak]{
            /*比较大的段落，防止闪烁，看到花括号*/
            display: none;
        }
    </style>
    <script src="../vue.js"></script>
    <script src="../vue-resource.js"></script>
    <script>
        Vue.filter('date',function(input){
            var oDate=new Date(input*1000);
            return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();
        });
        window.onload=function(){
            var URL='weibo.php';

            new Vue({
                el:'.znsArea',
                data:{ //vue的属性、数据
                    t1:'',
                    msgData:[]
                },
                methods:{
                    add:function(){
                        //发送请求
                        this.$http({
                            url:URL,
                            data:{ //后台发送数据
                                act:'add',
                                content:this.t1
                            }
                        }).then(function(res){
                            var json=res.data;
                            //msgData添加数据

                            this.msgData.unshift({
                                content:this.t1,
                                time:json.time,
                                acc:0,
                                ref:0,
                                id:json.id
                            });

                            this.t1='';
                        });
                    },
                    getPageData:function(n){
                        this.$http({
                            url:URL,
                            data:{
                                act:'get',
                                page:n
                            }
                        }).then(function(res){
                            //console.log(res.data);
                            var arr=res.data;
                            console.log(arr);
                            for(var i=0; i<arr.length; i++){
                               this.msgData.push({
                                   content:arr[i].content,
                                   time:arr[i].time,
                                   acc:arr[i].acc,
                                   ref:arr[i].ref,
                                   id:arr[i].id
                               });
                            }
                        });
                    }
                },
                created:function(){
                   this.getPageData(1);
                }
            });
        };
    </script>
</head>

<body>
<div class="znsArea">
<!--留言-->
     <div class="takeComment">
        <textarea name="textarea" class="takeTextField" id="tijiaoText" v-model="t1"></textarea>
        <div class="takeSbmComment">
            <input type="button" class="inputs" value="" @click="add" />
            <span>(可按 Enter 回复)</span>
        </div>
    </div>
<!--已留-->
    <div class="commentOn">
        <div class="noContent" v-show="msgData.length==0">暂无留言</div>
        <div class="messList">
            <div class="reply" v-for="item in msgData" v-cloak>
                <p class="replyContent">{{item.content}}</p>
                <p class="operation">
                    <span class="replyTime">{{item.time|date}}</span>
                    <span class="handle">
                        <a href="javascript:;" class="top">{{item.acc}}</a>
                        <a href="javascript:;" class="down_icon">{{item.ref}}</a>
                        <a href="javascript:;" class="cut">删除</a>
                    </span>
                </p>
            </div>
        </div>
        <div class="page">
            <a href="javascript:;" class="active">1</a>
            <a href="javascript:;">2</a>
            <a href="javascript:;">3</a>
        </div>
    </div>
</div>
</body>
</html>