网站开发验收流程,肇庆市端州发布,建站小程序快速上线,用dede做网站后台go后端模版语法是通过 {{}} #xff0c;vue也是通过双花括号来渲染的#xff0c;如果使用go渲染vue的html页面的时候就会报错#xff0c;因为分别不出来哪个是vue的#xff0c;哪个是go的#xff0c;既可以修改go的模板语法
template.New(output).Delims(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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue.js Delimiters Example/titlescript srchttps://cdn.jsdelivr.net/npm/vue2/script
/head
bodydiv idappcomponent-one/component-onecomponent-two/component-two
/divscript// 定义 mixinvar myMixin {data: function () {return {message: Hello from mixin!}}}// 定义组件 ComponentOneVue.component(component-one, {mixins: [myMixin],data: function () {return {message: Hello from mixin1111!}},template: div${ message }/div,delimiters: [${, }] // 设置分隔符});// 定义组件 ComponentTwoVue.component(component-two, {mixins: [myMixin],template: div${ message }/div, // 使用相同的分隔符delimiters: [${, }] // 设置分隔符});new Vue({el: #app});
/script/body
/html这种已经可以实现但是每个组件的template可能是一样的并且也不是上面那种简单没有class等信息的所以需要抽离所以就变成了下面
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue.js Delimiters Example/titlescript srchttps://cdn.jsdelivr.net/npm/vue2/script
/head
bodydiv idappcomponent-one/component-onecomponent-two/component-two
/divscript// 定义 mixinvar myMixin {data: function () {return {message: Hello from mixin!}}}// 复杂的共享模板字符串var sharedTemplate div classmy-componentp${message}/p!-- Add your complex HTML structure and styles here --/div;// 定义组件 ComponentOneVue.component(component-one, {mixins: [myMixin],template: sharedTemplate,delimiters: [${, }] // 设置分隔符});// 定义组件 ComponentTwoVue.component(component-two, {mixins: [myMixin],template: sharedTemplate, // 使用相同的分隔符delimiters: [${, }] // 设置分隔符});new Vue({el: #app});
/script/body
/html
这种运行后你会发现无法渲染控制台报错 怎么回事语法也没错分隔符设置也没问题但提示没有定义猜测是符号影响了(不确定有懂的call我)
想要解决这个问题法一模板中替换
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue.js Delimiters Example/titlescript srchttps://cdn.jsdelivr.net/npm/vue2/script
/head
bodydiv idappcomponent-one/component-onecomponent-two/component-two
/divscript// 定义 mixinvar myMixin {data: function () {return {message: Hello from mixin!}}}// 复杂的共享模板字符串var sharedTemplate div classmy-componentp$MESSAGE$/p!-- Add your complex HTML structure and styles here --/div;// 定义组件 ComponentOneVue.component(component-one, {data: function () {return {message: Hello from mixin1111!}},mixins: [myMixin],template: sharedTemplate.replace($MESSAGE$, ${message}),delimiters: [${, }] // 设置分隔符});// 定义组件 ComponentTwoVue.component(component-two, {mixins: [myMixin],template: sharedTemplate.replace($MESSAGE$, ${message}), // 使用相同的分隔符delimiters: [${, }] // 设置分隔符});new Vue({el: #app});
/script/body
/html可以渲染但是麻烦传递几个变量就得替换几次 法二和法一类似在生成模板时处理
bodydiv idappcomponent-one/component-onecomponent-two/component-two
/divscript// 定义 mixinvar myMixin {data: function () {return {message: Hello from mixin!}}}// 生成带有动态值的模板字符串function generateTemplate(message) {return div classmy-componentp${message}/p!-- Add your complex HTML structure and styles here --/div;}// 定义组件 ComponentOneVue.component(component-one, {data: function () {return {message: Hello from mixin1111!}},mixins: [myMixin],template: generateTemplate(${message}),delimiters: [${, }] // 设置分隔符});// 定义组件 ComponentTwoVue.component(component-two, {mixins: [myMixin],template: generateTemplate(${message}), // 使用相同的分隔符delimiters: [${, }] // 设置分隔符});new Vue({el: #app});
/script/body
/html可以渲染但是比较麻烦单独传值
法三(推荐简单)模板字面量使用vue变量的地方带上\转义无需修改其它
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue.js Delimiters Example/titlescript srchttps://cdn.jsdelivr.net/npm/vue2/script
/head
bodydiv idappcomponent-one/component-onecomponent-two/component-two
/divscript// 定义 mixinvar myMixin {data: function () {return {message: Hello from m1!,msg: Hello from m2!}}}// 使用模板字面量定义模板字符串var sharedTemplate div classmy-componentp\${message}/pp\${msg}/p!-- Add your complex HTML structure and styles here --/div;// 定义组件 ComponentOneVue.component(component-one, {data: function () {return {message: Hello from mixin1111!,msg: Hello from mixin2222!}},mixins: [myMixin],template: sharedTemplate,delimiters: [${, }] // 设置分隔符});// 定义组件 ComponentTwoVue.component(component-two, {mixins: [myMixin],template: sharedTemplate, // 使用相同的分隔符delimiters: [${, }] // 设置分隔符});new Vue({el: #app});
/script/body
/html如下
然后在数据渲染时使用golang的模板语法替换数据进行渲染即可
