Twig 和 Vue.js 的模板冲突答案

【问题标题】：Conflict on Template of Twig and Vue.jsTwig 和 Vue.js 的模板冲突
【发布时间】：2015-10-07 10:58:49
【问题描述】：

我正在使用 Slim 2 做一个程序，它使用 Twig 作为我的模板引擎。所以它在 php 文件中使用语法{{ foo }}。另一方面，我使用的是 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');

所以我检查了，标签值：显示了我从 PHP 文件而不是 VUE 代码上传递的变量。

有点难以解释，但你明白了。想知道如何绕过 twig 的模板并使用来自 vue 的 {{ }}。

【问题讨论】：

标签： javascript symfony twig vue.js

【解决方案1】：

只需更改 vue 的默认分隔符。方法如下：

Vue.js 1.0

全局定义分隔符 (docs)。

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

Vue.js 2.0

为组件定义分隔符 (docs)。

new Vue({
  delimiters: ['${', '}']
})

Vue.js 3.0

为应用程序定义分隔符 (docs)。

Vue.createApp({
  delimiters: ['${', '}']
})

【讨论】：

【解决方案2】：

在这种情况下，您可以更改 vue.js 标记标记（如果有）或使用 twig 逐字标记（在我看来要好得多），它将一个部分标记为不应由 twig 解析器评估的原始文本。即：

{% verbatim %}
    new Vue({

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

来自 twig 文档：

verbatim 标记将部分标记为不应包含的原始文本解析。例如，将 Twig 语法作为示例放入模板中可以用这个sn-p：

Verbatim tag

【讨论】：

哦！我也看到了，但没有费心尝试，而是尝试了自动转义，但没有奏效。哈哈哈。现在我尝试了它并且它起作用了，我将逐字语法放在我的 vue " {% verbatim %} {{ foo }} {% endverbatim %} 和它的工作原理之间！谢谢！:)

【解决方案3】：

我阅读了另一个类似的问题：

{{"{{vue.js variable here}}"}}

使其更短。它适用于我的某些情况。但是，我想你还是会喜欢看的……

我还没有成功地让它在我的代码的所有领域工作。

【讨论】：

你好，我会试试这个，如果可行，我会告诉你。 :)
以前来自 felipsmartins 的答案更好......它适用于所有情况。我发送的上述内容似乎用途有限......无论如何我的测试显示。
短变量的救星，最接近 laravel Blade 的 @{{ variable }} 转义。介意分享一下您的解决方案到底哪里不起作用？

【解决方案4】：

对于 Vue JS 2（不确定 1）。您可以使用：

<span v-text="msg"></span>
<!-- same as -->
<span>{{msg}}</span>

根据文档：https://vuejs.org/v2/api/#v-text

【讨论】：

【解决方案5】：

只是提个醒。在 Vue JS 2 上。这样做的方法是向 Vue 添加一个对象。

new Vue({
    el: '#app',
    delimiters: ['${', '}'],
}

【讨论】：

【解决方案6】：

您可以使用 Twig 的 source 函数，而不是更改分隔符、降低组件的可重用性或使用可读性较差的双重转义机制。

源函数返回模板的内容而不渲染它：
{{ source('template.html') }}
{{ source(some_var) }}

示例：

<!-- path/to/twig_template.html.twig -->
<script type="text/x-template" id="my-template">
    {{ source('path/to/vue-template.html') }}
</script>

<script>
    Vue.component('my-component', {
        template: '#my-template'
    });
</script>

【讨论】：

投反对票的原因是什么？请在投票时发表评论！
现在好多了。不知道为什么投反对票，但我只是弥补了这一点......

【解决方案7】：

另外，不想修改vue的分隔符的，可以修改Twig分隔符（本例使用Silex php框架）：

$app->before(function() use ($app){
    $app['twig']->setLexer( new Twig_Lexer($app['twig'], [
        'tag_comment'   => ['[#', '#]'],
        'tag_block'     => ['[%', '%]'],
        'tag_variable'  => ['[[', ']]'],
        'interpolation' => ['#[', ']'],
    ]));
});

https://twig.symfony.com/doc/2.x/recipes.html#customizing-the-syntax

【讨论】：

【解决方案8】：

最好的解决方案是不要更改任何一个分隔符。

你可以像这样在 twig 中使用 vuejs 标记

{{ mytwigvar }} {{ '{{' }} myvuevar {{ '}}' }}

这显然不是最理想的，所以重新定义你的树枝加载器来预处理文件并将{{{替换为{{ '{{' }}和}}}替换为{{ '}}' }}然后你可以将标记写为

{{ mytwigvar }} {{{ myvuevar }}}

好多了。

【讨论】：

'更好' -> 这是非常主观的。我不认为这更好，但显然你这样做了......不过，你把它放进去很好......

【解决方案9】：

这是经过测试和工作的 - 树枝模板中的 vue js vars：

    new Vue({
       el: '#app',
       delimiter: ['{}'], // any delimiter you would like
    })

【讨论】：

【解决方案10】：

我使用的是 VueJs v2，语法如下：

<img id="bookCover" style="border:none;width:200px" :src="book.cover">

其中 book.cover 是 myVueInstance.$data.book 字段之一。

Here's the docs

【讨论】：