Django模板与Vue.js冲突问题
参考:
- 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冲突问题的更多相关文章
- Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二)
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...
- 在django中使用vue.js需要注意的地方
有接口如下: http://127.0.0.1:8000/info/schemes/ 返回json数据: [ { "name": "(山上双人标准间)黄山经典二日游(魅力 ...
- django 渲染模板与 vue 的 {{ }} 冲突解决方法
如果不可避免的在同一个页面里既有 django 渲染又有 vue 渲染的部分,可有 2 种方式解决 方法一: 采用 vue 的 delimiters 分隔符. new Vue({ delimiter ...
- django模板导入外部js和css等文件
1.新建文件夹templates(存放模板文件),新建文件夹media(存放js.css.images文件夹),并把两个文件夹放到了项目的根目录下 2.设定模板路径 设置模板路径比较简单,只要在set ...
- django模板中导入js、css等静态文件
打开settings.py,在底部添加: import os STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(os.path.dir ...
- Vue.js+vue-element搭建属于自己的后台管理模板:什么是Vue.js?(一)
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js是什么?(一) 前言 本教程主要讲解关于前端Vue.js框架相关技术知识,通过学习一步一步学会搭建属于自己的后台管理模板,并 ...
- Vue.js+vue-element搭建属于自己的后台管理模板:创建一个项目(四)
Vue.js+vue-element搭建属于自己的后台管理模板:创建一个项目(四) 前言 本章主要讲解通过Vue CLI 脚手架构建工具创建一个项目,在学习Vue CLI之前我们需要先了解下webpa ...
- Vue.js+vue-element搭建属于自己的后台管理模板:更深入了解Vue.js(三)
前言 上一章我们介绍了关于Vue实例中一些基本用法,但是组件.自定义指令.Render函数这些放到了本章来介绍,原因是它们要比前面讲的要难一些,组件是Vue.js最核心的功能,学习使用组件也是必不可少 ...
- Ember.js和Vue.js对比,哪个框架更优秀?
本文由葡萄城技术团队于博客园翻译并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. JavaScript最初是为Web应用程序创建的.但是随着前端技术的 ...
随机推荐
- EncodingHelper
/// <summary> /// Url解码 /// </summary> /// <param name="str">原始字符串</p ...
- Angularjs+node+Mysql实现地图上的多点标注
注:本文适合对于node有一定基础的人,如果您是小白,请先用1个小时学习node.node文档https://nodejs.org/en/docs/ 该片博文的源码地址:https://github. ...
- SD卡的监听
摘要:在一般应用中,如果需要对占用空间比较大的文件操作,需要监听SD卡的状态,Android中对SD卡的监听状态操作步骤如下: 一.创建一个类继承于BroadcastReceiver public c ...
- 关于Django 错误 查询之后结果序列化出现的问题is not JSON serializable
由于查询出来的结果是instance (实例 /对象) 无法实例化, 在model结果加 .value()
- Masonry tableviewCell布局(转)
转载自:http://www.henishuo.com/masonry-tableviewcell-layout/ 前言 说到iOS自动布局,有很多的解决办法.有的人使用xib/storyboard自 ...
- c#委托----我的一点笔记
public partial class ucBloodLabs { public delegate void ShowBloodEvent(); public ShowBloodEvent Show ...
- div+css:div中图片垂直居中
div中图片垂直居中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
- Scrum Meeting 20161207
本周Sprint Master 史少帅 会议概要 工作总结: · 陈双: 等待BHB的下载录音文件的接口,再在服务器端存储录音材料 · 王永超: 打分功能单独测试正确,但合并到项目时出现错误,待解决 ...
- Dev控件GridView单元格绑定控件
Dev控件GridView单元格绑定控件 //文本按钮 RepositoryItemButtonEdit btnFields = new RepositoryItemButtonEdit();//创建 ...
- 在Python中使用可变长参数列表
函数定义 在函数定义中使用*args和**kwargs传递可变长参数. *args用作传递非命名键值可变长参数列表(位置参数); **kwargs用作传递键值可变长参数列表 函数调用 在调用函数时,使 ...