当我们在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. 尝试一下markdown

    尝试一下markdown 简单介绍以下几个宏: __VA_ARGS__是一个可变参数的宏,这个可变参数的宏是新的C99规范中新增的,目前似乎只有gcc支持(VC6.0的编译器不支持).宏前面加上##的 ...

  2. NGINX 缓存使用指南

    NGINX 缓存使用指南 [proxy_cache] Nginx 一个web缓存坐落于客户端和“原始服务器(origin server)”中间,它保留了所有可见内容的拷贝.如果一个客户端请求的内容在缓 ...

  3. node - 上传文件并且修改名称

    html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  4. 最新版的 react-native 降级处理

    1.react-native 常见操作 (1)react-native init Demo (2)adb devices (3)react-native run-android (4)ipconfig ...

  5. android 通过bitmapfactory得到图片真实像素的方法,以及没有得到真实像素的原因

    原文来自:原文地址 由于这个错误导致浪费非常长时间找原因,所以要赶紧记录下来. 过程是这种,在使用android读取图片的时候,就是使用BitmapFactory.decodeResource(thi ...

  6. MySql修改root密码、设置IP访问

    先登录:mysql -h 192.168.5.116 -P 3306 -u root -p123456 首次登陆无密码命令:mysql -h 192.168.5.116 -P 3306 -u root ...

  7. Atitit.常见的4gl 第四代编程语言  与 dsl

    Atitit.常见的4gl 第四代编程语言  与 dsl 1. 4gl dsl发展历史1 2. 4gl dsl的特点1 3. 常见的4gl 第四代编程语言 dsl2 4. 未来趋势与标准2 4.1.1 ...

  8. 不可忽略的apache 的 Keep Alive

    转载链接:http://hi.baidu.com/jx_iben/item/d5fe91feed74495ec9f337f1 在网页开发过程中,Keep-Alive是HTTP协议中非常重要的一个属性. ...

  9. win10 下eclipse tomcat 热部署问题?

    前言: 问题的描述: 用的环境是maven,java,tomcat,win10 tomcat server配置如下 项目发布之后,修改jsp,报错,错误详情如下: 解决办法.勾选server opti ...

  10. PYTHON测试邮件系统弱密码

    #-*- coding:utf-8 -*- #测试公司邮件系统弱密码, from email.mime.text import MIMEText import smtplib #弱密码字典 passL ...