Javascript Twig 和 Vue.js 的模板冲突
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31480612/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Conflict on Template of Twig and Vue.js
提问by Wesley Brian Lachenal
I'm doing a program using Slim 2 that uses Twig as my templating engine. so It uses the syntax {{ foo }}in php file. On the other hand, I'm using vue.js, it also uses {{ bar }}.
我正在做一个使用 Slim 2 的程序，它使用 Twig 作为我的模板引擎。所以它使用{{ foo }}php文件中的语法。另一方面，我使用的是 vue.js，它也使用{{ bar }}.
E.g.
例如
I'm gonna do the two way binding, below is my html code.
我要做双向绑定，下面是我的 html 代码。
<div class="container">
Label Value: <label>{{ foo }}</label><br>
Field Value: <input v-model="foo">
</div>
and here is my vue js code.
这是我的 vue js 代码。
new Vue({
el: '.container',
data: {
foo: 'Hello world.'
}
});
So the Hello world should be in the Label Value.
所以Hello world应该在标签值中。
The output is the image below.
输出是下图。
Which it did not worked, probably the system thought it's a twig variable. So I checked by passing variable in a view.
它不起作用，可能系统认为它是一个树枝变量。所以我通过在视图中传递变量来检查。
$app->get('/', function() use ($app) {
$app->render('login.php', [
'foo' => 'FROM PHP FILE'
]);
})->name('login');
So I checked, the Label Value: shows the variable that I passed from the PHP file not on the VUE code.
所以我检查了，标签值：显示了我从 PHP 文件传递的变量，而不是 VUE 代码。
Kind of hard to explain but you get the point. Was wondering how to bypass twig's template and use the {{ }}from vue also.
有点难以解释，但你明白了。想知道如何绕过 twig 的模板并使用{{ }}from vue。
回答by Yauheni Prakopchyk
回答by felipsmartins
In this case you can either change vue.js tag marker (if any) or use twig verbatim tag (much better in my opinion) which mark a section as raw text which shouldn't be evaluated by twig parser. i.e:
在这种情况下，您可以更改 vue.js 标记标记（如果有）或使用 twig 逐字标记（在我看来更好），它将一个部分标记为不应由 twig 解析器评估的原始文本。IE：
{% verbatim %}
new Vue({
el: '.container',
data: {
foo: 'Hello world.'
}
});
{% endverbatim %}
From the twig docs:
从树枝文档：
The verbatim tag marks sections as being raw text that should not be parsed. For example to put Twig syntax as example into a template you can use this snippet:
逐字标记将部分标记为不应解析的原始文本。例如，将 Twig 语法作为示例放入模板中，您可以使用以下代码段：
回答by TDawg
I read in another similar question to do:
我在另一个类似的问题中读到：
{{"{{vue.js variable here}}"}}
to make it shorter. It works in SOME cases for me. But, thought you might like to see it anyway...
使其更短。它在某些情况下对我有用。但是，我想你可能会喜欢看它……
I didn't yet succeed to get it to work in all areas of my code.
我还没有成功地让它在我的代码的所有领域工作。
回答by James Burke
For Vue JS 2 (not sure about 1). You can use:
对于 Vue JS 2（不确定 1）。您可以使用：
<span v-text="msg"></span>
<!-- same as -->
<span>{{msg}}</span>
As per documentation: https://vuejs.org/v2/api/#v-text
回答by Wesley Brian Lachenal
Just a heads up. On Vue JS 2. The way of doing this is add an object to Vue.
只是抬头。在 Vue JS 2 上。这样做的方法是向 Vue 添加一个对象。
new Vue({
el: '#app',
delimiters: ['${', '}'],
}
回答by naitsirch
Instead of changing delimiters, making components less reusable or using less readable double escaping mechanisms, you can use Twig's sourcefunction.
您可以使用 Twig 的source函数，而不是更改分隔符、降低组件的可重用性或使用可读性较差的双重转义机制。
The source function returns the content of a template without rendering it:
{{ source('template.html') }} {{ source(some_var) }}
source 函数返回模板的内容而不渲染它：
{{ source('template.html') }} {{ source(some_var) }}
Example:
例子：
<!-- 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>
回答by kiba
Also, for those who don't want to change vue's delimiter, you can change Twig delimiter (using Silex php framework in this example):
另外，对于那些不想更改 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
https://twig.symfony.com/doc/2.x/recipes.html#customizing-the-syntax
回答by matthew roxburgh
The best solution is not to change either ones delimiter.
最好的解决方案是不要更改任何一个分隔符。
You can use the vuejs markup in twig like so
您可以像这样在树枝中使用 vuejs 标记
{{ mytwigvar }} {{ '{{' }} myvuevar {{ '}}' }}
This obviously is suboptimal, so redefine your twig loader to preprocess files and replace {{{with {{ '{{' }}and }}}with {{ '}}' }}then you can write the markup as
这显然是次优的，所以重新定义你的树枝加载器来预处理文件并替换{{{为{{ '{{' }}和}}}，{{ '}}' }}然后你可以将标记编写为
{{ mytwigvar }} {{{ myvuevar }}}
Much nicer.
好多了。
回答by Denise Ignatova
This is tested and working - vue js vars in twig template:
这是经过测试和工作的 - 树枝模板中的 vue js vars：
new Vue({
el: '#app',
delimiter: ['{}'], // any delimiter you would like
})
回答by Miguel Pragier
I'm using VueJs v2, with the syntax bellow:
我正在使用 VueJs v2，语法如下：
<img id="bookCover" style="border:none;width:200px" :src="book.cover">
Where book.cover is one of the myVueInstance.$data.book fields.
其中 book.cover 是 myVueInstance.$data.book 字段之一。
