Go模板后端渲染时vue单页面冲突处理

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的模板语法替换数据进行渲染即可

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/321906.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

在线直径测量仪 使用范围广 透明、柔软、易形变…

在线直径测量仪 使用范围广 透明、柔软、易形变…

在线直径测量仪&#xff0c;用于截面为圆形的产品的外径尺寸检测&#xff0c;并且由于其是光学检测设备&#xff0c;进行非接触式的尺寸检测&#xff0c;因此对其材质温度等都没有要求&#xff0c;对硬质的、柔软的、熔融的、透明的、高温的等各种易检测不易检测的轧材均可进行…
阅读更多...
【C++】异常机制

【C++】异常机制

异常 一、传统的处理错误的方式二、C异常概念三、异常的使用1. 异常的抛出和捕获&#xff08;1&#xff09;异常的抛出和匹配原则&#xff08;2&#xff09;在函数调用链中异常栈展开匹配原则 2. 异常的重新抛出3. 异常安全4. 异常规范 四、自定义异常体系五、C 标准库的异常体…
阅读更多...
uniapp+vue3打包问题记录

uniapp+vue3打包问题记录

**背景&#xff1a;**打包app出现问题&#xff0c;只显示底部导航的文字&#xff0c;其他一片空白 1. pages.json文件&#xff1a;tabBar中的iconPath图标格式不支持svg&#xff0c;只支持&#xff1a;png, jpg, jpeg的格式&#xff0c;当图片改为.png的时候可以正常显示 2. …
阅读更多...
212. 单词搜索 II（字典树的另一种类型）

212. 单词搜索 II（字典树的另一种类型）

大致思路是&#xff1a; 根据words列表建立字典树&#xff0c;其中注意在单词末尾&#xff0c;将原来的isEnd变量换成存储这个单词的变量&#xff0c;方便存储到ans中&#xff0c;另外&#xff0c;字典树的字节点由原来的Trie数组变为hashmap&#xff0c;方便检索字母。 建立…
阅读更多...
1.14寒假集训

1.14寒假集训

A: 解题思路&#xff1a;按照题目意思模拟即可&#xff0c;只要不满足条件就输出“No”然后结束循环&#xff0c;否则最后输出“Yes”。 下面是c代码&#xff1a; #include<iostream> using namespace std; int main() { int n,arr[100000],index 0; cin >…
阅读更多...
Vue中的v-model

Vue中的v-model

聚沙成塔每天进步一点点 本文内容 ⭐ 专栏简介基本用法文本输入框复选框下拉框 原理解析文本输入框的原理复选框和下拉框的原理 ⭐ 写在最后 ⭐ 专栏简介 Vue学习之旅的奇妙世界 欢迎大家来到 Vue 技能树参考资料专栏&#xff01;创建这个专栏的初衷是为了帮助大家更好地应对 V…
阅读更多...
CAN/CANFD数据记录仪汽车电子售后神器

CAN/CANFD数据记录仪汽车电子售后神器

CAN数据记录仪是一种用于采集和存储CAN总线数据的工具&#xff0c;广泛应用于汽车、轨道车辆、工业控制等大数据量且不易排查故障的系统中。它可以实时存储总线上的数据&#xff0c;方便后续的研究和分析。解决工程师售后难点。 在选择CAN数据记录仪时&#xff0c;需要根据实…
阅读更多...
堆排序——高效解决TOP-K问题

堆排序——高效解决TOP-K问题

. 个人主页&#xff1a;晓风飞 专栏&#xff1a;数据结构|Linux|C语言 路漫漫其修远兮&#xff0c;吾将上下而求索 文章目录 引言什么是堆&#xff1f;建堆堆排序&#xff1a;排序的最终结果 堆排序实现函数声明交换函数 Swap下沉调整 DnAdd堆排序函数 HeapSort主函数 文件中找…
阅读更多...
一天吃透Java并发面试八股文

一天吃透Java并发面试八股文

内容摘自我的学习网站&#xff1a;topjavaer.cn 分享50道Java并发高频面试题。 线程池 线程池&#xff1a;一个管理线程的池子。 为什么平时都是使用线程池创建线程&#xff0c;直接new一个线程不好吗&#xff1f; 嗯&#xff0c;手动创建线程有两个缺点 不受控风险频繁创…
阅读更多...
通过离散点拟合曲线

通过离散点拟合曲线

文章目录 使用离散点拟合曲线参考代码路径:作者源码:测试代码效果图:k3k4k5 使用离散点拟合曲线 参考代码路径: https://www.bragitoff.com/2015/09/c-program-for-polynomial-fit-least-squares/ https://gist.github.com/Thileban/272a67f2affdc14a5f69ad3220e5c24b https:/…
阅读更多...
PID横向控制和仿真实现

PID横向控制和仿真实现

文章目录 1. PID介绍2. PID横向控制原理3. 算法和仿真实现 1. PID介绍 PID是一种常见的控制算法&#xff0c;全称为Proportional-Integral-Derivative&#xff0c;即比例-积分-微分控制器。PID控制器是一种线性控制器&#xff0c;它将设定值与实际值进行比较&#xff0c;根据误…
阅读更多...
基于51单片机的模拟量输入输出通道实验

基于51单片机的模拟量输入输出通道实验

实验一 模拟量输入输出通道实验&#xff08;C51&#xff09; 一、实验目的&#xff1a; 1、了解A/D、D/A转换的基本原理。 2、了解A/D转换芯片ADC0809、D/A转换芯片DAC0832的性能及编程方法。 3、掌握过程通道中A/D转换与D/A转换与计算机的接口方法。 4、了解计算机如何进…
阅读更多...
VSCode 正则表达式 匹配多行

VSCode 正则表达式 匹配多行

VS Code 正则表达式匹配多行 (.|\n)*? //test.js const test {str: VS Code 正则表达式匹配多行VS Code 正则表达式匹配多行VS Code 正则表达式匹配多行VS Code 正则表达式匹配多行VS Code 正则表达式匹配多行VS Code 正则表达式匹配多行VS Code 正则表达式匹配多行VS Code …
阅读更多...
数据库作业二

数据库作业二

一&#xff0c;单表查询 1.创建表 1、显示所有职工的基本信息。 2、查询所有职工所属部门的部门号&#xff0c;不显示重复的部门号。 3、求出所有职工的人数。 4、列出最高工和最低工资。 5、列出职工的平均工资和总工资。 6、创建一个只有职工号、姓名和参加工作的…
阅读更多...
【WPF.NET开发】WPF中的版式

【WPF.NET开发】WPF中的版式

本文内容 改进的文本质量和性能丰富的版式增强的国际文本支持增强的字体支持新的文本应用程序编程接口 (API) 本主题介绍 WPF 的主要版式功能。 这些功能包括改进的文本呈现质量和性能、OpenType 版式支持、增强的国际文本、增强的字体支持和新的文本应用程序编程接口 (API)。…
阅读更多...
2024多系统萎缩最新全球特效药治疗进展

2024多系统萎缩最新全球特效药治疗进展

多系统萎缩是一种罕见的神经退行性疾病&#xff0c;由于缺乏有效的治疗方法&#xff0c;患者经常面临症状无法缓解和生活品质下降的困扰。然而&#xff0c;近期刘家峰大夫基于中医理论研究和临床实践&#xff0c;采用中药治疗多系统萎缩取得了显著疗效&#xff0c;给患者带来了…
阅读更多...
VUE好看的个人简历模板

VUE好看的个人简历模板

文章目录 1.设计来源1.1 首页界面1.2 关于我界面1.3 我的资历界面1.4 项目经验界面1.5 我的技能界面1.6 联系我界面 2.效果和源码2.1 动态效果2.2 源码目录结构 源码下载 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/details/…
阅读更多...
RMI简介

RMI简介

RMI 介绍 RMI (Remote Method Invocation) 模型是一种分布式对象应用&#xff0c;使用 RMI 技术可以使一个 JVM 中的对象&#xff0c;调用另一个 JVM 中的对象方法并获取调用结果。这里的另一个 JVM 可以在同一台计算机也可以是远程计算机。因此&#xff0c;RMI 意味着需要一个…
阅读更多...
线程安全2

线程安全2

文章目录 锁的可重入性死锁内存可见性引起的线程安全 锁的可重入性 直观来看这个代码不能运行 为啥没有出现阻塞&#xff1f; 当前由于是同一个线程&#xff0c;此时的锁对象&#xff0c;就知道了第二次加锁的线程&#xff0c;就是持有锁的线程&#xff0c;第二次操作&#xff…
阅读更多...
Linux下如何快速调试I2C设备

Linux下如何快速调试I2C设备

Linux下如何快速调试I2C设备 目录 1 什么场景下需要快速调试I2C设备 2 如何快速调试I2C设备 3 如何获取I2C Tools工具集 3.1 获取I2C Tools工具集源码 3.2 编译I2C Tools工具集源码 3.3 为设备添加I2C Tools工具集 4 如何使用I2C Tools工具集 5 小结 1 什么场景下需要快…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站