この記事は最終更新日から2年以上経過しています。
Vue.jsのデリミタ(delimiters)を変更する方法
公開日：
更新日：
最近はCMSとVue.jsを併用する機会も増えてきたと思います。 そのまま使おうとするとCMS側の変数を展開する記法とVue.js側の記法が被ってしまします。 その場合、Vue.js側の記法を変更することが出来ますので変更してみたいと思います。
では早速公式サイトのマニュアルを見てみたいと思います。
公式サイトを見てみると例はこちらとなっていますね。
new Vue({
delimiters: ['${', '}']
})CMSと併用することを考えると{}自体を避けた方が良いのかな？
と思いますのでこちらの方が良いかもしれません。
delimiters: ['[[', ']]']
delimiters: ['<%', '%>']といった形で任意の形式に変更することが可能です。
最近の作業ではa-blog cms、craft CMSで被っており変更した印象があります。 Vue.jsを使う事でCMSの表現出来る幅も広がると思いますので積極的に取り入れて行きたいですね。
関連記事
この記事のハッシュタグ #JavaScript から関連する記事を表示しています。
JavaScript入門
こんにちは。タムショーです。 JavaScriptを学ぶ場合ですが、マニュアルを読むというところで言うと mozillaからMDN Web Docsというものがあります。 JavaScript 大量のページを読み解くのは大変ですのでまずは このあたりに目を通して気になったら別のページも読み進めると良さそうです。 JavaScript 「再」入門 アロー関数 let const スプレッド構文 分割代入 オブジェクト初期化子 async function
スタッフブログ
CSS、JSをコンソールログから 動的に追加する
こんにちは。ましじめの田村です。 ホームページのチェック作業をしている時にサーバーに入れないが確認のためCSSや簡単なJavaScriptを読み込ませたい場合がありました。 CSSのデバッグツールやコンソールに直接入力して確認するのも良いのですが、ファイルとして管理したい場合もあると思います。 その場合ローカルサイトを準備して次のようにコンソールログから読み込ませると良さそうです。 //script testScript = document.createElement('script'); testScript.src = 'https://localhost/test.js'; document.getElementsByTagName('head')[0].appendChild(testScript); //css testLink = document.createElement('link')); testLink.href = 'http://localhost/test.css'; testLink.rel = 'stylesheet'; testLink.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(testLink) 使用イメージ例 ●コンソールから入力 ●タグが追加される 以上「CSS、JSをコンソールログから動的に追加する」でした。 確認作業でCSS、JSを追加したい場合に参考にしてみください。
スタッフブログ
