资讯专栏INFORMATION COLUMN

vue第三天

shiyang6017 / 1680人阅读

摘要:最近是让给我折腾的做梦都梦见写。。。留言可按回复已留暂无留言删除该写了返回失败内容时间戳顶次数踩次数失败

最近是让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: 踩次数}, {...}, ...]

同样,这里有数据交互,仍然需要引入

这里面还有关于时间的自定义过滤器:

 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:

 {{item.time|date}}

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

 

呈现样子:

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

(可按 Enter 回复)

{{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           
               
                                           
                       
                 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/50500.html

相关文章

  • vue三天

    摘要:最近是让给我折腾的做梦都梦见写。。。留言可按回复已留暂无留言删除该写了返回失败内容时间戳顶次数踩次数失败 最近是让json给我折腾的做梦都梦见写json???。。。阿欧~琢磨着我算是明白了吧~我说说看,你们听听看~有不同观点可以给我留言哟~ 接口就是由前后端协定好异步交互数据的方式,使用ajax的形式或者jsonp的形式进行传递,数据格式可以是字符串或者json 这次用到的知识点: v...

    NickZhou 评论0 收藏0
  • 九天学会Java,三天,选择结构

    摘要:选择结构变量和数据类型,赋值和输出算术运算选择结构循环结构函数定义,函数调用变量作用域栈,程序运行的基石面向对象异常处理语言提供的公用包上一节介绍了的算术运算,如加减乘除等,的运算规则跟四则运算一样。 选择结构 变量和数据类型,赋值和输出 算术运算 选择结构 = 60) { System.out.println(You have passed the exam...

    Java_oldboy 评论0 收藏0
  • 三天

    摘要:今天遇到了什么问题在想填代码的时候挺尴尬的,需求会翻译但是代码本身没办法翻译的,有点难对应上。今天学了什么相关知识,又是看为主的一天。因为在上敲过一点,所以看得比较快,权当复习。引一个笔记第三天 2019.3.8 用时:两小时。 今天遇到了什么问题? 在MDN想填代码的时候挺尴尬的,需求会翻译但是代码本身没办法翻译的,有点难对应上。 今天学了什么? CSS相关知识,又是看为主的一天。因...

    NotFound 评论0 收藏0
  • 三天

    摘要:今天遇到了什么问题在想填代码的时候挺尴尬的,需求会翻译但是代码本身没办法翻译的,有点难对应上。今天学了什么相关知识,又是看为主的一天。因为在上敲过一点,所以看得比较快,权当复习。引一个笔记第三天 2019.3.8 用时:两小时。 今天遇到了什么问题? 在MDN想填代码的时候挺尴尬的,需求会翻译但是代码本身没办法翻译的,有点难对应上。 今天学了什么? CSS相关知识,又是看为主的一天。因...

    yuanxin 评论0 收藏0
  • 2017-10-26 前端日报

    摘要:前端日报精选浅谈前端和移动端的事件机制字符串转数字陷阱前端魔法堂调用栈,异常实例中的宝藏一份完美的前端清单专为现代网站和极致的开发者打造居中办法学习笔记中文开发如何在里面优雅的解决跨域,路由冲突问题超详细前端学习译响应式脑电波如何使 2017-10-26 前端日报 精选 浅谈前端和移动端的事件机制JavaScript 字符串转数字:陷阱前端魔法堂——调用栈,异常实例中的宝藏一份完美的前...

    jindong 评论0 收藏0

发表评论

0条评论

shiyang6017

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<