参考:

  • 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. web前端面试总结

    本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链.万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的!也是不可能的! 前端还是一个 ...

  2. 使用AccessibilityService执行开机自启动

    res/xml/accessibility_service_config.xml <accessibility-service xmlns:android="http://schema ...

  3. haproxy利用ACL规则封禁自定义IP地址拒绝访问

    现在有一个需求就是在发版的时候希望除公司IP外的外网访问服务的时候都是拒绝访问的 现在利用haproxy 的acl规则作出限制 errorfile       403 /etc/haproxy/err ...

  4. iOS开发小技巧 -- tableView-section圆角边框解决方案

    [iOS开发]tableView-section圆角边框解决方案 tableView圆角边框解决方案 iOS 7之前,图下圆角边框很容易设置 iOS 7之后,tableviewcell的风格不再是圆角 ...

  5. maven和svn区别

    构建工具-maven,版本控制工具-svn. 一.只有svn的情况        首先考虑没有maven的情况.这样的话,项目组每个开发人员,都需要在本地check out所有的源码. 每次提交之前, ...

  6. 日历插件FullCalendar应用:(二)数据增删改

    接上一篇 日历插件FullCalendar应用:(一)数据展现. 这一篇主要讲使用fullcalendar插件如何做数据的增删改,用到了art.dialog web对话框组件,上一篇用到的webFor ...

  7. JAVA面向对象

    JAVA面向对象 对象   我们生活中能看到能摸到的一切事物都是对象.在程序中模拟出生活中的所有东西万物皆对象   只要是对象--属性和行为(方法)   属性   对象有什么   例如:学生有姓名.学 ...

  8. TypeScript 素描-变量声明

    博文读自 TypeScript 官方文档而来,不具有学习性,仅是本人学习时记录以供日后翻阅 ,有学习TypeScript的朋友还请去看更为详细的官方文档 /* 变量声明在之前的js中一直是使用var关 ...

  9. Prism 轻量级可扩展代码高亮库.

    官方网站:http://prismjs.com/ Prism 是一个轻量级并且简单易用的 JavaScript 类库,minified 和 gzipped 压缩后只有 1.5kb 大小,即使添加语言定 ...

  10. .Net 高效开发之不可错过的实用工具

    Visual Studio Visual Studio Productivity Power tool: VS 专业版的效率工具. Web Essentials: 提高开发效率,能够有效的帮助开发人员 ...