django 套vue 模板_Django模板中的Vue.js

I am trying to use Vue.js in Django templates. One such template is the following:

{% load static %}

Hello [[ message ]]

I changed Vue's interpolation delimiters to [[ ]] to avoid conflict with Django. My script.js looks as follows:

$(function() {

var app = new Vue({

el: '#myApp',

delimiters: ['[[', ']]'],

data: {

message: 'Hello, world!'

}

});

});

Unfortunately, the HTML rendered contains [[ message ]]. Has anyone else faced a similar issue?

解决方案

As the per docs of Vue v1.0 say:

// ES6 template string style

Vue.config.delimiters = ['${', '}']

So, in your example change to:

$(function() {

Vue.config.delimiters = ['[[', ']]'];

var app = new Vue({

el: '#myApp',

data: {

message: 'Hello, world!'

}

});

});

It is strongly recomended, though, to use the new version of Vue (version 2) in order to be up-to-date!