解决vue.js 模板和jinja 模板冲突问题

最新推荐文章于 2023-05-11 11:01:57 发布
原创 最新推荐文章于 2023-05-11 11:01:57 发布 · 4.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js冲突 #模板冲突 #jinja

本文介绍了如何在使用jinjia和vue.js时调整默认的模板转义符{{}

jinjia和vue.js默认的模板转义符都是{{}}

目前的解决办法是修改vue.js的转义符,将原来的{{}}替换为其他标签,我改为{[]}

版本1.x和2.x方法如下
// 1.x
Vue.config.delimiters = ['{[', ']}']

// 2.x
new Vue({
  delimiters: ['{[', ']}']
})

                

        

    



  



    



                



	

		

			

				
					
快速解决vue.js 模板和jinja 模板冲突的问题

				
			

			

				

					09-18
				

			

		

		

			
				
今天小编就为大家分享一篇快速解决vue.js 模板和jinja 模板冲突的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

			
		

	



                

            
              



	

		

			

				
					
vue.js与后台模板引擎“双花括号”冲突

				
			

			

				

					cks26790的博客
				

				

					02-13
					
					531
					
				

			

		

		

			
				
新建时添加delimiters,比如将"{{ }}"改为"[{ }]"



new Vue({


delimiters:['[{','}]'],







})

  ...

			
		

	



              


  
              

                


	

		

			

				
					
Gin + Vue 踩坑

				
			

			

				

					nia305的博客
				

				

					06-28
					
					667
					
				

			

		

		

			
				
文章目录用到的组件Vue

用到的组件

Vue
Gin
Go-Swagger
Bootstrap-Vue
Element-UI-Vue

Vue
刚接触前端的框架，会有很多弄不懂，搞不明白的地方，比如说怎么安装，代码结构如何，怎么开发，怎么调试，怎么跟自己的后端服务通讯等等，最好的方式就是在Git上面找一些好的项目来参照，像Gin-Vue-Admin, vue-realworld-example-app这些都是很好的例子。

...

			
		

	





	

		

			

				
					
Golang后端渲染整合vue单页面冲突解决

				
			

			

				

					码农笔录-微信公众号博客
				

				

					10-28
					
					2158
					
				

			

		

		

			
				
go后端模版渲染是通过 {{}} ，但是有个恶心的问题，vue也是通过双花括号来渲染的，如果同时使用，go渲染的时候就会报错，因为分别不出来哪个是vue的，哪个是go的，今天给大家带来个解决方法，那就是修改vue的默认渲染标签
var app = new Vue({
        delimiters: [’${’, ‘}’],
        el: ‘#vue-app’,
})

配置delimiters，就可以避免开这个冲突，当然里面的标签都是自定义的，下面是我改过之后的用法


...

			
		

	



		

			
		



	

		

			

				
					
python flask jinja2使用Vue,并解决jinja2和vue冲突

				
			

			

				

					weixin_43632687的博客
				

				

					06-23
					
					3063
					
				

			

		

		

			
				
方法1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title&gt

			
		

	





	

		

			

				
					
falsk模板jinja2与Vue冲突解决方案

				
			

			

				

					成小新的博客
				

				

					01-21
					
					5788
					
				

			

		

		

			
				
如果你不关注jinja2，则可以使用改变jinja2模板：
app.jinja_env.variable_start_string = '{['
app.jinja_env.variable_end_string = ']}'

这样子会变成{[ ]}.
你如果只想改变Vue模板，可以这样使用：
var app = new Vue({
        delimiters:['{[', ']}']...

			
		

	





	

		

			

				
					
flask(Jinja2)和vue 同时存在时，怎么处理冲突

				
			

			

				

					weixin_42883164的博客
				

				

					04-20
					
					1796
					
				

			

		

		

			
				
Jinja2 和vue 同时存在时，解决冲突

			
		

	





	

		

			

				
					
flask 项目中整合 vue，vue 模板语法与jinja2 引擎模板语法起冲突，解决方法_设置delimiters

				
			

			

				

					weixin_42883164的博客
				

				

					05-11
					
					670
					
				

			

		

		

			
				
当vue 和jinja2 语法起冲突时，设置 delimiters 解决冲突

			
		

	





	

		

			

				
					
py利用jinja2的模板生成vue前端

				
			

			

				

					viviliving的专栏
				

				

					10-14
					
					630
					
				

			

		

		

			
				
【代码】py利用jinja2的模板生成vue前端。

			
		

	





	

		

			

				
					
解决jinja2和angular的花括号{{}}冲突的方法.

				
			

			

				

					dushu990的博客
				

				

					03-24
					
					2632
					
				

			

		

		

			
				
通过 verbatim 来暂停jinja2的解析可有效解决
{% raw %}
class="user-name">{{ user.name }}
{% endraw %}

			
		

	





	

		

			

				
					
vue与flask(Jinja2)冲突的处理

				
			

			

				

					jbluxun的博客
				

				

					06-19
					
					692
					
				

			

		

		

			
				
由于vue和flask都是用双花括弧{{}}嵌入变量，所以在flask中非常容易发生冲突，其实解决也很简单：


我这里使用双方括弧，你尽可以修改成你习惯的模式，比如${, }都可以。

			
		

	





	

		

			

				
					
解决jinja和vue符号相同冲突

				
			

			

				

					weixin_45070158的博客
				

				

					11-12
					
					626
					
				

			

		

		

			
				
解决jinja和vue符号相同冲突
jinja和vue在使用的时候都是使用{}进行数据绑定，但是当vue和jinja同时使用的时候，就会出现冲突。
此时我们可以对其中一种进行符号更改
对jinja进行修改（在.py文件中修改）
app.jinja_env.variable_start_string = '{[' //设定jinja开始的符号（可随意设置）
app.jinja_env.variable_end_string = ']}'  //设定jinja结束的符号

对vue进行修改（在.html文件中修

			
		

	





	

		

			

				
					
GIn/Vue 搭建的匿名心愿墙

				
			

			

				

					无耻的鱼
				

				

					03-17
					
					435
					
				

			

		

		

			
				
展示地址匿名心愿



后端代码



JwcodeGo.zip

前端代码

JwWeb.zip

部署查看 这篇文章传送门

目录结构





数据库采用的gorm mysql




			
		

	





	

		

			

				
					
golang gin解决跨域

				
			

			

				

					weixin_39129128的博客
				

				

					10-12
					
					1084
					
				

			

		

		

			
				
编写一个中间件
package middleware

import (
	"github.com/gin-gonic/gin"
	"net/http"
)

// 处理跨域请求,支持options访问
func Cors() gin.HandlerFunc {
	return func(c *gin.Context) {
		method := c.Request.Method
		c.Header("Access-Control-Allow-Origin", "*")   // 可将将 * 替换为指定的

			
		

	





	

		

			

				
					
gin-vue-admin  遇到问题汇总

				
			

			

				

					
				

				

					06-17
					
					2500
					
				

			

		

		

			
				
用gin-vue-admin 框架，遇到的问题汇总一下：

1. 获取传过来的参数， get 用ShouldBindQuery，DELETE 、 POST、PUT用ShouldBindJSON

2. 能得到参数，并且有返回空列表，那有可能不是接口的问题，可能是数据的问题。
...

			
		

	





	

		

			

				
					
转载 flask Jinja2模板中使用vue骚操作

				
			

			

				

					wangliuqi123的博客
				

				

					11-26
					
					2988
					
				

			

		

		

			
				
原文地址：https://codeday.me/bug/20181212/453082.html

我最近有这个问题(结合Vue.js和Flask).

至少有两种方法可以组合它们,具体取决于你是创建1)一个简单的Vue.js应用程序还是2)一个更复杂的Vue.js应用程序需要使用像Webpack这样的模块捆绑器来组合Single-File Components或者npm包.

简单的Vue.js...

			
		

	





	

		

			

				
					
vue3 h5 cdn引入 vue.js 和 jinjia 解决模板冲突

				
			

			

				

					mtl1994的博客
				

				

					01-07
					
					618
					
				

			

		

		

			
				
vue3 h5 cdn引入 vue.js 和 jinjia 解决模板冲突



文章目录vue3 h5 cdn引入 vue.js 和 jinjia 解决模板冲突1.js2.html


1.js
const App = {
            data() {
                return {
                	a: "1",
                };
            },
            created: function() {
     

			
		

	





	

		

			

				
					
pcharm 做flask项目 采用vue的前端会和jinja2 模板冲突怎么处理

					
最新发布

				
			

			

				

					12-02
				

			

		

		

			
				
 根据引用[2]和引用[4]，Flask默认使用Jinja2作为模板引擎，而Vue.js也使用类似的语法（双花括号）进行数据绑定，这会导致在渲染模板时冲突。   解决方案通常有两种：  1. 修改Vue.js的模板语法分隔符，避免与Jinja2...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值