假设有一个列表页,采用vue的v-for来渲染页面。
那么页面的加载的时候,v-for的data,是页面加载时通过ajax请求数据
还是用后端程序循环出这data?
类似这样:
{{todo.title}} {{todo.learn_name}} {{todo.is_exist}} {{todo.is_download}}
vardata=newVue({el:'#data',data:{datas:[{title:'',learn_name:'',is_exist:'',is_download:''},]}});
通过ajax请求数据要好点
前端和后端耦合度越低越好
你上面的做法没有问题。
不过既然提到了第一次加载的问题,我就多说两句.
看上去你的页面都是php渲染直出的,那不如把第一页的数据直接输出给cache好了,这可以节省首次的ajax请求,直接拿数据渲染,这可以提升首屏加载速度
如果需要seo的考虑,也可以考虑页面首次加载时直接用php输出html结构,后续翻页请求使用ajax结合vuejs的v-if
与v-else
逻辑一起来用。
都可以,给datas初值,ajax取得数据后换掉即可。
vuemounted的时候调用一个method异步获取数据
既然都用Vue了,就不要再用后端循环了,因为Vue是数据驱动的,就把这些处理数据显示的问题交给Vue来做
后端的功能做成api,前端使用vue调用就可以。没必要混用啊。
你这样太欺负vue不会获取数据了。
感谢各位的解答,我用vue-resource
在第一次加载的时候获取数据,卸载created方法中实现。
html:
<scriptsrc="https://unpkg.com/vue/dist/vue.js"></script><scriptsrc="https://cdn.jsdelivr.net/vue.resource/1.3.1/vue-resource.min.js"></script><divid="data"><tableclass="tabletable-stripedtable-hover"><trv-for="todoindatas"><td>{{todo.title}}</td><td>{{todo.learn_name}}</td><td>{{todo.is_exist}}</td><td>{{todo.is_download}}</td></tr></table><buttonv-bind:class="[{'btnbtn-success':list.is_show,'btnbtn-info':!list.is_show}]"v-for="listinlists"v-on:click="clickEvent(list.no)">{{list.no}}</button></div>
js:
varcache={};varurl='<?phpechoYii::$app->urlManager->createUrl("/collect-data-copy/vue")?>';varajaxGetData=function(page){if(pageincache){data.datas=cache[page].data;data.lists=cache[page].list;}else{Vue.http.post(url,{page:page,'<?=Yii::$app->request->csrfParam?>':'<?=Yii::$app->request->getCsrfToken()?>'},{'emulateJSON':true}).then(function(res){data.datas=res.body.data;data.lists=res.body.list;cache[page]=res.body;});}};vardata=newVue({el:'#data',data:{datas:{},lists:{}},created:function(){ajaxGetData(45);},methods:{clickEvent:function(page){ajaxGetData(page);}}});