假設(shè)有一個(gè)清單頁(yè)，採(cǎi)用vue 的 v-for 來(lái)渲染頁(yè)面。
那麼頁(yè)面的載入的時(shí)候，v-for 的data ， 是頁(yè)面載入時(shí)透過(guò)ajax請(qǐng)求資料
還是用後端程式循環(huán)出這data ？
類似：
<p id="data">
<table class="table table-striped table-hover">
<tr v-for="todo in datas">
<td>{{todo.title}}</td>
<td>{{todo.learn_name}}</td>
<td>{{todo.is_exist}}</td>
<td>{{todo.is_download}}</td>
</tr>
</table>
</p> var data = new Vue({
el:'#data',
data:{
datas:[
<?php foreach ($data as $value):?>
{
title: '<?php echo $value["title"]?>' ,
learn_name: '<?php echo $value["learn_name"]?>',
is_exist: '<?php echo $value["is_exist"]?>',
is_download: '<?php echo $value["is_download"]?>'
},
<?php endforeach;?>
]
}
});
7
0
0
擁有18年軟件開(kāi)發(fā)和IT教學(xué)經(jīng)驗(yàn)。曾任多家上市公司技術(shù)總監(jiān)、架構(gòu)師、項(xiàng)目經(jīng)理、高級(jí)軟件工程師等職務(wù)。 網(wǎng)絡(luò)人氣名人講師，...
你上面的做法沒(méi)有問(wèn)題。
不過(guò)既然提到了第一次加載的問(wèn)題，我就多說(shuō)兩句.
看起來(lái)你的頁(yè)面都是 php 渲染直出的，那不如把第一頁(yè)的資料直接輸出給 cache 好了，這可以節(jié)省首次的 ajax 請(qǐng)求，直接拿資料渲染，這可以提升首屏載入速度
如果需要 seo 的考慮，也可以考慮頁(yè)面首次載入時(shí)直接用 php 輸出 html 結(jié)構(gòu)，後續(xù)翻頁(yè)請(qǐng)求使用 ajax 結(jié)合 vuejs 的 v-if 與 v-else 邏輯一起來(lái)用。
vue mounted的時(shí)候調(diào)用一個(gè)method非同步獲取資料
既然都用Vue了，就不要再用後端循環(huán)了，因?yàn)閂ue是數(shù)據(jù)驅(qū)動(dòng)的，就把這些處理數(shù)據(jù)顯示的問(wèn)題交給Vue來(lái)做
後端的功能做成api，前端使用vue呼叫就可以。沒(méi)必要混用。
你這樣太欺負(fù)vue不會(huì)取得數(shù)據(jù)了。
感謝各位的解答，我用vue-resource在第一次加載的時(shí)候獲取數(shù)據(jù)，卸載created方法中實(shí)現(xiàn)。
html:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.3.1/vue-resource.min.js"></script>
<p id="data">
<table class="table table-striped table-hover">
<tr v-for="todo in datas">
<td>{{todo.title}}</td>
<td>{{todo.learn_name}}</td>
<td>{{todo.is_exist}}</td>
<td>{{todo.is_download}}</td>
</tr>
</table>
<button v-bind:class="[{ 'btn btn-success': list.is_show ,'btn btn-info': !list.is_show }]" v-for="list in lists" v-on:click="clickEvent(list.no)">{{list.no}}</button>
</p>js:
var cache = {};
var url = '<?php echo Yii::$app->urlManager->createUrl("/collect-data-copy/vue")?>';
var ajaxGetData = function (page) {
if(page in cache){
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;
});
}
};
var data = new Vue({
el:'#data',
data:{
datas:{},
lists:{}
},
created:function(){
ajaxGetData(45);
},
methods:{
clickEvent:function (page) {
ajaxGetData(page);
}
}
});
