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 可排列的表实现代码
Nov 13 Javascript
拉动滚动条加载数据的jquery代码
May 03 Javascript
JQuery触发radio或checkbox的change事件
Dec 18 Javascript
在JavaScript中如何解决用execCommand(
Oct 19 Javascript
angularJs中datatable实现代码
Jun 03 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
Sep 19 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 Javascript
vue click.stop阻止点击事件继续传播的方法
Sep 04 Javascript
基于node.js实现爬虫的讲解
Feb 18 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
layui 地区三级联动 form select 渲染的实例
Sep 27 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
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
解析PHP提交后跳转
2013/06/23 PHP
PHP中如何使用session实现保存用户登录信息
2015/10/20 PHP
PHP Cookie学习笔记
2016/08/23 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
Prototype 学习 Prototype对象
2009/07/12 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
2016/12/21 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
2017/12/26 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
2019/08/20 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
Python中用sleep()方法操作时间的教程
2015/05/22 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
python求前n个阶乘的和实例
2020/04/02 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
Max&Co官网:意大利年轻女性时尚品牌
2017/05/16 全球购物
自主实习接收函
2014/01/13 职场文书
采购经理岗位职责
2014/02/16 职场文书
希特勒经典演讲稿
2014/05/19 职场文书
学校食品安全实施方案
2014/06/14 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
解除处分决定书
2015/06/25 职场文书
MySql数据库触发器使用教程
2022/06/01 MySQL
box-shadow单边阴影的实现
2023/05/21 HTML / CSS