django中使用vue.js的要点总结

[
 {
 "name": "（山上双人标准间）黄山经典二日游（魅力黄山，日出云海，人间仙境，春暖花开）", 
 "day": 2, 
 "night": 1, 
 "favorites": 0, 
 "score_avg": 4, 
 "photo_url": "/media/images/scenic/a9836502.jpg", 
 "review_num": 2, 
 "unit_price": 0
 }, 
 {
 "name": "0购物+三环内接！郑州—焦作云台山二日游，含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": "岛内酒店上门接>厦门至泉州开元寺+南少林+洛阳桥+西街+天后宫一日游", 
 "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日游/餐餐特色/连锁酒店/专车专导/故宫/瓷房子赠升国旗", 
 "day": 6, 
 "night": 5, 
 "favorites": 0, 
 "score_avg": 4, 
 "photo_url": "/media/images/scenic/0f.water.jpg", 
 "review_num": 1, 
 "unit_price": 0
 }, 
 {
 "name": "住蒙古包>内蒙古希拉穆仁草原+响沙湾沙漠+成吉思汗陵+呼和浩特市内双飞五日游", 
 "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日游 净名谷+灵岩景区+大龙湫 赏灵峰夜景", 
 "day": 2, 
 "night": 1, 
 "favorites": 0, 
 "score_avg": 4, 
 "photo_url": "/media/images/scenic/7565abdd.jpg", 
 "review_num": 1, 
 "unit_price": 0
 }
]

<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加载完之后执行getHotScheme函数
});
</script>

 <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" 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>

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);
 });
 }
 })
}

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);
 });
 }
 })
}