vue(13)-微博评论示例

前言

基于vue的微博评论案例

内容

1.功能要求

1.点击”提交评论”,我们把提交的数据扔到下面留言框.
2.页面刷新时候我们需要展示已经添加的一些数据

2.实现要求
1.点击”提交评论”,我们把提交的数据扔到下面留言框.

a.点击事件:v-on:事件 @事件
b.发送数据请求:this.$http.get()/post()/jsonp() this.$http()
c:按照接口请求数据

接口为:weibo.do?act=add&content=xxx    添加一条
        返回:{error:0, id: 新添加内容的ID, time: 添加时间}
  this.$http({//默认为get
    url:url,
    data:{
      act:"abc",
      content://content值是textarea数据值,我们绑定v-model,并在data中定义
    },

  }).then(function(res){
    //返回时候渲染留言
     console.log(res.data);
  });

d:请求成功时候渲染:在vue的data里面定义msgData[{},{}],里面内容是返回结果
e:在view里面遍历用vue-for
f:暂无留言出来条件:v-show msgData.length==0
5:清空textarea

2.页面刷新时候我们需要展示已经添加的一些数据

a.获取某一页
b.接口:weibo.php?act=get&page=1 获取一页数据

返回:[{id: ID, content: "内容", time: 时间戳, acc: 顶次数, ref: 踩次数}, {...}, ...]

c.交互:getPageData(n)
d:需要在页面一加载调用:能不能提供一个类似于:window.load函数,其实是vue有自带的:vue的生存周期
e:vue类似于window.load函数就是:ready

3.代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="style/weibo.css" rel="stylesheet" type="text/css" />
<script src="../js/vue.js"></script>
<script src="../js/vue-resource.js"></script>
<script>
    window.onload=function(){
        new Vue({
            el:".znsArea",
            data:{
               msg:"abc",
                msgData:[/*{
                  content:"aaa",
                    time:121212,
                    acc:0,
                    ref:4,
                    id:12
                }*/]
            },
            methods:{
                add:function(){
                    //发送数据
                    this.$http({
                        url:URL,
                        data:{
                            act:"abc",
                            content:this.msg
                        }
                    }).then(function(res){
                        var json = res.data;
                        //添加返回结果到msgData
                        this.msgData.unshift({
                            content:this.t1,
                            time:json.time,
                            acc:0,
                            ref:0,
                            id:json.id
                        });
                        //清空textarea数据
                        this.t1="";
                    });
                },
                getPageData:function (n) {
                    this.$http({
                        url:URL,
                        data:{
                           act:"get",
                            page:n
                        }
                    }).then(function(res){
                       //将分页数据加载到数据中(msgData)
                        var arr = res.data;
                        //遍历数据
                        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
                            })
                        }
                    });
                }
            },
            ready:function(){
                //页面一加载就查询第一页
                this.getPageData(1);
            }
        });
    };
</script>
</head>
<body>
<div class="znsArea">
<!--留言-->
 <div class="takeComment">
    <textarea name="textarea" class="takeTextField" id="tijiaoText" v-model="msg"></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->
            <p class="replyContent">{{item.content}}</p>
            <p class="operation">
                <span class="replyTime">{{item.time}}</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>
6.源码

源码