默认情况下, Liquid 模板和 Vue 均使用双大括号输出内容(“Mustache”语法)。这导致在渲染一个包含 Vue 模板的 Liquid 文件时会因语法冲突而出错。
一个可行的方案是在 Liquid 模板中使用 raw 标签:
<%raw%>
{{ 'this is a vue string' }}<!-- vue 模板语法 -->
<%endraw%>
raw 标签中的内容不会被 Liquid 模板引擎解析而是会被直接输出。这虽然解决了冲突的问题,但这要求我们必须要写这个 raw 标签,在模板文件过长时也会给开发过程造成困惑,无法区分某个变量到底是属于 Liquid 模板还是属于 Vue :
<%raw%>
... 超多行的文本 ...
{{ product.title }} //?这到底是 liquid 的变量还是 vue 的变量?
... 超多行的文本 ...
<%endraw%>
幸运的是 Vue 提供了更改”插值符号”的能力。简单来说,我们可以在 Vue 使用双中括号(即: “[[” 和 “]]”)来代替双大括号。在 Vue 2.0 时代,可以使用以下代码实现上述功能:
var vm = new Vue({
delimiters:['[[', ']]'],
el:'#box',
data:{
arr:['apple','pear','grape']
},
methods:{
add:function () {
this.arr.push('tomato')
}
}
})
使用示例如下:
... 超多行的文本 ...
{{ product.title }} //这是 Liqnuid 的变量
[[ product.title ]] //这是 Vue 的变量
... 超多行的文本 ...