経緯
- webページの中の1ページだけVue.jsで書きたい
- cdnのvueを使ってhtmlにインラインでvueを書くことにする
- 1ページなんだけどコード量はまあまあ多くなりそうなので、パーツをコンポーネント化して別ファイルに書きたい
→やり方がわからなかったので実験した
環境
Mac OS BigSur v11.4
Vue.js 2系
php 7.3.24(テンプレートエンジンとして使用)
作るもの
vueの公式にあるカウンターボタンを子コンポーネントとして別ファイルで作る
https://jp.vuejs.org/v2/guide/components.html
やり方①jsファイルに書く
- 子jsファイルでvueコンポーネントを定義し、templateのDOMは文字列(下記
counterButton.jsのtemplate)に実装する。 - 親htmlから子jsファイルをscriptタグで読み込む
counterButton.js
const template = `
<div>
<button v-on:click="count++">You clicked me {{ count }} times.</button>
</div>
`;
Vue.component('counter-button', {
template,
data: function () {
return {
count: 0,
};
},
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue-cdn</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="./js/counterButton.js"></script>
</head>
<body>
<div id="app">
<counter-button></counter-button>
</div>
<script>
new Vue({
el: '#app',
});
</script>
</body>
</html>
メリット
- jsファイルなのでvueのコードは書きやすい(自動フォーマットとか設定してればちゃんと動く)
デメリット
- DOMは文字列で書く必要があるため、可読性が低い
- バッククオートで囲めば改行もできるが、ハイライトとかされないのでやっぱり可読性は低い
やり方②テンプレートエンジンのhtmlに書く
- 今回はテンプレートエンジンとしてphpを使用(macでデフォルトのphpがサクッと使えたので)
- 子phpファイルにて、コンポーネントをscriptタグ内で定義し、templateのDOMは
x-templateを使用して実装する。 - 親phpから子phpファイルをincludeする
counter-button.php
<script type="text/x-template" id="counterButton">
<div>
<button v-on:click="count++">You clicked me {{ count }} times.</button>
</div>
</script>
<script>
Vue.component('counter-button', {
template: '#counterButton',
data: function () {
return {
count: 0,
};
},
});
</script>
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue-inline</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span>{{ message }}</span>
<counter-button></counter-button>
</div>
<?php include('./components/counterButton.php'); ?>
<script>
new Vue({
el: '#app',
});
</script>
</body>
</html>
メリット
- DOMもvueもscriptタグ内に書くので、わりと綺麗に書ける(自動フォーマットとかハイライトとか設定してればちゃんと動く)
デメリット
- 最終的にブラウザにレンダリングされるDOMが、body内にscriptタグが乱立してたりしてちょっと見苦しい(動作に問題はない。たぶん。)
個人的には
②のテンプレートエンジンで外部化する方がいいと思う。
①のように文字列でDOMを書くのはかなりきつい。
もうちょっと複雑なhtml属性やらvueの制御を書くことになった時にしんどくなると思う。
②は単一ファイルコンポーネントで書くときとほぼ同じ感じで書けるので、個人的には抵抗なく実装が進められそう。
今回はたまたまphpでやってるが、Thymeleafとかその他テンプレートエンジンでもincludeさえできれば問題なく動くはず。