Si estas comenzado con Vue y utilizas DjangoTemplates como tu backend de plantillas, la pregunta que seguramente esta pasando por tu mente es: si las variables de django las expreso como {{mi_variable}} y el data binding en vue lo expreso de la misma forma {{mi_data}} ¿como evito que Django cambie mis etiquetas de Vue?
Tranquilo que has llegado al lugar correcto
Ejemplo probado con:
- Vue.js 2.x
- Django 1.10.x
Escapar el contenido
Para fortuna de todos en Django existe la etiqueta de plantilla verbatim, que nos permite escapar el contenido o dicho de otra forma indicarle a nuestro motor de templates que lo incluido dentro de ella no debe ser procesado.
Imaginemos que en Vue tenemos algo como esto:
[javascript]
var vueApp = new Vue({
el: ‘#div-mensaje’,
data: {
mensaje: ‘Esto es un mensaje’
}
})
[/javascript]
Y en nuestro template lo único que tendríamos que hacer es lo siguiente:
[html]
<div id="div-mensaje">
{% verbatim %}
{{ mensaje }}
{% endverbatim %}
</div>
[/html]
Y listo, todo funcionará según lo esperado
¿Qué pasa si quiero escapar contenido HTML?
Imaginemos que nuestro mensaje tuviese etiquetas HTML:
[javascript]
var vueApp = new Vue({
el: ‘#div-mensaje’,
data: {
mensaje: ‘Esto es un mensaje <br/> Esto también es un mensaje’
}
})
[/javascript]
Si lo ejecutamos veriamos algo como esto:
Esto es un mensaje <br/> Esto también es un mensaje
Que dista mucho de lo que en realidad queremos que ocurra.
Para nuestra fortuna existe otra forma de hacer el binding, que es utilizando v-html=“mi_data” esta etiqueta nos permite imprimir el contenido como HTML, entonces nuestro template quedaría de la siguiente forma:
[html]
<div v-html="mensaje" id="div-mensaje">
</div>
[/html]
Como ves exiten multiples formas de solucionar el problema del binding.
Si buscas más información te recomiendo consultar la documentación correspondiente:
https://vuejs.org/v2/guide/syntax.html#Raw-HTML
https://docs.djangoproject.com/en/1.10/ref/templates/builtins/