Django与Vue语法的冲突问题完美解决方法


Posted in Javascript onDecember 14, 2017

当我们在django web框架中,使用vue的时候,会遇到语法冲突.

因为vue使用{{}},而django也使用{{}},因此会冲突.

解决办法1:

在django1.5以后,加入了标签:

{% verbatim myblock %} {% endverbatim myblock %}

被此标签包裹的代码将不会被Django的模板引擎渲染。

因此,我们可以把带有{{ }} 的Vue代码放在 {% verbatim myblock %}标签中间,例如:

<div id="app1">
  {% verbatim myblock %}
    {{ message1 }}
  {% endverbatim myblock %}
</div>

解决办法2:

修改Vue的{{ }} 为{[ ]}

<script>Vue.config.delimiters = ["{[", "]}"]</script>

使用的时候:

<div id="app1">
  {[ message1 ]}
</div>

ps:vue之django 和vue语法冲突处理

修改vue.js的默认的绑定符号

vue2.0已经废弃这种写法:

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

正确姿势:

var vm = new Vue({
  delimiters:['[[', ']]'],
  el:'#box',
  data:{
    arr:['apple','pear','grape']
  },
  methods:{
    add:function () {
      this.arr.push('tomato')
    }
  }
})

总结

以上所述是小编给大家介绍的Django与Vue语法的冲突问题完美解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery 无废话系列教程(二) jquery实战篇上
Jun 23 Javascript
Javascript 判断函数类型完美解决方案
Sep 02 Javascript
js实现表格字段排序
Feb 19 Javascript
Javascript动态引用CSS文件的2种方法介绍
Jun 06 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
异步JS框架的作用以及实现方法
Oct 29 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 Javascript
vue权限问题的完美解决方案
May 08 Javascript
vue.config.js中配置Vue的路径别名的方法
Feb 11 Javascript
浅析JS抽象工厂模式
Dec 14 #Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 #Javascript
利用Javascript开发一个二维周视图日历
Dec 14 #Javascript
浅谈es6 javascript的map数据结构
Dec 14 #Javascript
利用Javascript实现一套自定义事件机制
Dec 14 #Javascript
vue登录注册及token验证实现代码
Dec 14 #Javascript
基于vue 实现token验证的实例代码
Dec 14 #Javascript
You might like
php数组去重复数据示例
2014/02/25 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
2016/07/05 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
2019/09/10 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
对于Python的Django框架部署的一些建议
2015/04/09 Python
Python基础篇之初识Python必看攻略
2016/06/23 Python
Python自定义简单图轴简单实例
2018/01/08 Python
浅析使用Python搭建http服务器
2019/10/27 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
装饰资料员岗位职责
2013/12/30 职场文书
高中军训感言800字
2014/03/05 职场文书
十佳家长事迹材料
2014/08/26 职场文书
网吧七夕活动策划方案
2014/08/31 职场文书
2014年教务工作总结
2014/12/03 职场文书
企业工会工作总结2015
2015/05/13 职场文书
2015年小学数学教研组工作总结
2015/05/21 职场文书
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript
React自定义hook的方法
2022/06/25 Javascript
MySQL自定义函数及触发器
2022/08/05 MySQL