Javascript 首次请求加载json数据并在主页中显示

我第一次使用Vue.js。我需要序列化django的对象

views.py

我试着用html显示序列化的json数据，但效果很好

现在，介绍如何初始化vue实例中的json数据，以及如何使用v-repeat属性访问html中的json数据

有谁能帮忙吗？

一个简单的例子

views.py

articles.html

{%verbatim%}

{a}

{%endverbatim%}
新Vue({
el:“应用程序”，
数据：函数（）{
返回{
条款：{{条款|安全}
}
}
})

注意事项：

• 用于阻止Django呈现此块标记内容的

  verbatim

  标记，因为Vue使用相同的插值符号

• safe

  过滤器可防止Django漏出内容
如果你正在通过字典，考虑把它变成JSON首

---

一般来说，从版本1.0+开始，我们更喜欢通过

将数据传递给Vue，v-repeat已被删除，取而代之的是v-for。这可能就是问题所在，谢谢。我现在改成了v，但我的问题是，如何将序列化数据json传递到js我不懂python，但在php中，我们会做类似于，

var json=”“

的事情，将json数据作为字符串从php传递到js。和

var obj=JSON.decode（JSON）

获取js对象。这并不能解决我的问题。请看一下，一旦获取包含数据的js对象，就可以将数据传递到

Vue（）

 def articles(request):
        model = News.objects.all() # getting News objects list
        modelSerialize =  serializers.serialize('json', News.objects.all())
        random_generator = random.randint(1,News.objects.count())    
        context = {'models':modelSerialize, 
                  'title' : 'Articles' , 
                  'num_of_objects' : News.objects.count() , 
                  'random_order' :  random.randint(1,random_generator) ,
                  'random_object' : News.objects.get(id = random_generator ) ,
                  'first4rec' : model[0:4],
                  'next4rec' : model[4:],
                  }
        return render(request, 'articles.html',context)

def articles(request):
    context {
        'articles' : ['a1','a2','a3']
    }
    return render(request, 'articles.html', context)

{% verbatim %}
<div id="app">
    <ul>
     <li v-for="a in articles">{{ a }}</li>
    </ul>
</div>
{% endverbatim %}

<script>
    new Vue({
        el : "#app",
        data : function(){
            return {
                articles : {{ articles | safe }}
            }
        }
    })
</script>