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


Posted in Javascript onJuly 07, 2019

有接口如下:

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

返回json数据:

[
 {
  "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块模板,并渲染数据,效果图如下:

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

api 返回json中有9条记录,所以对应应该生成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加载完之后执行getHotScheme函数
});
</script>

要用到vue就少不vue.js,Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。

我们将上面功能的实现写在common.js的getHotScheme中

相关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加载后执行,其中创建了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://3water.com/article/164779.htm

我还是喜欢第三种:

将vue相关的html代码块禁用django模板:

在上述html代码前添加{% verbatim %},尾部添加{% endverbatim %},这样vue就可以生效了,

但是还有一个问题

django中使用vue.js的要点总结没有被显示出来,原因是类属性为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的修改完善,这样修改以后,果不其然,数据都正确的渲染在了模板上

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

Javascript 相关文章推荐
Javascript中的window.event.keyCode使用介绍
Apr 26 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
javascript实现修改微信分享的标题内容等
Dec 11 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
js获取当前页的URL与window.location.href简单方法
Feb 13 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
Aug 23 Javascript
vue中的mvvm模式讲解
Jan 31 Javascript
原生JavaScript实现的无缝滚动功能详解
Jan 17 Javascript
Vue使用lodop实现打印小结
Jul 06 #Javascript
cordova+vue+webapp使用html5获取地理位置的方法
Jul 06 #Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 #Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 #Javascript
基于vue实现圆形菜单栏组件
Jul 05 #Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 #Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 #Javascript
You might like
php预定义变量使用帮助(带实例)
2013/10/30 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
2013/06/25 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
jquery实现仿新浪微博评论滚动效果
2015/08/06 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
JavaScript刷新页面的几种方法总结
2019/03/28 Javascript
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
[39:08]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第一场 12.12
2020/12/16 DOTA
零基础写python爬虫之神器正则表达式
2014/11/06 Python
python如何统计代码运行的时长
2019/07/24 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
英国著名药妆店:Superdrug
2021/02/13 全球购物
事业单位公务员的职业生涯规划
2014/01/15 职场文书
幼儿园安全检查制度
2014/01/30 职场文书
毕业生大学生活自我总结
2014/01/31 职场文书
自主招生推荐信范文
2014/05/10 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
南极大冒险观后感
2015/06/05 职场文书
创业计划书之美容店
2019/09/16 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
CSS 伪元素::marker详解
2021/06/26 HTML / CSS
利用Python实现模拟登录知乎
2022/05/25 Python