Twig模板引擎与Vue.js冲突导致显示空白的解决方法

当在以twig为模板引擎的网站管理系统中使用Vue时，会出现冲突导致显示空白，Vue.js无法正常使用，主要原因是由于两者的语法上有导致误解析的相同分隔符——{{}}。

vue

受影响的系统包括：October (CMS)、Drupal8、Grav (CMS)等以twig为模板引擎的网站管理系统

例如下面的模板片断：
<pre>
<div class="container">
Label Value: <label>{{ foo }}</label>

Field Value: <input v-model="foo">
</div>
</pre>

解决办法一如下

Vue支持修改分隔符，修改默认的Vue分隔符即可，语法如下：

Vue.config.delimiters = ['${', '}$'];

把上面这句插到初始化Vue的代码之前，修改之后就可以在模板中使用这种方式来执行Vue代码了：

<pre>

<div class="container">
Label Value: <label>${ foo }$</label>

Field Value: <input v-model="foo">
</div>

</pre>

完工，当然，你也可以用类似Vue.config.delimiters = ['<%', '%>']这种分隔符来表示。

解决方法二：

这次我们从October cms下手，October支持“不解析”标签，在不解析标签里面的内容会作为文本对待而不做任何解析，语法如下：
<pre>
{% verbatim %}
{{ foo }}
{% endverbatim %}
</pre>
例如：
<pre>
{% verbatim %}
<div>Hello {{ name }}, this is parsed by AngularJS</div>
{% endverbatim %}
</pre>

附：

引用一：http://vuejs.org/api/#delimiters
引用二：http://octobercms.com/docs/markup/tag-verbatim

Tag：Drupal8, GravCms, OctoberCms, twig, Vue
发布时间：2015年08月09日
博客被黑，挪窝简书安家……