vue.jsのデリミタ(delimiter)を変更する方法 sampleとしてjinja2を使用

フロントエンドのフレームワークと既存のテンプレートエンジンのデリミタ(delimiter)って被ってしまった。。。

ちなみにデリミタ(delimiter)とは、"フィールド区切り文字"のことです。 具体的には railsのerbの<% hogehoge %>とか jinja2の{{ hogehoge }}とか bladeの{{ hogehoge }}とかです。

erbだと<% %>の中にrubyのコードが書けます。 これをデリミタといいます。

さて、 vue.jsのデリミタも実はjinja2やbladeと同じく{{ }}なんです。

ですので、jinja2とvue.jsをそのまま使用するとコンフリクトが生じてしまうのです。

そこで、解決策としてデリミタを変更するという方法があります。(ここからはjinja2をsampleに書きます。)

jinja2のデリミタかvueのデリミタどちらかを変更すればよいのです。

jinja2のデリミタを変更するのはフレームワークに依存してしまうケースがあるので、完結に変更するにはvue.jsがおすすめです。

下記コードは{{ }}から[[ ]]にデリミタを変更しています。

hoge.js

new Vue({
  el: '.js-component01',
  delimiters: ['[[', ']]'], //ここにデリミタの変更を記述
  data: {
    text: 'hogehoge'
  }
});

python側ではbottleを使用しています。

run.py

from bottle import route, run
from bottle import TEMPLATE_PATH, jinja2_template as template

@route('/top')
def main():
    return template('top', hoge = "pythonの結果")

run(host='localhost', port=8080, debug=True, reloader=True)

top.html

<div class="js-component01">
  <p>[[hoge]]</p>
</div>
<div>
  {{hoge}}
</div>

テンプレートでは同じ変数hogeでもvueで設定したものとpythonで設定したもので、異なる値が表示されるようになっています。

ちなみにデリミタを変更せずに行うと、python側が優先されます。