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

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

解决办法1:

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

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

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

因此,我们可以把带有{{ }} 的Vue代码放在 {% verbatim myblock %}标签中间(注:标签中间可放置完整html标签,例如body,div等),例如:

<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语法的冲突问题完美解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言

Django与Vue语法冲突问题完美解决方法的更多相关文章

  1. 如何解决Django与Vue语法的冲突

    当我们在django web框架中,使用vue的时候,会遇到语法冲突.因为vue使用{{}},而django也使用{{}},因此会冲突. 解决办法1:在django1.5以后,加入了标签:{% ver ...

  2. (转载)Android滑动冲突的完美解决

    Android滑动冲突的完美解决 作者:softwindy_brother 字体:[增加 减小] 类型:转载 时间:2017-01-24我要评论 这篇文章主要为大家详细介绍了Android滑动冲突的完 ...

  3. 无法解决 equal to 运算中 "Chinese_PRC_CI_AS" 和 "Chinese_PRC_90_CI_AI" 之间的排序规则冲突。的解决方法

    在SQL SERVICE的查询的时候遇到了“无法解决 equal to 运算中 "Chinese_PRC_CI_AS" 和 "Chinese_PRC_90_CI_AI&q ...

  4. win10想说爱你不容易——安装.net3.5也是一个坑(已有完美解决方法)

    最终完美解决方法:经过多次波折,终于找到无法正常安装.net3.5的原因了,是因为已删除的用户还有注册表残留导致的,而且这个问题还会影响一个win10更新的安装,导致每天更新失败,撤销更新... 详见 ...

  5. 关于CUDA C 项目中“ error C2059: 语法错误:“<” ”问题的解决方法

    该问题的关键在于理解CUDA项目中C\C++文件需要由c++编译器进行编译,而CUDA C的源文件需要由CUDA的编译器nvcc.exe进行编译. 发生该语法错误的原因是cu文件被C++编译器所编译, ...

  6. PNG24在ie6下的完美解决方法!(DD_belatedPNG)

    原网址:http://www.zjgsq.com/1629.html 之前写过一篇<js+css滤镜设置解决PNG24在IE6下显示问题> 解决方法不是很完美,使用起来也比较麻烦. DD_ ...

  7. error C2872: “flann”: 不明确的符号 --- PCL 与OpenCV2 的flann命名空间冲突问题的解决方法

    error C2872: "flann": 不明确的符号 - PCL 与OpenCV2命名空间冲突问题的解决方法 error C2872: "flann" 如果 ...

  8. 关于vue的常识问题及解决方法

    一.VSCode开发必备插件 1.Beautify:语法高亮: 2.Bracket Pair Colorizer :对括号对进行着色: 3.ESLint:ESLint插件,高亮提示: 4.HTML C ...

  9. [转]axios请求超时,设置重新请求的完美解决方法

    自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或者网络不稳定掉包了, 你们该如何处理呢? 下面我给你们分享一下我的经历. 具体原因 最近公司在做一个项目, ...

随机推荐

  1. mysql常用命令和函数

    一.DROP IF EXISTS DROP FUNCTION IF EXISTS fun;DROP TABLE IF EXISTS table; 二.数据表1.建立表CREATE TABLE test ...

  2. SQL语句练习手册--第三篇

    一.CASE的两种用法 1.1 等值判断->相当于switch case (1)具体用法模板: CASE expression WHEN value1 THEN returnvalue1 WHE ...

  3. UVA 617 - Nonstop Travel(数论+暴力枚举)

    题目链接:617 - Nonstop Travel 题意:给定一些红绿灯.如今速度能在30-60km/h之内,求多少个速度满足一路不遇到红灯. 思路:暴力每个速度,去推断可不能够,最后注意下输出格式就 ...

  4. 代理工具Charles使用

    代理工具Charles使用 分类: MAC 2014-03-27 20:41 7810人阅读 评论(2) 收藏 举报 手机开发 一.跟踪HTTPS 1.下载官方的证书ssl.zip证书,解压成*.cr ...

  5. 我是怎样理解web页面的

    事实上web页面包括三部分东东 1.页面展示的元素(HTML) 2.页面元素展示的样式(CSS) 3.控制页面元素的交互(JavaScript) 不管页面多么复杂,从这三方面去看,都会得到清晰的认识的 ...

  6. hdu 1540/POJ 2892 Tunnel Warfare 【线段树区间合并】

    Tunnel Warfare                                                             Time Limit: 4000/2000 MS ...

  7. PSSM特征-从生成到处理

    以下代码均为个人原创,如有疑问,欢迎交流.新浪微博:拾毅者 本节内容: pssm生成 pssm简化 标准的pssm构建 滑动pssm生成 在基于蛋白质序列的相关预測中.使用PSSM打分矩阵会得将预測效 ...

  8. Sphinx初探之安装

    在Centos or redhat 安装Sphinx .首先安装依赖包 $ yum install postgresql-libs unixODBC .安装软件 $ rpm -Uhv sphinx-- ...

  9. Java中HashTable和HashMap的区别

    在Java中,HashTable和HashMap都是哈希表,那么它们有什么区别呢?   1.它们所继承的类不一样. HashTable和HashMap都实现了Map接口,但是它们所继承的类时不同的.H ...

  10. java多线程编码注意事项

    Sole purpose of using concurrency is to produce scalable and faster program. But always remember, sp ...