参考:

  • 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. shell及脚本1——变量

    一.shell shell是操作系统与用户之间的沟通的渠道,可以接收并执行用户的命令,有很多shell程序,目前linux默认使用bash shell程序. bash shell有很多实用功能,例如: ...

  2. java-读取javabean类的set方法并设值

    /** * 新反射实例化模型 * @param filenamepath * @return */ public static Object newIntence(String filenamepat ...

  3. 在SpringMVC中使用@SessionAttributes和@ModelAttribute将数据存储在session域中

    今天在我的springMVC项目--图书管理系统中,希望在登录时将登录的Users存在session中,开始是准备在controller中使用Servlet API中的对象,可是一直无法引用,不知道为 ...

  4. 配置本机IIS服务器

    1.控制面板---程序---(程序和功能) 安装完成之后就可以访问本地的localhost 2.进入防火墙界面--高级设置 至此开放端口完成

  5. 把url参数转化成一个对象返回

    var readUrlToParams = function () { var url = location.href; var nameValue; var paraString = url.sub ...

  6. POJ 1815 Friendship

    Friendship Time Limit: 2000MS   Memory Limit: 20000K Total Submissions: 10626   Accepted: 2949 Descr ...

  7. jedis支持哨兵主从配置role为slave

    jedis功能强大,但是不能像nodejs一样指定从slave中读数据,使数据量读写量较大时读写分离,减少redis压力. 我们可以利用jedis中的方法封装一个类似于此的方法. github地址: ...

  8. redis消息队列简单应用

    消息队列出现的原因 随着互联网的高速发展,门户网站.视频直播.电商领域等web应用中,高并发.大数据已经成为基本的标识.淘宝双11.京东618.各种抢购.秒杀活动.以及12306的春运抢票等,他们这些 ...

  9. dom 的介绍

    直接上干货 ...网址在此,,,,, <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object ...

  10. 机器学习——利用K-均值聚类算法对未标注数据分组

    聚类是一种无监督的学习,它将相似的对象归到同一簇中.它有点像全自动分类.聚类方法几乎可以应用到所有对象,簇内的对象越相似,聚类的效果越好. K-均值(K-means)聚类算法,之所以称之为K-均值是因 ...