溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

django中使用vue.js的要點總結(jié)

發(fā)布時間：2020-08-20 18:34:53 來源：腳本之家 閱讀：179 作者：保軍Baojun 欄目：web開發(fā)

有接口如下：

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

返回json數(shù)據(jù)：

[
 {
  "name": "（山上雙人標準間）黃山經(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ù)，效果圖如下：

django中使用vue.js的要點總結(jié)

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">
          <h6>{{ schemeInfo.name }}</h6>

          <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，當axios請求成功之后，schemesInfo的值為api的返回的json

在html中：

我們要遍歷schemesInfo數(shù)據(jù)，在需要重復(fù)生成的div塊外添加 template ，<template v-for="schemeInfo in schemesInfo">````````</template>

被template標簽包含的內(nèi)容將被生成多份，text部分通過{{}}取數(shù)據(jù)進行渲染，但是在標簽屬性中使用數(shù)據(jù)需要做出修改：比如img標簽，指定src時不應(yīng)該使用<img scr=''{{schemeInfo.photo_url}}''> 這將是無效的，應(yīng)該改為<img :src="schemeInfo.photo_url"> src前面的:時v-bind的簡寫，用于屬性綁定，當然，你也可以寫完整，如<div class="star-rating-read-only" v-bind:data-rating-score="schemeInfo.score_avg"></div>

現(xiàn)在看似已經(jīng)完成了，但是實際上我們的數(shù)據(jù)并沒有被渲染到模板上，這是因為vue 取值的方法{{ }}與django的模板語言沖突，vue取值并未生效，其實解決辦法至少有三個，可以參考：https://www.jb51.net/article/164779.htm

我還是喜歡第三種：

將vue相關(guān)的html代碼塊禁用django模板：

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

但是還有一個問題

django中使用vue.js的要點總結(jié)沒有被顯示出來，原因是類屬性為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)，當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ù)都正確的渲染在了模板上

　　django中使用vue.js的要點總結(jié)

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手