当前位置: 首页 > Web前端 > HTML

vue的第三天

时间:2023-04-02 18:16:44 HTML

最近让json给我带来了很大的麻烦。梦见写json???。..哎哟~我好像明白了~说说听听~有不同意见可以留言~接口是前后端约定的异步交互数据的方式,使用ajax或jsonp的形式数据格式可以是string或json本次用到的知识点:vue生命周期:(钩子函数)已创建->实例已创建√newVue()创建成功后,调用方法beforeCompile->编译前编译->编译后就绪->插入文件√beforeDestroy->销毁前销毁->销毁后,之前提到的get/post/jsonp方法也可以这样写:this.$http({url:地址data:提交数据到后台,method:'get'/post/jsonpjsonp:'cb'//cbName}).then(function(res){},function(res){});分析:原理:通过在textarea中输入数据,通过v-model获取用户输入的数据,在add方法中通过add接口将要添加的数据格式存储到mydata数组中。这里的内容是用户输入的,所以通过content:this.t1获取;同样使用getPage方法获取数据接口的页面,是一个数组,需要循环遍历,存放到mydata数组中,最后通过created调用,然后在结构体中用v-for显示在页面中创建:函数(){this.getPage(1);}我需要添加数据和显示之前的数据,需要两个接口,都在weibo.php中:添加一个接口weibo.php?act=add&content=xxx添加一个return:{error:0,id:ID新增内容的时间:添加时间}获取一页数据接口weibo.php?act=get&page=1取回一页数据back:[{id:ID,content:"content",time:时间戳,acc:点赞数,ref:点赞数},{...},...]同样,这里也有数据交互,仍然需要导入还有一个关于时间的自定义过滤器:Vue.filter('date',function(input){varoDate=newDate(输入*1000);返回oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+''+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();});过滤结构中的日期:{{item.time|date}}还有一个知识点是当网速慢的时候,会出现花括号。把v-cloak加到花括号的范围内解决问题。当然还有renderAppearance:Structure:问:为什么@click="add"有时有括号有时没有?答:如果有参数,加括号。如果有参数,则不需要添加它们。问题:为什么导入时没有调用weibo.php文件?答:因为这个需要PHP的运行环境,比如链接数据库的参数(可按Enter回复)

暂无留言
{{item.con}}

{{item.time|date}}{{item.acc}}{{item.ref}}删除

123该写vm了:Vue.filter('date',function(input){varoDate=newDate(input*1000);returnoDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+''+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();});window.onload=function(){varURL='weibo.php';varvm=newVue({el:'.znsArea',data:{t1:'',mydata:[]},methods:{add:function(){//weibo.php?act=add&content=xxxthis.$http({url:URL,data:{act:'add',content:this.t1}}).然后(函数(res){varjsons=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=1act:'get',page:n}}).then(function(res){vararr=res.data;for(vari=0;i