Konflikt um Template of Twig und Vue.js
Ich mache ein Programm mit Slim 2, das Twig als Template-Engine verwendet. Es verwendet also die Syntax {{ foo }} in der PHP-Datei. Auf der anderen Seite verwende ich vue.js, es verwendet auch {{ bar }}.
Z.B.
Ich mache die bidirektionale Bindung. Unten ist mein HTML-Code.
<div class="container">
Label Value: <label>{{ foo }}</label><br>
Field Value: <input v-model="foo">
</div>
und hier ist mein vue js code.
new Vue({
el: '.container',
data: {
foo: 'Hello world.'
}
});
Die Hello-Welt sollte also im Label-Wert sein.
Die Ausgabe ist das Bild unten.
Was es nicht funktionierte, dachte das System wahrscheinlich, es sei eine Zweigvariable. Also habe ich geprüft, indem ich die Variable in einer Ansicht übergeben habe.
$app->get('/', function() use ($app) {
$app->render('login.php', [
'foo' => 'FROM PHP FILE'
]);
})->name('login');
Also habe ich den Label-Wert überprüft: Zeigt die Variable an, die ich aus der Datei PHP nicht im VUE-Code übergeben habe.
Etwas schwer zu erklären, aber Sie verstehen den Punkt. Ich habe mich gefragt, wie man die Vorlage von twig umgehen und den {{ }} auch von vue verwenden kann.
In diesem Fall können Sie entweder den vue.js-Tag-Marker ändern (falls vorhanden) oder den twig verbatim-Tag (meiner Meinung nach viel besser) verwenden, der einen Abschnitt als Rohtext kennzeichnet, der nicht vom Twig-Parser ausgewertet werden sollte. das heißt:
{% verbatim %}
new Vue({
el: '.container',
data: {
foo: 'Hello world.'
}
});
{% endverbatim %}
Aus den Zweigdokumenten:
Das wörtliche Tag markiert Abschnitte als Rohtext, der nicht .__ sein sollte. analysiert. Wenn Sie beispielsweise die Twig-Syntax in eine Vorlage einfügen möchten, geben Sie kann dieses Snippet verwenden:
Ich habe in einer anderen ähnlichen Frage gelesen:
{{"{{vue.js variable here}}"}}
um es kürzer zu machen. Es funktioniert in einigen Fällen für mich. Aber ich dachte, du würdest es trotzdem gerne sehen ...
Ich habe es noch nicht geschafft, dass es in allen Bereichen meines Codes funktioniert.
Für Vue JS 2 (nicht sicher über 1). Sie können verwenden:
<span v-text="msg"></span>
<!-- same as -->
<span>{{msg}}</span>
Laut Dokumentation: https://vuejs.org/v2/api/#v-text
Nur ein Heads-Up. On Vue JS 2. Um dies zu tun, fügen Sie ein Objekt zu Vue hinzu.
new Vue({
el: '#app',
delimiters: ['${', '}'],
}
Anstatt Trennzeichen zu ändern, Komponenten weniger wiederverwendbar zu machen oder weniger lesbare doppelte Escape-Mechanismen zu verwenden, können Sie die Funktion source von Twig verwenden.
Die Quellfunktion gibt den Inhalt einer Vorlage zurück, ohne ihn zu rendern:
{{ source('template.html') }} {{ source(some_var) }}
Beispiel:
<!-- 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>
Dies ist getestet und funktioniert - vue js vars in twig template:
new Vue({
el: '#app',
delimiter: ['{}'], // any delimiter you would like
})
Für diejenigen, die das Trennzeichen von vue nicht ändern möchten, können Sie das Trennzeichen von Twig ändern (in diesem Beispiel mit Silex PHP Framework):
$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
Ich verwende VueJs v2 mit der folgenden Syntax:
<img id="bookCover" style="border:none;width:200px" :src="book.cover">
Dabei ist book.cover eines der Felder myVueInstance. $ Data.book.
Die beste Lösung ist, beide Begrenzer nicht zu ändern.
Sie können das vuejs-Markup wie ein Zweig verwenden
{{mytwigvar}} {{'{{}} myvuevar {{'}} '}
Dies ist offensichtlich ärgerlich. Definieren Sie Ihren Twig Loader neu, um Dateien vorzuverarbeiten und {{{{{{}} und}}} durch {{'}}'} zu ersetzen. Dann können Sie das Markup schreiben
{{mytwigvar}} {{{myvuevar}}}
Viel schöner.