被template标签包含的内容将被生成多份，text部分通过{{}}取数据进行渲染，但是在标签属性中使用数据需要做出修改：比如img标签，指定src时不应该使用<img scr=''{{schemeInfo.photo_url}}''> 这将是无效的，应该改为<img :src="schemeInfo.photo_url"> src前面的:时v-bind的简写，用于属性绑定，当然，你也可以写完整，如<div v-bind:data-rating-score="schemeInfo.score_avg"></div>
现在看似已经完成了，但是实际上我们的数据并没有被渲染到模板上，这是因为vue 取值的方法{{ }}与django的模板语言冲突，vue取值并未生效，其实解决办法至少有三个，可以参考：https://www.jb51.net/article/164779.htm
我还是喜欢第三种：
将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的修改完善，这样修改以后，果不其然，数据都正确的渲染在了模板上
您可能感兴趣的文章: