参考:

  • https://my.oschina.net/soarwilldo/blog/755984

方法1:修改vue.js的默认的绑定符号

Vue.config.delimiters = ["[[", "]]"];

执行这个之后,你就可以使用“[[”、“]]”来绑定变量的数据了

方法2:使用模板的标签来输出“{{”、“ }}”

django模板的templatetag 可以渲染模板时输出模板标签,标签参数及输出如下:

参数 输出
openblock {%
closeblock %}
openvariable {{
closevariable }}
openbrace {
closebrace }
opencomment {#
closecomment #}

我们可以在模板中用

{% templatetag openvariable %}
{% templatetag closevariable %}

来替代"{{"、"}}"

方法3:禁用django模板渲染

django标签 verbatim可以使包裹其中的代码不进行渲染保持原样输出

{% verbatim %}
{{ vue }}
{% endverbatim %}

我们可以在需要用于vue.js的地方使用{% verbatim %} {% endverbatim %}包裹。

Django模板与Vue.js冲突问题的更多相关文章

  1. Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二)

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...

  2. 在django中使用vue.js需要注意的地方

    有接口如下: http://127.0.0.1:8000/info/schemes/ 返回json数据: [ { "name": "(山上双人标准间)黄山经典二日游(魅力 ...

  3. django 渲染模板与 vue 的 {{ }} 冲突解决方法

    如果不可避免的在同一个页面里既有 django 渲染又有 vue 渲染的部分,可有 2 种方式解决 方法一: 采用 vue 的 delimiters  分隔符. new Vue({ delimiter ...

  4. django模板导入外部js和css等文件

    1.新建文件夹templates(存放模板文件),新建文件夹media(存放js.css.images文件夹),并把两个文件夹放到了项目的根目录下 2.设定模板路径 设置模板路径比较简单,只要在set ...

  5. django模板中导入js、css等静态文件

    打开settings.py,在底部添加: import os STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(os.path.dir ...

  6. Vue.js+vue-element搭建属于自己的后台管理模板:什么是Vue.js?(一)

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js是什么?(一) 前言 本教程主要讲解关于前端Vue.js框架相关技术知识,通过学习一步一步学会搭建属于自己的后台管理模板,并 ...

  7. Vue.js+vue-element搭建属于自己的后台管理模板:创建一个项目(四)

    Vue.js+vue-element搭建属于自己的后台管理模板:创建一个项目(四) 前言 本章主要讲解通过Vue CLI 脚手架构建工具创建一个项目,在学习Vue CLI之前我们需要先了解下webpa ...

  8. Vue.js+vue-element搭建属于自己的后台管理模板:更深入了解Vue.js(三)

    前言 上一章我们介绍了关于Vue实例中一些基本用法,但是组件.自定义指令.Render函数这些放到了本章来介绍,原因是它们要比前面讲的要难一些,组件是Vue.js最核心的功能,学习使用组件也是必不可少 ...

  9. Ember.js和Vue.js对比,哪个框架更优秀?

    本文由葡萄城技术团队于博客园翻译并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. JavaScript最初是为Web应用程序创建的.但是随着前端技术的 ...

随机推荐

  1. 点击div 跳转并通过URL传参

    点击div前要先给div绑定要传的参数: //给panel绑定自定义属性,方便在跳转时传带参数,键/值对排列 panel.attr("user_age",user_age); pa ...

  2. jdk 环境变量配置

    环境变量:Path %JAVA_HOME%\bin;%JAVA_HOME%\jre\binCLASSPATH .;%JAVA_HOME%\lib;JAVA_HOME D:\java\jdk1.5.0_ ...

  3. Twisted随笔

    学习了socket后决定尝试使用框架,目标锁定了Twisted. 什么是Twisted? twisted是一个用python语言写的事件驱动的网络框架,他支持很多种协议,包括UDP,TCP,TLS和其 ...

  4. 用hibernate tools生成对应的sql应用代码

    参考资料: eclipse在线配置hibernate tools http://jingyan.baidu.com/article/db55b609959d154ba20a2f5d.html [图]H ...

  5. Python报错UnicodeDecodeError: ascii codec can t decode byte 0xe0 ...解决方法

    用命令(python setup.py install)安装webpy时候总是报错 在网上搜索到的解决方法如下: 1. 这是Python 2 mimetypes的bug 2. 需要将Python2.7 ...

  6. JavaScript系列文章:从let和const谈起

    注册博客园账号也有好些年了,有事没事经常来逛逛,感觉博客园的同学们一直都很活跃,相比国内其他社区来讲,这里的技术氛围很浓,非常适合学习和交流,所以博主我也决定在这里驻扎了,在这里,博主希望能坚持写一些 ...

  7. linux单网卡多IP配置

    一.仅一个网卡的情况下,可以让该机器可以通过多个IP被访问,或隐藏常用IP,让他人访问其临时IP. 1.如果临时性的增加一个IP(重启机器或network服务后,丢失),可以使用ifconfig命令 ...

  8. PHP编码规范PSR-1

    .note-content { font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHeit ...

  9. CSS-各种cs样式之浏览器兼容处理方式汇总大全(更新中...)

    页面模板 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 ...

  10. QT下调试基于ros的catkin项目

    1.首先告诉qt ros的搜索路径,通过修改qt creator 桌面启动程序来实现 sudo    gedit ~/.local/share/applications/DigiaQtOpenSour ...