欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Go模板后端渲染時vue單頁面沖突

 更新時間：2024年01月11日 11:47:42   作者：cf313995  
go后端模版語法是通過 {{}} ,vue也是通過雙花括號來渲染的,如果使用go渲染vue的html頁面的時候就會報(bào)錯,本文主要介紹了Go模板后端渲染時vue單頁面沖突,感興趣的可以了解一下

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

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

也可以修改vue的

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

但是由于我在golang的編輯器中，在html文件類型改為go模板時，不想看到語法報(bào)錯，所以就修改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)，但是每個組件的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!'
      }
    }
  }

  // 復(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)行后你會發(fā)現(xiàn)，無法渲染，控制臺報(bào)錯

在這里插入圖片描述

怎么回事，語法也沒錯，分隔符設(shè)置也沒問題，但提示沒有定義，猜測是`符號影響了(不確定，有懂的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!'
      }
    }
  }

  // 復(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>

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

在這里插入圖片描述

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

<body>

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

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

  // 生成帶有動態(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ú)傳值

在這里插入圖片描述

法三(推薦，簡單)

模板字面量，使用vue變量的地方帶上\轉(zhuǎ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 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>

如下

在這里插入圖片描述

然后在數(shù)據(jù)渲染時使用golang的模板語法替換數(shù)據(jù)進(jìn)行渲染即可

到此這篇關(guān)于Go模板后端渲染時vue單頁面沖突的文章就介紹到這了,更多相關(guān)Go vue 單頁面沖突內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • Go語言同步等待組sync.WaitGroup結(jié)構(gòu)體對象方法詳解

    Go語言同步等待組sync.WaitGroup結(jié)構(gòu)體對象方法詳解

    這篇文章主要為大家介紹了Go語言同步等待組sync.WaitGroup結(jié)構(gòu)體對象方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-08-08
  • Go語言學(xué)習(xí)之指針的用法詳解

    Go語言學(xué)習(xí)之指針的用法詳解

    這篇文章主要為大家詳細(xì)介紹了Go語言中指針的用法，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)Go語言有一定的幫助，需要的可以參考一下
    2022-04-04
  • 詳解Go語言如何利用高階函數(shù)寫出優(yōu)雅的代碼

    詳解Go語言如何利用高階函數(shù)寫出優(yōu)雅的代碼

    高階函數(shù)（Hiher-order?Function）定義為：滿足下列條件之一的函數(shù)：接收一個或多個函數(shù)作為參數(shù)；返回值是一個函數(shù)。本文為大家介紹了如何利用高階函數(shù)寫出優(yōu)雅的代碼，希望對大家有所幫助
    2023-01-01
  • golang生成vcf通訊錄格式文件詳情

    golang生成vcf通訊錄格式文件詳情

    這篇文章主要介紹了golang生成vcf通訊錄格式文件詳情，?VCF是通訊錄格式文件，一般需要用手機(jī)通訊錄導(dǎo)入導(dǎo)出的文件格式都是vcf格式。?下面詳細(xì)內(nèi)容介紹需要的小伙伴可以參考一下
    2022-03-03
  • Go語言學(xué)習(xí)教程之指針的示例詳解

    Go語言學(xué)習(xí)教程之指針的示例詳解

    這篇文章主要通過簡單的練習(xí)來讓大家對Go語言中的指針有所了解，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)Go語言有一定幫助，需要的可以參考一下
    2022-09-09
  • Go語言基礎(chǔ)枚舉的用法及示例詳解

    Go語言基礎(chǔ)枚舉的用法及示例詳解

    這篇文章主要為大家介紹了Go語言基礎(chǔ)枚舉的用法及示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2021-11-11
  • 詳解Golang中創(chuàng)建error的方式總結(jié)與應(yīng)用場景

    詳解Golang中創(chuàng)建error的方式總結(jié)與應(yīng)用場景

    Golang中創(chuàng)建error的方式包括errors.New、fmt.Errorf、自定義實(shí)現(xiàn)了error接口的類型等，本文主要為大家介紹了這些方式的具體應(yīng)用場景，需要的可以參考一下
    2023-07-07
  • Golang判斷兩個鏈表是否相交的方法詳解

    Golang判斷兩個鏈表是否相交的方法詳解

    這篇文章主要為大家詳細(xì)介紹了如何通過Golang判斷兩個鏈表是否相交，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2023-03-03
  • Bililive-go 實(shí)現(xiàn)直播自動監(jiān)控錄制功能

    Bililive-go 實(shí)現(xiàn)直播自動監(jiān)控錄制功能

    最近有直播錄制的需求,但是自己手動錄制太麻煩繁瑣,于是用了開源項(xiàng)目Bililive-go進(jìn)行全自動監(jiān)控錄制,對Bililive-go 直播自動監(jiān)控錄制實(shí)現(xiàn)思路感興趣的朋友,一起看看吧
    2024-03-03
  • PHP結(jié)構(gòu)型模式之組合模式

    PHP結(jié)構(gòu)型模式之組合模式

    這篇文章主要介紹了PHP組合模式Composite Pattern優(yōu)點(diǎn)與實(shí)現(xiàn)，組合模式是一種結(jié)構(gòu)型模式，它允許你將對象組合成樹形結(jié)構(gòu)來表示“部分-整體”的層次關(guān)系。組合能讓客戶端以一致的方式處理個別對象和對象組合
    2023-04-04

最新評論