当我们在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. 20165302 预备作业3 Linux安装及学习

    linux系统安装 我在安装VirtualBox时出现了一些小问题,如图 我的电脑只能设置32-bit的Ubuntu版本,但教程上说要选用64-bit的,我通过百度查询得知要进行BIOS设置,设置好后 ...

  2. Redis(四)持久化

    本文转载自编程迷思,原文链接 深入学习Redis(2):持久化 前言 在上一篇文章中,介绍了Redis的内存模型,从这篇文章开始,将依次介绍Redis高可用相关的知识——持久化.复制(及读写分离).哨 ...

  3. HDU 1301Jungle Roads(最小生成树 prim,输入比较特殊)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1301 Jungle Roads Time Limit: 2000/1000 MS (Java/Oth ...

  4. 全面理解 ASP.NET Core 依赖注入 (转载)

    DI在.NET Core里面被提到了一个非常重要的位置, 这篇文章主要再给大家普及一下关于依赖注入的概念,身边有工作六七年的同事还个东西搞不清楚.另外再介绍一下.NET  Core的DI实现以及对实例 ...

  5. 使用interface与类型诊断机制判断一个类型是否实现了某个方法

    Golang中的interface通常用来定义接口,在接口里提供一些方法,其他类型可以实现(implement)这些方法,通过将接口指针指向不同的类型实例实现多态(polymorphism),这是in ...

  6. ORA-28002 密码过期解决方案

    ORA-28002 密码过期解决方案 错误场景:当使用sqlplus进行登录时报错:ORA-28002 密码过期.错误原因:由于oracle 11g 在默认在default概要文件中设置了密码过期天数 ...

  7. Oracle下通过EXPDP导出某用户下的所有表,实例

    一开始在所数据库表导入,导出的时候,经常发现含有BLOB等大数据类型文件无法简单正常的导入导出(imp/dmp),然后在网上得知oracle 10以后有了(impdp/dmpdp)命令,数据导入导出的 ...

  8. navicat mysql 存储过程

    存储过程如同一门程序设计语言,同样包含了数据类型.流程控制.输入和输出和它自己的函数库. 一.基本数据类型:略 二.变量: 自定义变量:DECLARE   a INT ; SET a=100; 可用以 ...

  9. STM32F4寄存器编写跑马灯例程

    最近由于在学习STM32看到别人用寄存器编程控制跑马灯,于是自己也想试一试.可是试了好久终究弄不出来.回头看了下库函数的调用关系才搞明白.首先通过查看GPIOA的设置函数发现设置如下: void GP ...

  10. IOS 可以连接 蓝牙BLE设备,但是无法发现服务(原创)

    注:转载请标明文章来源,感谢支持作者劳动! 一.问题描述 用iphone手机上的nRF connect软件调试蓝牙通信. 1.nRF52蓝牙demo电路板,烧录一个SDK的程序,iphone手机可以成 ...