ワクグミのブログ

blog

title

Vue.jsのデリミタ(delimiters)を変更する方法

2019年02月18日
タムショー


最近はCMSとVue.jsを併用する機会も増えてきたと思います。
そのまま使おうとするとCMS側の変数を展開する記法とVue.js側の記法が被ってしまします。
その場合、Vue.js側の記法を変更することが出来ますので変更してみたいと思います。

では早速公式サイトのマニュアルを見てみたいと思います。

API — Vue.js(delimiters)

公式サイトを見てみると例はこちらとなっていますね。

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

CMSと併用することを考えると{}自体を避けた方が良いのかな?
と思いますのでこちらの方が良いかもしれません。

delimiters: ['[[', ']]']

delimiters: ['<%', '%>']

といった形で任意の形式に変更することが可能です。

最近の作業ではa-blog cms、craft CMSで被っており変更した印象があります。
Vue.jsを使う事でCMSの表現出来る幅も広がると思いますので積極的に取り入れて行きたいですね。


自社のホームページで
お困りではありませんか?

ビジネスの成果につなげる
ウェブ制作会社をお探しの方
お気軽にご相談下さい。

御社のホームページ制作に関するご相談はお電話、または
お問い合わせ専用フォームからご連絡下さい。

電話受付時間は平日10:00〜17:00迄

HTMLコーディングや
CMS構築業務の
外注業者をお探しの
システム会社・制作会社様へ

弊社では請負業務として対応をさせていただいております。
ご相談はお問い合わせ専用フォームからご連絡下さい。