vue第三天

最近是让json给我折腾的做梦都梦见写json???。。。阿欧～琢磨着我算是明白了吧～我说说看，你们听听看～有不同观点可以给我留言哟～

接口就是由前后端协定好异步交互数据的方式，使用ajax的形式或者jsonp的形式进行传递，数据格式可以是字符串或者json

这次用到的知识点：

vue生命周期: （钩子函数）

created    ->      实例已经创建 √  new Vue()创建完成成功之后调用方法
beforeCompile ->   编译之前
compiled   ->      编译之后
ready      ->      插入到文档中 √
 
beforeDestroy ->   销毁之前
destroyed  ->      销毁之后

之前讲的get／post/jsonp的方式也可以用下面这种方式写：

this.$http({
       url:地址
       data:给后台提交数据,
       method:'get'/post/jsonp
       jsonp:'cb' //cbName
    }).then(function(res){},function(res){});

分析：
原理：通过在textarea中输入数据，通过v-model获取用户输入的数据，在add方法通过添加接口将要添加的数据格式存在mydata数组中，这里面的内容是用户输入的，所以获取通过content:this.t1；同样通过getPage方法获取一页数据接口，这里面获取的是数组，需要循环遍历一下，存在mydata数组中，最后通过created调用一下，然后在结构中用v-for显示在页面当中

created:function () {
                    this.getPage(1);
                }              

我需要添加数据还需要把之前的数据显示出来，这就需要两个接口，两个接口都在weibo.php中：
添加一条接口

weibo.php?act=add&content=xxx    添加一条
返回：{error:0, id: 新添加内容的ID, time: 添加时间}

获取一页数据接口

weibo.php?act=get&page=1        获取一页数据
返回：[{id: ID, content: "内容", time: 时间戳, acc: 顶次数, ref: 踩次数}, {...}, ...]

同样，这里有数据交互，仍然需要引入<script src="js/vue-resource.js"></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();
        });

结构中过滤一下date：

 <span class="replyTime">{{item.time|date}}</span>

还有一个知识点就是在网速慢的情况下会出现花括号，在用到花括号的范围上加v-cloak解决，当然还有其他解决办法如<span v-text='msg'></span><span v-html='msg'></span>

 <div class="reply" v-for="item in msgData" v-cloak>
 <style>
        [v-cloak]{
            display: none;
        }
 </style>

呈现样子：

结构：
问：为啥@click="add"有时候有括号有时候没有？答：如果有参数的话就加括号，咩有参数就不用加了
问：为啥我引入weibo.php文件没有调用？答：因为这需要php的运行环境，比如链接数据库的参数。

<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="mydata.length==0">暂无留言</div>
        <div class="messList" v-for="item in mydata">
            <div class="reply" >
                <p class="replyContent">{{item.con}}</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> 

该写vm了：

 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';
            var vm=new Vue({
                el:'.znsArea',
                data:{
                    t1:'',
                    mydata:[]
                },
                methods:{
                    add:function () {
//                        weibo.php?act=add&content=xxx
                        this.$http({
                            url:URL,
                            data:{
                                act:'add',
                                content:this.t1
                            }
                        }).then(function (res) {
                            var jsons=res.data;
                            this.mydata.unshift({
                                con:this.t1,
                                time:jsons.time,
                                acc:'0',
                                ref:'0',
                                id:jsons.id
                            })
                            this.t1='';
                        },function (res) {
                           alert("返回失败");
                        })
                    },
                    getPage:function (n) {
                        this.$http({
                            url:URL,
                            data:{
//                                weibo.php?act=get&page=1
                                act:'get',
                                page:n
                            }
                        }).then(function (res) {
                            var arr=res.data;

                            for(var i=0;i<arr.length;i++){
                                this.mydata.push({
//                   [{id: ID, content: "内容", time: 时间戳, acc: 顶次数, ref: 踩次数}, {...}, ...]
                                    con:arr[i].content,
                                    time:arr[i].time,
                                    acc:arr[i].acc,
                                    ref:arr[i].ref,
                                    id:arr[i].id

                                });
                            }
                        },function (res) {
                            alert("失败");
                        })
                    }

                },
                created:function () {
                    this.getPage(1);
                }
            })
        }