当我们在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. selenium通过python字典获取配置

    python字典默认的是string item={"browser " : 'webdriver.irefox()', 'url' : 'http://xxx.com'} 如果这样 ...

  2. Redis入门(一)---安装

    一.Ubuntu安装 1.命令行安装 sudo apt-get install redis-server 2.启动redis服务(安装完成后自动启动) sudo /etc/init.d/redis-s ...

  3. mark DOwm

    https://github.com/summerscar/live2dDemo {% cq %} 人生乃是一面镜子, 从镜子里认识自己, 我要称之为头等大事, 也只是我们追求的目的! {% endc ...

  4. PAT——1041. 考试座位号

    每个PAT考生在参加考试时都会被分配两个座位号,一个是试机座位,一个是考试座位.正常情况下,考生在入场时先得到试机座位号码,入座进入试机状态后,系统会显示该考生的考试座位号码,考试时考生需要换到考试座 ...

  5. ztree案例笔记:用户不规范操作导致添加不了节点的问题

    我使用ztree开发了简码"万能助手",经过一段时间的观察,发现有个别用户不看教程就开始操作,总能给我折腾出一些让人哭笑不得的问题. 比如,把某个根栏目里的节点全删除,然后发现添加 ...

  6. Vue.js——十分钟入门Vuex

    一. 什么是Vuex?   Vuex Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化. Vue ...

  7. Redis集群入门

    官方文章: https://redis.io/topics/cluster-tutorial#redis-cluster-configuration-parameters 本文永久地址: https: ...

  8. python3内置函数大全

    由于面试的时候有时候会问到python的几个基本内置函数,由于记不太清,就比较难受,于是呕心沥血总结了一下python3的基本内置函数 Github源码:        https://github. ...

  9. PTA(BasicLevel)-1008数组元素循环右移问题

    一 .问题描述      原题描述 将长度为n的整形数组A进行右移m位操作, [A0 A1 A2 A3 ... Am...An-1]变为[An-m...An-1 A0 A1 A2 A3 ...An-m ...

  10. springboot 使用@ConfigurationProperties注入配置属性

    导入依赖,让springboot支持@ConfigurationProperties 注解 <!-- 支持 @ConfigurationProperties 注解 --> <depe ...