vue第三天

shiyang6017 發(fā)布于2019-08-01 16:24 / 1816人閱讀

摘要：最近是讓給我折騰的做夢都夢見寫。。。留言可按回復(fù)已留暫無留言刪除該寫了返回失敗內(nèi)容時(shí)間戳頂次數(shù)踩次數(shù)失敗

最近是讓json給我折騰的做夢都夢見寫json???。。。阿歐～琢磨著我算是明白了吧～我說說看，你們聽聽看～有不同觀點(diǎn)可以給我留言喲～

接口就是由前后端協(xié)定好異步交互數(shù)據(jù)的方式，使用ajax的形式或者jsonp的形式進(jìn)行傳遞，數(shù)據(jù)格式可以是字符串或者json

這次用到的知識點(diǎn)：

vue生命周期: （鉤子函數(shù)）

created    ->      實(shí)例已經(jīng)創(chuàng)建 √  new Vue()創(chuàng)建完成成功之后調(diào)用方法
beforeCompile ->   編譯之前
compiled   ->      編譯之后
ready      ->      插入到文檔中 √
 
beforeDestroy ->   銷毀之前
destroyed  ->      銷毀之后

之前講的get／post/jsonp的方式也可以用下面這種方式寫：

this.$http({
       url:地址
       data:給后臺提交數(shù)據(jù),
       method:"get"/post/jsonp
       jsonp:"cb" //cbName
    }).then(function(res){},function(res){});

分析：
原理：通過在textarea中輸入數(shù)據(jù)，通過v-model獲取用戶輸入的數(shù)據(jù)，在add方法通過添加接口將要添加的數(shù)據(jù)格式存在mydata數(shù)組中，這里面的內(nèi)容是用戶輸入的，所以獲取通過content:this.t1；同樣通過getPage方法獲取一頁數(shù)據(jù)接口，這里面獲取的是數(shù)組，需要循環(huán)遍歷一下，存在mydata數(shù)組中，最后通過created調(diào)用一下，然后在結(jié)構(gòu)中用v-for顯示在頁面當(dāng)中

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

我需要添加數(shù)據(jù)還需要把之前的數(shù)據(jù)顯示出來，這就需要兩個(gè)接口，兩個(gè)接口都在weibo.php中：
添加一條接口

weibo.php?act=add&content=xxx    添加一條
返回：{error:0, id: 新添加內(nèi)容的ID, time: 添加時(shí)間}

獲取一頁數(shù)據(jù)接口

weibo.php?act=get&page=1        獲取一頁數(shù)據(jù)
返回：[{id: ID, content: "內(nèi)容", time: 時(shí)間戳, acc: 頂次數(shù), ref: 踩次數(shù)}, {...}, ...]

同樣，這里有數(shù)據(jù)交互，仍然需要引入

這里面還有關(guān)于時(shí)間的自定義過濾器：

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

結(jié)構(gòu)中過濾一下date：

 {{item.time|date}}

還有一個(gè)知識點(diǎn)就是在網(wǎng)速慢的情況下會(huì)出現(xiàn)花括號，在用到花括號的范圍上加v-cloak解決，當(dāng)然還有其他解決辦法如v-text="msg">v-html="msg">

呈現(xiàn)樣子：

結(jié)構(gòu)：
問：為啥@click="add"有時(shí)候有括號有時(shí)候沒有？答：如果有參數(shù)的話就加括號，咩有參數(shù)就不用加了
問：為啥我引入weibo.php文件沒有調(diào)用？答：因?yàn)檫@需要php的運(yùn)行環(huán)境，比如鏈接數(shù)據(jù)庫的參數(shù)。


    
    
        
        
            
            (可按 Enter 回復(fù))
        
    
    
    
        暫無留言
        
            
                {{item.con}}
                
                    {{item.time|date}}
                    
                        {{item.acc}}
                        {{item.ref}}
                        刪除
                    
                
            
        
        
            1
            2
            3

該寫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