django中使用vue.js的要點(diǎn)總結(jié)
有接口如下：
http://127.0.0.1:8000/info/schemes/
返回json數(shù)據(jù)：
[
{
"name": "（山上雙人標(biāo)準(zhǔn)間）黃山經(jīng)典二日游（魅力黃山，日出云海，人間仙境，春暖花開(kāi)）",
"day": 2,
"night": 1,
"favorites": 0,
"score_avg": 4,
"photo_url": "/media/images/scenic/a9836502.jpg",
"review_num": 2,
"unit_price": 0
},
{
"name": "0購(gòu)物+三環(huán)內(nèi)接！鄭州—焦作云臺(tái)山二日游，含1晚住宿+1早2正餐，無(wú)強(qiáng)制消費(fèi)",
"day": 2,
"night": 1,
"favorites": 0,
"score_avg": 4,
"photo_url": "/media/images/scenic/3a82e902.jpg",
"review_num": 1,
"unit_price": 329
},
{
"name": "島內(nèi)酒店上門接>廈門至泉州開(kāi)元寺+南少林+洛陽(yáng)橋+西街+天后宮一日游",
"day": 1,
"night": 0,
"favorites": 0,
"score_avg": 4,
"photo_url": "/media/images/scenic/f8106f02.jpg",
"review_num": 2,
"unit_price": 0
},
{
"name": "南寧✈西安兵馬俑華清池延安黃帝陵壺口瀑布城墻5日/耳麥自助餐/0購(gòu)物/接送機(jī)",
"day": 5,
"night": 4,
"favorites": 0,
"score_avg": 4,
"photo_url": "/media/images/scenic/93835fbb.jpg",
"review_num": 1,
"unit_price": 3045
},
{
"name": "北京+天津純玩6日游/餐餐特色/連鎖酒店/專車專導(dǎo)/故宮/瓷房子贈(zèng)升國(guó)旗",
"day": 6,
"night": 5,
"favorites": 0,
"score_avg": 4,
"photo_url": "/media/images/scenic/0f.water.jpg",
"review_num": 1,
"unit_price": 0
},
{
"name": "住蒙古包>內(nèi)蒙古希拉穆仁草原+響沙灣沙漠+成吉思汗陵+呼和浩特市內(nèi)雙飛五日游",
"day": 5,
"night": 4,
"favorites": 0,
"score_avg": 4,
"photo_url": "/media/images/scenic/4b806602.jpg",
"review_num": 1,
"unit_price": 0
},
{
"name": "北京全景高端五星游丨餐餐特色&0購(gòu)物0自費(fèi)&24H接送&贈(zèng)德云社+人民大會(huì)堂",
"day": 5,
"night": 4,
"favorites": 0,
"score_avg": 4,
"photo_url": "/media/images/scenic/ca841f56.jpg",
"review_num": 1,
"unit_price": 0
},
{
"name": "機(jī)票+含餐>西安兵馬俑/華清池/驪山/西岳華山/延安/黃帝陵/壺口瀑布6日",
"day": 6,
"night": 5,
"favorites": 0,
"score_avg": 4,
"photo_url": "/media/images/scenic/93835fbb.jpg",
"review_num": 1,
"unit_price": 2740
},
{
"name": "高鐵/動(dòng)車往返>寧波—溫州雁蕩山2日游 凈名谷+靈巖景區(qū)+大龍湫 賞靈峰夜景",
"day": 2,
"night": 1,
"favorites": 0,
"score_avg": 4,
"photo_url": "/media/images/scenic/7565abdd.jpg",
"review_num": 1,
"unit_price": 0
}
]
通過(guò)vue去請(qǐng)求這個(gè)api，并將數(shù)據(jù)遍歷，生成多個(gè)div塊模板，并渲染數(shù)據(jù)，效果圖如下：
api 返回json中有9條記錄，所以對(duì)應(yīng)應(yīng)該生成9個(gè)上圖的div塊，開(kāi)始動(dòng)手：
首先，在html頁(yè)面上引入js
<script type="text/javascript" src="{% static 'js/vue.js' %}"></script>
<script type="text/javascript" src="{% static 'js/axios.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/common.js' %}"></script>
<script>
$(document).ready(function () {
getHotScheme(); 1. 在dom加載完之后執(zhí)行g(shù)etHotScheme函數(shù)
});
</script>
要用到vue就少不vue.js,Vue.js 2.0 版本推薦使用 axios 來(lái)完成 ajax 請(qǐng)求。
我們將上面功能的實(shí)現(xiàn)寫(xiě)在common.js的getHotScheme中
相關(guān)html如下：
<div class="GridLex- gap-30-wrappper package-grid-item-wrapper">
<div class="GridLex-grid-noGutter-equalHeight">
<template v-for="schemeInfo in schemesInfo">
<div class="GridLex-col-4_sm-6_xs-12 mb-30">
<div class="package-grid-item">
<a href="detail-page.html" rel="external nofollow" >
<div class="image">
<img :src="schemeInfo.photo_url" alt="Tour Package"/>
<div class="absolute-in-image">
<div class="duration"><span>{{ schemeInfo.day }} 天 {{ schemeInfo.night }} 夜</span></div>
</div>
</div>
<div class="content clearfix">
<h5>{{ schemeInfo.name }}</h5>
<div class="rating-wrapper">
<div class="raty-wrapper">
<div class="star-rating-read-only" v-bind:data-rating-score="schemeInfo.score_avg"></div>
<span> / {{ schemeInfo.review_num }} 評(píng)論</span>
</div>
</div>
<div class="absolute-in-content">
<span class="btn"><i class="fa fa-heart-o"></i></span>
<div class="price">￥{{ schemeInfo.unit_price }}</div>
</div>
</div>
</a>
</div>
</div>
</template>
</div>
</div>
js：getHotScheme
function getHotScheme(){
new Vue({
el: '#scheme_app',
data () {
return {
schemesInfo: null
}
},
mounted () {
axios
.get('/info/schemes')
.then(response => (this.schemesInfo = response.data))
.catch(function (error) { // 請(qǐng)求失敗處理
console.log(error);
});
}
})
}
解釋一下：
getHotScheme()在DOM加載后執(zhí)行，其中創(chuàng)建了vue對(duì)象，el表示vue的作用范圍，它被綁定到了html中的id為scheme_app的div，data中我們需要使用schemesInfo,初始為null，當(dāng)axios請(qǐng)求成功之后，schemesInfo的值為api的返回的json
在html中：
我們要遍歷schemesInfo數(shù)據(jù)，在需要重復(fù)生成的div塊外添加 template ，<template v-for="schemeInfo in schemesInfo">````````</template>
被template標(biāo)簽包含的內(nèi)容將被生成多份，text部分通過(guò){{}}取數(shù)據(jù)進(jìn)行渲染，但是在標(biāo)簽屬性中使用數(shù)據(jù)需要做出修改：比如img標(biāo)簽，指定src時(shí)不應(yīng)該使用<img scr=''{{schemeInfo.photo_url}}''> 這將是無(wú)效的，應(yīng)該改為<img :src="schemeInfo.photo_url"> src前面的:時(shí)v-bind的簡(jiǎn)寫(xiě)，用于屬性綁定，當(dāng)然，你也可以寫(xiě)完整，如<div class="star-rating-read-only" v-bind:data-rating-score="schemeInfo.score_avg"></div>
現(xiàn)在看似已經(jīng)完成了，但是實(shí)際上我們的數(shù)據(jù)并沒(méi)有被渲染到模板上，這是因?yàn)関ue 取值的方法{{ }}與django的模板語(yǔ)言沖突，vue取值并未生效，其實(shí)解決辦法至少有三個(gè)，可以參考：http://www.dbjr.com.cn/article/164779.htm
我還是喜歡第三種：
將vue相關(guān)的html代碼塊禁用django模板：
在上述html代碼前添加{% verbatim %}，尾部添加{% endverbatim %}，這樣vue就可以生效了，
但是還有一個(gè)問(wèn)題
沒(méi)有被顯示出來(lái)，原因是類屬性為star-rating-read-only的div的js函數(shù)需要在數(shù)據(jù)完成之后加載才能生效
正好，Vue.js 有一個(gè)方法 watch，它可以用來(lái)監(jiān)測(cè)Vue實(shí)例上的數(shù)據(jù)變動(dòng)。
我們要監(jiān)聽(tīng)schemesInfo，如果數(shù)據(jù)變化，說(shuō)明vue開(kāi)始渲染，渲染完成DOM將發(fā)生變化，在vue中有個(gè)Vue.$nextTick(callback)，當(dāng)dom發(fā)生變化，更新后執(zhí)行的回調(diào)。
在這個(gè)回調(diào)函數(shù)中執(zhí)行star-rating-read-only對(duì)應(yīng)的js函數(shù)應(yīng)該就可以解決這個(gè)問(wèn)題，試一下修改common.js中的代碼：
function loadGrade(){
$('.star-rating-read-only').raty({
readOnly: true,
round: {down: .2, full: .6, up: .8},
half: true,
space: false,
score: function () {
return $(this).attr('data-rating-score');
}
});
}
function getHotScheme(){
new Vue({
el: '#scheme_app',
data () {
return {
schemesInfo: null
}
},
watch:{
schemesInfo:function(){
this.$nextTick(function(){
loadGrade()
})
}
},
mounted () {
axios
.get('/info/schemes')
.then(response => (this.schemesInfo = response.data))
.catch(function (error) { // 請(qǐng)求失敗處理
console.log(error);
});
}
})
}
綠色部分是star-rating-read-only對(duì)應(yīng)的js處理函數(shù)，紅色部分是我們對(duì)vue的修改完善，這樣修改以后，果不其然，數(shù)據(jù)都正確的渲染在了模板上
相關(guān)文章
Vue3+elementui plus創(chuàng)建項(xiàng)目的方法
這篇文章主要介紹了Vue3+elementui plus創(chuàng)建項(xiàng)目的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
使用vue2.6實(shí)現(xiàn)抖音【時(shí)間輪盤(pán)】屏保效果附源碼
前段時(shí)間看抖音，有人用時(shí)間輪盤(pán)作為動(dòng)態(tài)的桌面壁紙，一時(shí)間成為全網(wǎng)最火的電腦屏保，后來(lái)小米等運(yùn)用市場(chǎng)也出現(xiàn)了【時(shí)間輪盤(pán)】，有點(diǎn)像五行八卦，感覺(jué)很好玩，于是突發(fā)奇想，自己寫(xiě)一個(gè)網(wǎng)頁(yè)版小DEMO玩玩,需要的朋友可以參考下2019-04-04
本文主要介紹了vue中傳參params和data的區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
VUE在for循環(huán)里面根據(jù)內(nèi)容值動(dòng)態(tài)的加入class值的方法
這篇文章主要介紹了VUE在for循環(huán)里面根據(jù)內(nèi)容值動(dòng)態(tài)的加入class值的方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
vue項(xiàng)目部署到非根目錄下的問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目部署到非根目錄下的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue中原生template標(biāo)簽失效如何解決，找了整一天也沒(méi)找著這事件為什么觸發(fā)不了，第二天意識(shí)到原生代碼里的template可能有問(wèn)題，在原生環(huán)境中template標(biāo)簽內(nèi)部的東西是不會(huì)渲染出來(lái)的，雖然解析器在加載頁(yè)面的時(shí)候確實(shí)會(huì)處理這部分代碼片段2023-02-02
解決打包后出現(xiàn)錯(cuò)誤y.a.addRoute is not a function的
這篇文章主要介紹了解決打包后出現(xiàn)y.a.addRoute is not a function的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)列表跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
使用Vue-axios進(jìn)行數(shù)據(jù)交互的方法
這篇文章主要介紹了使用Vue-axios進(jìn)行數(shù)據(jù)交互詳情，文章圍繞Vue-axios進(jìn)行數(shù)據(jù)交互的相關(guān)資料展開(kāi)詳細(xì)內(nèi)容，需要的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)或工作有所幫助2022-03-03
這篇文章主要介紹了Vue從TodoList中學(xué)父子組件通信，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02