Django中引入vue.js有点坑


 

在Django中引入了vue,但是demo中不能读取message:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p> </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) </script> </body> </html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

  问题出在“{{ }}”这个符号,原因是Django的模板系统会默认接管{{ }}中间的变量, 跟Vue.js就冲突了。 
  把需要用到{{ }}的地方用模板标记: 
  {% verbatim %} {{ message }} {% endverbatim %} 
  包裹起来就好了。 
  这个有点坑。

在Django中引入了vue,但是demo中不能读取message:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p> </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) </script> </body> </html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

  问题出在“{{ }}”这个符号,原因是Django的模板系统会默认接管{{ }}中间的变量, 跟Vue.js就冲突了。 
  把需要用到{{ }}的地方用模板标记: 
  {% verbatim %} {{ message }} {% endverbatim %} 
  包裹起来就好了。 
  这个有点坑。


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM