快捷導(dǎo)航

Go模板后端渲染時(shí)vue單頁(yè)面沖突

更新時(shí)間：2024年01月11日 11:47:42 作者：cf313995

go后端模版語(yǔ)法是通過(guò) {{}} ,vue也是通過(guò)雙花括號(hào)來(lái)渲染的,如果使用go渲染vue的html頁(yè)面的時(shí)候就會(huì)報(bào)錯(cuò),本文主要介紹了Go模板后端渲染時(shí)vue單頁(yè)面沖突,感興趣的可以了解一下

go后端模版語(yǔ)法是通過(guò) {{}} ，vue也是通過(guò)雙花括號(hào)來(lái)渲染的，如果使用go渲染vue的html頁(yè)面的時(shí)候就會(huì)報(bào)錯(cuò)，因?yàn)榉謩e不出來(lái)哪個(gè)是vue的，哪個(gè)是go的，既可以修改go的模板語(yǔ)法

template.New("output").Delims("{%", "%}")

也可以修改vue的

new Vue({
	delimiters: ['${', '}'],
	el: '#vue-app',
})

但是由于我在golang的編輯器中，在html文件類型改為go模板時(shí)，不想看到語(yǔ)法報(bào)錯(cuò)，所以就修改vue的。并且由于我的組件多，且復(fù)用的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: ['${', '}'] // 設(shè)置分隔符
  });

  // 定義組件 ComponentTwo
  Vue.component('component-two', {
    mixins: [myMixin],
    template: '<div>${ message }</div>', // 使用相同的分隔符
    delimiters: ['${', '}'] // 設(shè)置分隔符
  });

  new Vue({
    el: '#app'
  });
</script>

</body>
</html>

這種已經(jīng)可以實(shí)現(xiàn)，但是每個(gè)組件的template可能是一樣的，并且也不是上面那種簡(jiǎn)單沒(méi)有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!'
      }
    }
  }

  // 復(fù)雜的共享模板字符串
  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: ['${', '}'] // 設(shè)置分隔符
  });

  // 定義組件 ComponentTwo
  Vue.component('component-two', {
    mixins: [myMixin],
    template: sharedTemplate, // 使用相同的分隔符
    delimiters: ['${', '}'] // 設(shè)置分隔符
  });

  new Vue({
    el: '#app'
  });
</script>

</body>
</html>

這種運(yùn)行后你會(huì)發(fā)現(xiàn)，無(wú)法渲染，控制臺(tái)報(bào)錯(cuò)

在這里插入圖片描述

怎么回事，語(yǔ)法也沒(méi)錯(cuò)，分隔符設(shè)置也沒(méi)問(wèn)題，但提示沒(méi)有定義，猜測(cè)是`符號(hào)影響了(不確定，有懂的call我)，

想要解決這個(gè)問(wèn)題

法一，模板中替換

<!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!'
      }
    }
  }

  // 復(fù)雜的共享模板字符串
  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: ['${', '}'] // 設(shè)置分隔符
  });

  // 定義組件 ComponentTwo
  Vue.component('component-two', {
    mixins: [myMixin],
    template: sharedTemplate.replace('$MESSAGE$', '${message}'), // 使用相同的分隔符
    delimiters: ['${', '}'] // 設(shè)置分隔符
  });

  new Vue({
    el: '#app'
  });
</script>

</body>
</html>

可以渲染，但是麻煩，傳遞幾個(gè)變量就得替換幾次

在這里插入圖片描述

法二：和法一類似，在生成模板時(shí)處理

<body>

<div id="app">
  <component-one></component-one>
  <component-two></component-two>
</div>

<script>
  // 定義 mixin
  var myMixin = {
    data: function () {
      return {
        message: 'Hello from mixin!'
      }
    }
  }

  // 生成帶有動(dòng)態(tài)值的模板字符串
  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: ['${', '}'] // 設(shè)置分隔符
  });

  // 定義組件 ComponentTwo
  Vue.component('component-two', {
    mixins: [myMixin],
    template: generateTemplate('${message}'), // 使用相同的分隔符
    delimiters: ['${', '}'] // 設(shè)置分隔符
  });

  new Vue({
    el: '#app'
  });
</script>

</body>
</html>

可以渲染，但是比較麻煩，單獨(dú)傳值

在這里插入圖片描述

法三(推薦，簡(jiǎn)單)

模板字面量，使用vue變量的地方帶上\轉(zhuǎn)義，無(wú)需修改其它

<!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: ['${', '}'] // 設(shè)置分隔符
  });

  // 定義組件 ComponentTwo
  Vue.component('component-two', {
    mixins: [myMixin],
    template: sharedTemplate, // 使用相同的分隔符
    delimiters: ['${', '}'] // 設(shè)置分隔符
  });

  new Vue({
    el: '#app'
  });
</script>

</body>
</html>

如下

在這里插入圖片描述