Go模板后端渲染时vue单页面冲突处理
发布时间：2024年01月11日
go后端模版语法是通过 {{}} ，vue也是通过双花括号来渲染的，如果使用go渲染vue的html页面的时候就会报错，因为分别不出来哪个是vue的，哪个是go的，既可以修改go的模板语法
template.New("output").Delims("{%", "%}")
也可以修改vue的
new Vue({
delimiters: ['${', '}'],
el: '#vue-app',
})
但是由于我在golang的编辑器中，在html文件类型改为go模板时，不想看到语法报错，所以就修改vue的。并且由于我的组件多，且复用的html多，所以我需要抽离公共的部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js Delimiters Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<component-one></component-one>
<component-two></component-two>
</div>
<script>
// 定义 mixin
var myMixin = {
data: function () {
return {
message: 'Hello from mixin!'
}
}
}
// 定义组件 ComponentOne
Vue.component('component-one', {
mixins: [myMixin],
data: function () {
return {
message: 'Hello from mixin1111!'
}
},
template: '<div>${ message }</div>',
delimiters: ['${', '}'] // 设置分隔符
});
// 定义组件 ComponentTwo
Vue.component('component-two', {
mixins: [myMixin],
template: '<div>${ message }</div>', // 使用相同的分隔符
delimiters: ['${', '}'] // 设置分隔符
});
new Vue({
el: '#app'
});
</script>
</body>
</html>
这种已经可以实现，但是每个组件的template可能是一样的，并且也不是上面那种简单没有class等信息的，所以需要抽离，所以就变成了下面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js Delimiters Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<component-one></component-one>
<component-two></component-two>
</div>
<script>
// 定义 mixin
var myMixin = {
data: function () {
return {
message: 'Hello from mixin!'
}
}
}
// 复杂的共享模板字符串
var sharedTemplate = `
<div class="my-component">
<p>${message}</p>
<!-- Add your complex HTML structure and styles here -->
</div>
`;
// 定义组件 ComponentOne
Vue.component('component-one', {
mixins: [myMixin],
template: sharedTemplate,
delimiters: ['${', '}'] // 设置分隔符
});
// 定义组件 ComponentTwo
Vue.component('component-two', {
mixins: [myMixin],
template: sharedTemplate, // 使用相同的分隔符
delimiters: ['${', '}'] // 设置分隔符
});
new Vue({
el: '#app'
});
</script>
</body>
</html>
这种运行后你会发现，无法渲染，控制台报错
怎么回事，语法也没错，分隔符设置也没问题，但提示没有定义，猜测是`符号影响了(不确定，有懂的call我)，
想要解决这个问题，法一，模板中替换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js Delimiters Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<component-one></component-one>
<component-two></component-two>
</div>
<script>
// 定义 mixin
var myMixin = {
data: function () {
return {
message: 'Hello from mixin!'
}
}
}
// 复杂的共享模板字符串
var sharedTemplate = `
<div class="my-component">
<p>$MESSAGE$</p>
<!-- Add your complex HTML structure and styles here -->
</div>
`;
// 定义组件 ComponentOne
Vue.component('component-one', {
data: function () {
return {
message: 'Hello from mixin1111!'
}
},
mixins: [myMixin],
template: sharedTemplate.replace('$MESSAGE$', '${message}'),
delimiters: ['${', '}'] // 设置分隔符
});
// 定义组件 ComponentTwo
Vue.component('component-two', {
mixins: [myMixin],
template: sharedTemplate.replace('$MESSAGE$', '${message}'), // 使用相同的分隔符
delimiters: ['${', '}'] // 设置分隔符
});
new Vue({
el: '#app'
});
</script>
</body>
</html>
可以渲染，但是麻烦，传递几个变量就得替换几次
法二：和法一类似，在生成模板时处理
<body>
<div id="app">
<component-one></component-one>
<component-two></component-two>
</div>
<script>
// 定义 mixin
var myMixin = {
data: function () {
return {
message: 'Hello from mixin!'
}
}
}
// 生成带有动态值的模板字符串
function generateTemplate(message) {
return `
<div class="my-component">
<p>${message}</p>
<!-- Add your complex HTML structure and styles here -->
</div>
`;
}
// 定义组件 ComponentOne
Vue.component('component-one', {
data: function () {
return {
message: 'Hello from mixin1111!'
}
},
mixins: [myMixin],
template: generateTemplate('${message}'),
delimiters: ['${', '}'] // 设置分隔符
});
// 定义组件 ComponentTwo
Vue.component('component-two', {
mixins: [myMixin],
template: generateTemplate('${message}'), // 使用相同的分隔符
delimiters: ['${', '}'] // 设置分隔符
});
new Vue({
el: '#app'
});
</script>
</body>
</html>
可以渲染，但是比较麻烦，单独传值
法三(推荐，简单)，模板字面量，使用vue变量的地方带上\转义，无需修改其它
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js Delimiters Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<component-one></component-one>
<component-two></component-two>
</div>
<script>
// 定义 mixin
var myMixin = {
data: function () {
return {
message: 'Hello from m1!',
msg: 'Hello from m2!'
}
}
}
// 使用模板字面量定义模板字符串
var sharedTemplate = `
<div class="my-component">
<p>\${message}</p>
<p>\${msg}</p>
<!-- Add your complex HTML structure and styles here -->
</div>
`;
// 定义组件 ComponentOne
Vue.component('component-one', {
data: function () {
return {
message: 'Hello from mixin1111!',
msg: 'Hello from mixin2222!'
}
},
mixins: [myMixin],
template: sharedTemplate,
delimiters: ['${', '}'] // 设置分隔符
});
// 定义组件 ComponentTwo
Vue.component('component-two', {
mixins: [myMixin],
template: sharedTemplate, // 使用相同的分隔符
delimiters: ['${', '}'] // 设置分隔符
});
new Vue({
el: '#app'
});
</script>
</body>
</html>
如下
然后在数据渲染时使用golang的模板语法替换数据进行渲染即可
文章来源:https://blog.csdn.net/cf313995/article/details/135521406
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！
最新文章
- Python教程
- 深入理解 MySQL 中的 HAVING 关键字和聚合函数
- Qt之QChar编码（1）
- MyBatis入门基础篇
- 用Python脚本实现FFmpeg批量转换
- 数据结构之线性表
- 四川琦圈咨询：让企业管理更高效
- [玩转AIGC]LLaMA2之如何微调模型
- poi使用
- 最值得推荐的10个免费PDF转Word的方法
- 2023全国职业技能大赛 网络系统管理 服务部署 Linux部分--基础配置
- 如何在Go中使用模板
- datawhale 大模型学习 第四章-新模型架构
- 《PCI Express体系结构导读》随记 —— 第I篇 第1章 PCI总线的基本知识（20）
- JavaScript初级知识（2）