「コンポーネント」とは？
【Vue.js】でよく見かける「コンポーネント」についての練習。
「コンポーネント」とは、
「部品ごとにテンプレートとJavaScriptをセットにして、独立管理できる」もの（らしい）。
コーディングしていると、
「JavaScriptは[.js]ファイルに」
「CSSは[.css]ファイルに」
と分散させて管理しますね。
「正直めんどくさい」
「１つのファイルで管理したいけど、ファイルにスクリプトタグ入れるわけにいかんし」
という「何とかなりそうだけれども、解決方法ｼﾗﾈ」関連のお悩みの解決方法は【Vue.js】が持っていたという認識です。
よくわからんのでとりあえず触ってみます。
【サンプル】
「コンポーネント定義」と表示されれば成功。
HTML部分
<!doctype html>
<html lang="ja" class="no-js">
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
</body>
</html>
JavaScript部分
<script>
var myComponent = {
template: '<p>コンポーネント定義</p>'
}
var app = new Vue({
el: '#app',
components: {
'my-component': myComponent
}
})
</script>
コンポーネント表示の仕組みについて
①HTML部分にコンポーネントの建設予定地を決める。
<div id="app">
<my-component></my-component>
</div>
毎度お決まりの<div>タグ内にコンポーネント用のタグを書き込みます。
<my-component>のインスタンスは自分で定義しただけなので、お好きなインスタンス名を設定可能です。
②JavaScriptでテンプレートを宣言
var myComponent = {
template: '<p>コンポーネント定義</p>'
}
テンプレート用の変数を宣言して「template:」オプションに入れたいHTMLを入力します。
ここのところjQueryぽいですね。
いちおう今回はこれで完了です。
【v-if】や【v-show】で表示/非表示を切り替える運用が容易に想像できますね。
