在django中使用vue.js須要注意的地方

時間  2019-12-14
標籤 django 使用 vue.js vue 須要 注意 地方 欄目 Python 简体版
原文   原文鏈接

有接口以下：javascript

　　http://127.0.0.1:8000/info/schemes/html

　　返回json數據：vue

[
    {
        "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
    }
]

 

經過vue去請求這個api，並將數據遍歷，生成多個div塊模板，並渲染數據，效果圖以下：java

api 返回json中有9條記錄，因此對應應該生成9個上圖的div塊，開始動手：ios

首先，在html頁面上引入jsajax

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

要用到vue就少不vue.js,Vue.js 2.0 版本推薦使用 axios 來完成 ajax 請求。django

咱們將上面功能的實現寫在common.js的getHotScheme中json

相關html以下：axios

            <div class="GridLex- gap-30-wrappper package-grid-item-wrapper">

                <div class="GridLex-grid-noGutter-equalHeight" id="scheme_app">

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

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加載後執行，其中建立了vue對象，el表示vue的做用範圍，它被綁定到了html中的id爲scheme_app的div，data中咱們須要使用schemesInfo,初始爲null，當axios請求成功以後，schemesInfo的值爲api的返回的json

　　在html中：

　　咱們要遍歷schemesInfo數據，在須要重複生成的div塊外添加 template ，<template v-for="schemeInfo in schemesInfo">````````</template>

　　被template標籤包含的內容將被生成多份，text部分經過{{}}取數據進行渲染，可是在標籤屬性中使用數據須要作出修改：好比img標籤，指定src時不該該使用<img scr=''{{schemeInfo.photo_url}}''> 這將是無效的，應該改成<img :src="schemeInfo.photo_url"> src前面的:時v-bind的簡寫，用於屬性綁定，固然，你也能夠寫完整，如<div class="star-rating-read-only" v-bind:data-rating-score="schemeInfo.score_avg"></div>

　　如今看似已經完成了，可是實際上咱們的數據並無被渲染到模板上，這是由於vue 取值的方法{{ }}與django的模板語言衝突，vue取值並未生效，其實解決辦法至少有三個，能夠參考這篇博客：https://blog.csdn.net/jyfu2_12/article/details/79058819

　　我仍是喜歡第三種：

　　將vue相關的html代碼塊禁用django模板：

　　在上述html代碼前添加{% verbatim %}，尾部添加{% endverbatim %}，這樣vue就能夠生效了，

 

　　可是還有一個問題

       沒有被顯示出來，緣由是類屬性爲star-rating-read-only的div的js函數須要在數據完成以後加載才能生效

　　正好，Vue.js 有一個方法 watch，它能夠用來監測Vue實例上的數據變更。

　　咱們要監聽schemesInfo，若是數據變化，說明vue開始渲染，渲染完成DOM將發生變化，在vue中有個Vue.$nextTick(callback)，當dom發生變化，更新後執行的回調。

　　在這個回調函數中執行star-rating-read-only對應的js函數應該就能夠解決這個問題，試一下修改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對應的js處理函數，紅色部分是咱們對vue的修改完善，這樣修改之後，果不其然，數據都正確的渲染在了模板上

　　

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程