django中使用vue.js的要點總結(jié)
有接口如下：
http://127.0.0.1:8000/info/schemes/
返回json數(shù)據(jù)：
[
{
"name": "（山上雙人標(biāo)準(zhǔn)間）黃山經(jīng)典二日游（魅力黃山，日出云海，人間仙境，春暖花開）",
"day": 2,
"night": 1,
"favorites": 0,
"score_avg": 4,
"photo_url": "/media/images/scenic/a9836502.jpg",
"review_num": 2,
"unit_price": 0
},
{
"name": "0購物+三環(huán)內(nèi)接！鄭州—焦作云臺山二日游，含1晚住宿+1早2正餐，無強制消費",
"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)酒店上門接>廈門至泉州開元寺+南少林+洛陽橋+西街+天后宮一日游",
"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購物/接送機",
"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)/故宮/瓷房子贈升國旗",
"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購物0自費&24H接送&贈德云社+人民大會堂",
"day": 5,
"night": 4,
"favorites": 0,
"score_avg": 4,
"photo_url": "/media/images/scenic/ca841f56.jpg",
"review_num": 1,
"unit_price": 0
},
{
"name": "機票+含餐>西安兵馬俑/華清池/驪山/西岳華山/延安/黃帝陵/壺口瀑布6日",
"day": 6,
"night": 5,
"favorites": 0,
"score_avg": 4,
"photo_url": "/media/images/scenic/93835fbb.jpg",
"review_num": 1,
"unit_price": 2740
},
{
"name": "高鐵/動車往返>寧波—溫州雁蕩山2日游 凈名谷+靈巖景區(qū)+大龍湫 賞靈峰夜景",
"day": 2,
"night": 1,
"favorites": 0,
"score_avg": 4,
"photo_url": "/media/images/scenic/7565abdd.jpg",
"review_num": 1,
"unit_price": 0
}
]
通過vue去請求這個api，并將數(shù)據(jù)遍歷，生成多個div塊模板，并渲染數(shù)據(jù)，效果圖如下：
api 返回json中有9條記錄，所以對應(yīng)應(yīng)該生成9個上圖的div塊，開始動手：
首先，在html頁面上引入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 來完成 ajax 請求。
我們將上面功能的實現(xiàn)寫在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 }} 評論</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) { // 請求失敗處理
console.log(error);
});
}
})
}
解釋一下：
getHotScheme()在DOM加載后執(zhí)行，其中創(chuàng)建了vue對象，el表示vue的作用范圍，它被綁定到了html中的id為scheme_app的div，data中我們需要使用schemesInfo,初始為null，當(dāng)axios請求成功之后，schemesInfo的值為api的返回的json
在html中：
我們要遍歷schemesInfo數(shù)據(jù)，在需要重復(fù)生成的div塊外添加 template ，<template v-for="schemeInfo in schemesInfo">````````</template>
被template標(biāo)簽包含的內(nèi)容將被生成多份，text部分通過{{}}取數(shù)據(jù)進行渲染，但是在標(biāo)簽屬性中使用數(shù)據(jù)需要做出修改：比如img標(biāo)簽，指定src時不應(yīng)該使用<img scr=''{{schemeInfo.photo_url}}''> 這將是無效的，應(yīng)該改為<img :src="schemeInfo.photo_url"> src前面的:時v-bind的簡寫，用于屬性綁定，當(dāng)然，你也可以寫完整，如<div class="star-rating-read-only" v-bind:data-rating-score="schemeInfo.score_avg"></div>
現(xiàn)在看似已經(jīng)完成了，但是實際上我們的數(shù)據(jù)并沒有被渲染到模板上，這是因為vue 取值的方法{{ }}與django的模板語言沖突，vue取值并未生效，其實解決辦法至少有三個，可以參考：http://www.dhdzp.com/article/164779.htm
我還是喜歡第三種：
將vue相關(guān)的html代碼塊禁用django模板：
在上述html代碼前添加{% verbatim %}，尾部添加{% endverbatim %}，這樣vue就可以生效了，
但是還有一個問題
沒有被顯示出來，原因是類屬性為star-rating-read-only的div的js函數(shù)需要在數(shù)據(jù)完成之后加載才能生效
正好，Vue.js 有一個方法 watch，它可以用來監(jiān)測Vue實例上的數(shù)據(jù)變動。
我們要監(jiān)聽schemesInfo，如果數(shù)據(jù)變化，說明vue開始渲染，渲染完成DOM將發(fā)生變化，在vue中有個Vue.$nextTick(callback)，當(dāng)dom發(fā)生變化，更新后執(zhí)行的回調(diào)。
在這個回調(diào)函數(shù)中執(zhí)行star-rating-read-only對應(yīng)的js函數(shù)應(yīng)該就可以解決這個問題，試一下修改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) { // 請求失敗處理
console.log(error);
});
}
})
}
綠色部分是star-rating-read-only對應(yīng)的js處理函數(shù)，紅色部分是我們對vue的修改完善，這樣修改以后，果不其然，數(shù)據(jù)都正確的渲染在了模板上
相關(guān)文章
這篇文章主要為大家詳細介紹了Vue如何使用EasyPlayerPro實現(xiàn)播放本地MP4視頻功能,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
這篇文章主要介紹了vue如何實現(xiàn)簡易流程圖問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue-router的安裝不是理想化的,會出現(xiàn)問題,需要靜下心認真研究,熬過去就會懂得更多,這篇文章主要給大家介紹了關(guān)于vue2安裝vue-router報錯的解決方法,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了vue中使用codemirror的實例教程，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-11-11
本篇內(nèi)容給大家總結(jié)了VUE的重要難點，并把代碼做了詳細分享，有興趣的朋友參考學(xué)習(xí)下。2018-03-03
這篇文章主要介紹了Vue中使用sass實現(xiàn)換膚功能，實現(xiàn)此功能用到了三個主要文件（base.scss、mixin.scss、varibale.scss）,需要的朋友可以參考下2018-09-09
vue腳手架創(chuàng)建項目時報catch錯誤及解決
這篇文章主要介紹了vue腳手架創(chuàng)建項目時報catch錯誤及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue tab切換,解決echartst圖表寬度只有100px的問題
這篇文章主要介紹了vue tab切換,解決echartst圖表寬度只有100px的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue使用websocket的方法,結(jié)合實例形式對比分析了vue.js使用websocket的相關(guān)操作技巧與注意事項,需要的朋友可以參考下2019-06-06
這篇文章我們將一起學(xué)習(xí)vue.js實現(xiàn)綁定class和style樣式，感興趣的小伙伴們可以參考一下2016-12-12