Go模板后端渲染時vue單頁面沖突
更新時間：2024年01月11日 11:47:42 作者：cf313995
go后端模版語法是通過 {{}} ,vue也是通過雙花括號來渲染的,如果使用go渲染vue的html頁面的時候就會報錯,本文主要介紹了Go模板后端渲染時vue單頁面沖突,感興趣的可以了解一下
go后端模版語法是通過 {{}} ，vue也是通過雙花括號來渲染的，如果使用go渲染vue的html頁面的時候就會報錯，因?yàn)榉謩e不出來哪個是vue的，哪個是go的，既可以修改go的模板語法
template.New("output").Delims("{%", "%}")
也可以修改vue的
new Vue({
delimiters: ['${', '}'],
el: '#vue-app',
})
但是由于我在golang的編輯器中，在html文件類型改為go模板時，不想看到語法報錯，所以就修改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)，無法渲染，控制臺報錯
怎么回事，語法也沒錯，分隔符設(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語言實(shí)現(xiàn)開發(fā)一個簡單的gRPC Demo
這篇文章主要為大家詳細(xì)介紹了如何利用Go語言實(shí)現(xiàn)開發(fā)一個簡單的gRPC Demo，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起了解一下2023-07-07
GORM是Go語言中最受歡迎的ORM庫之一，它提供了強(qiáng)大的功能和簡潔的?API，讓數(shù)據(jù)庫操作變得更加簡單和易維護(hù)，本文將詳細(xì)介紹GORM的常見用法，包括數(shù)據(jù)庫連接、模型定義、CRUD、事務(wù)管理等方面，幫助大家快速上手使用GORM進(jìn)行Web后端開發(fā)2023-06-06
Go的并發(fā)機(jī)制通過協(xié)程和通道的簡單性和高效性，使得編寫并發(fā)代碼變得相對容易，這種并發(fā)模型被廣泛用于構(gòu)建高性能的網(wǎng)絡(luò)服務(wù)、并行處理任務(wù)和其他需要有效利用多核處理器的應(yīng)用程序，這篇文章主要介紹了在Go中如何實(shí)現(xiàn)并發(fā),需要的朋友可以參考下2023-09-09
在Go語言中,條件語句的使用方式相對簡潔明了,所以本文將探討一下如何在Go程序中有效地進(jìn)行條件判斷和邏輯控制,感興趣的小伙伴可以了解下2023-08-08
這篇文章主要為大家介紹了golang?開啟opencv圖形化編程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要為大家介紹了GO 反射對性能的影響分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
Go語言實(shí)現(xiàn)優(yōu)雅關(guān)機(jī)和重啟的示例詳解
在Go語言中,實(shí)現(xiàn)優(yōu)雅關(guān)機(jī)和重啟通常涉及到處理系統(tǒng)信號,并確保在關(guān)閉前完成所有必要的清理工作,下面我們就來看看如何使用http.Server和os/signal包來實(shí)現(xiàn)優(yōu)雅關(guān)機(jī)和重啟吧2025-05-05
這篇文章主要介紹了Go語言底層原理互斥鎖的實(shí)現(xiàn)原理，Go?sync包提供了兩種鎖類型，分別是互斥鎖sync.Mutex和讀寫互斥鎖sync.RWMutex，都屬于悲觀鎖，更多相關(guān)內(nèi)容需要的朋友可以查看下面文章內(nèi)容2022-08-08
go-cqhttp權(quán)限管理系統(tǒng)的實(shí)現(xiàn)代碼
這篇文章主要介紹了go-cqhttp權(quán)限管理,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
本文主要介紹了GO語言中回調(diào)函數(shù)的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03