Liquid 模板与 Vue 语法冲突的解决方案

默认情况下， 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 的变量
... 超多行的文本 ...