脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 脚本专栏 → Golang → Go vue 单页面冲突

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

 更新时间：2024年01月11日 11:47:42   作者：cf313995  
go后端模版语法是通过 {{}} ,vue也是通过双花括号来渲染的,如果使用go渲染vue的html页面的时候就会报错,本文主要介绍了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的模板语法替换数据进行渲染即可

到此这篇关于Go模板后端渲染时vue单页面冲突的文章就介绍到这了,更多相关Go vue 单页面冲突内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Go语言实现开发一个简单的gRPC Demo

    Go语言实现开发一个简单的gRPC Demo

    这篇文章主要为大家详细介绍了如何利用Go语言实现开发一个简单的gRPC Demo，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起了解一下
    2023-07-07
  • Go语言中ORM框架GORM使用介绍

    Go语言中ORM框架GORM使用介绍

    GORM是Go语言中最受欢迎的ORM库之一，它提供了强大的功能和简洁的 API，让数据库操作变得更加简单和易维护，本文将详细介绍GORM的常见用法，包括数据库连接、模型定义、CRUD、事务管理等方面，帮助大家快速上手使用GORM进行Web后端开发
    2023-06-06
  • Go语言中如何实现并发

    Go语言中如何实现并发

    Go的并发机制通过协程和通道的简单性和高效性，使得编写并发代码变得相对容易，这种并发模型被广泛用于构建高性能的网络服务、并行处理任务和其他需要有效利用多核处理器的应用程序，这篇文章主要介绍了在Go中如何实现并发,需要的朋友可以参考下
    2023-09-09
  • 一文深入探讨Go语言中的if-else语句

    一文深入探讨Go语言中的if-else语句

    在Go语言中,条件语句的使用方式相对简洁明了,所以本文将探讨一下如何在Go程序中有效地进行条件判断和逻辑控制,感兴趣的小伙伴可以了解下
    2023-08-08
  • golang 开启opencv图形化编程

    golang 开启opencv图形化编程

    这篇文章主要为大家介绍了golang 开启opencv图形化编程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10
  • GO 反射对性能的影响分析

    GO 反射对性能的影响分析

    这篇文章主要为大家介绍了GO 反射对性能的影响分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • Go语言实现优雅关机和重启的示例详解

    Go语言实现优雅关机和重启的示例详解

    在Go语言中,实现优雅关机和重启通常涉及到处理系统信号,并确保在关闭前完成所有必要的清理工作,下面我们就来看看如何使用http.Server和os/signal包来实现优雅关机和重启吧
    2025-05-05
  • Go语言底层原理互斥锁的实现原理

    Go语言底层原理互斥锁的实现原理

    这篇文章主要介绍了Go语言底层原理互斥锁的实现原理，Go sync包提供了两种锁类型，分别是互斥锁sync.Mutex和读写互斥锁sync.RWMutex，都属于悲观锁，更多相关内容需要的朋友可以查看下面文章内容
    2022-08-08
  • go-cqhttp权限管理系统的实现代码

    go-cqhttp权限管理系统的实现代码

    这篇文章主要介绍了go-cqhttp权限管理,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-09-09
  • GO语言中回调函数的使用

    GO语言中回调函数的使用

    本文主要介绍了GO语言中回调函数的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03

最新评论