我正在使用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世界应该在标签值中。
输出是下面的图像。
<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9KVWVNWC5wbmcifQ==” alt =“在此处输入图像描述”>
虽然它不起作用,但系统可能认为这是一个树枝变量。因此,我通过在视图中传递变量进行检查。
$app->get('/', function() use ($app) {
$app->render('login.php', [
'foo' => 'FROM PHP FILE'
]);
})->name('login');
因此,我检查了Label Value:显示了我从PHP文件传递的变量,而不是VUE代码。
有点难以解释,但您明白了。想知道如何绕过树枝的模板并使用vue中的{{ }}
。
<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS83aHRnVS5wbmcifQ==” alt =“在此处输入图像描述”>“ >>
我正在使用Slim 2编写程序,该程序使用Twig作为模板引擎。因此它在php文件中使用语法{{foo}}。另一方面,我正在使用vue.js,它也使用{{bar}}。例如。我要去做...
只需更改vue的默认分隔符。方法如下:
这已经过测试并且可以正常工作-树枝模板中的vue js vars:
在这种情况下,您可以更改vue.js标记标记(如果有的话),也可以使用twig逐字标记(我认为更好)将部分标记为原始文本,不应由twig解析器评估。即:
我读了另一个类似的问题要做:
对于Vue JS 2(不确定1)。您可以使用:
只是抬起头。在Vue JS 2上。执行此操作的方法是将一个对象添加到Vue。
此外,对于那些不想更改vue分隔符的人,您可以更改Twig分隔符(在此示例中使用Silex php框架:]]
$app->before(function() use ($app){
$app['twig']->setLexer( new Twig_Lexer($app['twig'], [
'tag_comment' => ['[#', '#]'],
'tag_block' => ['[%', '%]'],
'tag_variable' => ['[[', ']]'],
'interpolation' => ['#[', ']'],
]));
});
您可以使用Twig的source
函数,而不是更改分隔符,减少组件的可重用性或使用可读性较低的双重转义机制。
最佳解决方案是不要更改两个定界符。
我正在使用VueJs v2,语法如下: