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);
                }
            })
        }