详解django模板与vue.js冲突问题

2024-09-26 22:18:27

问题：

django模板与vue.js的变量都是使用“{{”和“}}”包裹起来的，在渲染django模板时会先替代掉所有的“{{”和“}}”及被包裹在其中的内容，使得vue.js没有使用”{{“、”}}”来绑定变量。

处理方法：

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

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

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

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

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

我们可以在模板中用

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

来替代”{{“、”}}”

方法3：禁用django模板渲染

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

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

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

详解django模板与vue.js冲突问题

问题: django模板与vue.js的变量都是使用"{{"和"}}"包裹起来的,在渲染django模板时会先替代掉所有的"{{"和"}}"及被包裹在其中的内容,使得vue.js没有使用"{{"."}}"来绑定变量. 处理方法: 方法1:修改vue.js的默认的绑定符号 Vue.config.delimiters = ["[[", "]]"]; 执
详解基于 Nuxt 的 Vue.js 服务端渲染实践

Vue.js 是目前最火热的前端框架之一,而 Nuxt.js 是针对 Vue.js 推出的服务端渲染框架,通过高度定制化的配置以及简洁的 API,开发者可以快速进行服务端渲染项目的开发,本文将对 Nuxt.js 框架做一个简要介绍. 服务端渲染服务端渲染(Server Side Render)并不是一个新的概念,在单页应用(SPA)还没有流行起来的时候,页面就是通过服务端渲染好,并传递给浏览器的.当用户需要访问新的页面时,需要再次请求服务器,返回新的页面. 为了优化体验,开发者们开始选择采用
详解基于webpack和vue.js搭建开发环境

前言在对着产品高举中指怒发心中之愤后,真正能够解决问题的是自身上的改变,有句话说的好:你虽然改变不了全世界,但是你有机会改变你自己.秉承着"不听老人言,吃亏在眼前"的优良作风,我还是决定玩火自焚. 问题所在之前的项目总结为以下内容: 1.AMD模块规范开发,使用requirejs实现,使用rjs打包,最终导致的结果是,输出的项目臃肿,肿的就像一坨狗不理--不忍直视 2.使用gulp进行打包,这一点貌似没有可吐槽的地方,毕竟都是被grunt折磨过来的-- 3.数据的渲染使用模板引擎,
详解Django模板层过滤器和继承的问题

过滤器模板层对变量的操作实际还有很多,过滤器就是其中一种.学过Linux系统的一定知道管道操作符,其可以将上一步输出直接作为下一步输入进行处理,这里的过滤器就是类似管道符,其写法也是以管道符|为标志,允许我们对模板层获得的变量进行改变,例如大小写转换.增减大小等等语法 {{ 变量|过滤器1|过滤器2:'值' |...}} 这里的过滤器可以分为两类,一类是不带参数的,例如lower,upper,safe:一类是带参数的add:'10',冒号分隔,后面跟上值过滤器示例说明 lower {{
详解Javascript模板引擎mustache.js

本文总结它的使用方法和一些使用心得,内容不算很高深,纯粹是入门内容,看看即可.不过要是你还没有用过此类的javascript引擎库,那么本文还是值得你一读的,相信在你了解完它强大的功能和简单用法之后,一定会迫不及待地将之用于你的工作当中. 1. 从一个简单真实的需求讲起目前公司做了一个统一的开发平台,后台封装了MVC的接口和数据增删改查的接口,前端我自己用bootstrap+手写各类组件的方式弄了一套开发框架:集成了CAS,在CAS的基础上,首先做了一套统一权限管理系统,这个系统是我们开发平台
详解velocity模板使javaWeb的html+js实现模块化

详解velocity模板使javaWeb的html+js实现模块化页面上一些基础数据或者其他页面经常用到部分,可以独立出来做成小组件,组件预留调用入口,需要的页面直接调用即可. 如图,页面中的展示分类和搜索标签在多个页面重复使用,可以将这部分内容独立出来,做成组件,供后续开发调用: classify_search_tag.html文件如下,其中包含HTML节点和jQuery代码: <!-- 展示分类与搜索标签组件使用说明: 1.新增时父页面调用方法:页面加载时调用 goodsClassifyA
详解Django+Vue+Docker搭建接口测试平台实战

一. 开头说两句大家好,我叫林宗霖,是一位测试工程师,也是全栈测开训练营中的一名学员. 在跟着训练营学习完Docker容器技术系列的课程后,理所应当需要通过实操来进行熟悉巩固.正好接口自动化测试平台需要迁移到新的测试服务器上,就想要体验一番Docker的"一次构建,处处运行".这篇文章简单介绍了下这次部署的过程,其中使用了Dockerfile定制镜像和Docker-Compose多容器编排. 二. 项目介绍项目采用的是前后端分离技术来实现的,前端是Vue+ElementUI,后端是
ejsExcel模板在Vue.js项目中的实际运用

什么是ejsExcel? ejsExcel是一款国人开发的.在Node.js应用程序中使用我们预先设置好的Excel模板导出Excel表格的模板引擎. Excel模板导出后 Github地址 ejsExcel 如果因为众(ni)所(dong)周(de)知的原因打不开github,没有关系,它的语法很简单,都是一些对Excel模板格式的定义: 这篇文章是我在工作中因为业务需要,用到了ejsExcel这个模板引擎,觉得很不错,但是坑也不少.而网上相关的资料又太少,所以趁此机会总结了一下我的踩坑经历
详解Django模版中加载静态文件配置方法

1.settings.INSTALLED_APPS下添加:django.contrib.staticfiles 2.settings.py下添加:STATIC_URL = '/static/' 3. (1)在APP下新建文件夹static,然后在这个static文件夹下创建一个当前APP的名字的文件夹,再把静态文件放到这个文件夹下:(类似于Templates配置) 在模板中这样调用: {% load static %} <img src="{% static 'front/logo.jpg
详解Django中views数据查询使用locals()函数进行优化

优化场景利用视图函数(views)查询数据之后可以通过上下文context.字典.列表等方式将数据传递给HTML模板,由template引擎接收数据并完成解析.但是通过context传递数据可能就存在在不同的视图函数中使用重复的查询语句,所以可以通过将重复查询语句设置全局变量,配合locals()函数进行数据查询与传递. 优化前 def index(request): threatname = '威胁情报展示' url = 'www.testtip.com' allthreat = Threa

详解django模板与vue.js冲突问题

相关推荐

随机推荐