Twig和Vue.js的模板冲突

我正在使用Slim 2做一个程序，该程序使用Twig作为模板引擎。所以它使用{{ foo }}php文件中的语法。另一方面，我正在使用vue.js，它也使用{{ bar }}。

例如

我将进行双向绑定，以下是我的html代码。

<div class="container">
    Label Value: <label>{{ foo }}</label><br>
    Field Value: <input v-model="foo">
</div>

这是我的Vue js代码。

new Vue({

    el: '.container',
    data: {
        foo: 'Hello world.'
    }
});

因此，Hello world应该在Label Value中。

输出是下面的图像。

在此处输入图片说明

它不起作用，可能系统认为这是一个树枝变量。所以我通过在视图中传递变量来检查。

$app->get('/', function() use ($app) {
    $app->render('login.php', [
        'foo' => 'FROM PHP FILE'
    ]);
})->name('login');

因此，我检查了Label Value：显示了我从PHP文件传递的变量，而不是显示在VUE代码上。

有点难以解释，但您明白了。想知道如何绕过树枝的模板并也使用{{ }}from vue。

在此处输入图片说明