当我们在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>
即可。

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

如何解决Django与Vue语法的冲突的更多相关文章

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

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

  2. 解决webstorm中vue语法没有提示

    首先看看webstrom内置的vue插件,打上勾,没有这个选项就要自己去下载插件了 如果插件还是没有语法提示,可以用下面的方法,自己添加语法进去搜索 unknown HTML tag attribut ...

  3. python - django 解决 templates 模板语言语法冲突

    # 在使用某个框架时发现语法与Django的模板语法冲突了,于是找到解决方案: {% verbatim %} // 被 verbatim 包裹起来的地方是不会被 django 渲染的 {% endve ...

  4. 解决Django+Vue前后端分离的跨域问题及关闭csrf验证

      前后端分离难免要接触到跨域问题,跨域的相关知识请参:跨域问题,解决之道   在Django和Vue前后端分离的时候也会遇到跨域的问题,因为刚刚接触Django还不太了解,今天花了好长的时间,查阅了 ...

  5. tornado和vue的模板冲突解决方法

    tornado和vue的模板冲突解决方法 Vue的插值表达式和tornado的模板都为一对花括号,可以通过修改vue的插值表达式的符号来解决这个问题,具体方法如下: var vm = new Vue( ...

  6. 解决distinct与order by 的冲突

    sql="select distinct id from test order by otherfield desc" 需要找到不同的id,同时又想让记录按fbsj排序.但是这样一 ...

  7. django rest_framework vue 实现用户登录

    django rest_framework vue 实现用户登录 后端代码就不介绍了,可以参考  django rest_framework 实现用户登录认证 这里介绍一下前端代码,和前后端的联调过程 ...

  8. 解决phpStorm使用vue提示"Attribute v-xxx is not allowed here"的问题

    jetbrains家族的新版webStorm.phpStorm等工具都已支持vue,不需要自己再安装Vue.js插件,对vue单文件组件支持挺好.但是在html文件中直接<script>引 ...

  9. 2. Vue语法--插值操作&动态绑定属性 详解

    目录 1. 设置vue模板 2. vue语法--插值操作 3. 动态绑定属性--v-bind 一. 设置vue模板 我们经常新建一个vue项目的时候, 会写如下的一段代码 <!DOCTYPE h ...

随机推荐

  1. Mysql注入攻击与防御(思维导图笔记)

  2. spring中的default-lazy-init参数和lazy-init

    在spring的配置中的根节点上有个  default-lazy-init="true"配置:   1.spring的default-lazy-init参数  此参数表示延时加载, ...

  3. JDK(五)JDK1.8源码分析【集合】HashMap

    本文转载自无始无终,原文连接 HashMap 在 JDK 1.8 后新增的红黑树结构 传统 HashMap 的缺点 JDK 1.8 以前 HashMap 的实现是 数组+链表,即使哈希函数取得再好,也 ...

  4. DPDK运行出现error while loading shared libraries的解決方法

    问题 error: while loading shared libraries: xxx.so.0:cannot open shared object file: No such file or d ...

  5. DecimalFormat的使用

    DecimalFormat,四舍五入时需要设置RoundingMode 1.占位符0: 比实际数字的位数多,不足的地方用0补上. new DecimalFormat("00.00" ...

  6. 多线程编程初探——OO第二单元作业回顾

    一.作业设计策略 1)执行FAFS策略的单部电梯 ​ 由于对多线程不是很了解,于是采用了理论课上介绍的生产者消费者模型作为设计模板(也是很多同学一开始的做法):将请求队列作为共享对象(托盘),名为In ...

  7. js cookie使用

    if (window.localStorage) { window.localStorage.setItem('cname', "cvalue"); }else{ setCooki ...

  8. C++练习 | 运算符重载练习

    #include <iostream> #include <cmath> #include <cstring> #include <iomanip> u ...

  9. Liu Junqiao:生产环境中shell脚本实例

    在生产环境中,我们时常要注意主机的各种硬件状态,如果是规模较大的服务集群zabbix等健康工具当然好用,如果只是一些小规模的服务主机,shell就会表现的更灵活,也更适用,今天就和大家分享一个系统巡检 ...

  10. appache 端口 更改

    外网访问---->hosts文件映射服务名(127.0.0.1 xiaotian.cn)-->appache中httpd文件监听相关端口号(*:8080)--->appache中的v ...