f:id:karoten512:20180510000333p:plain

いきさつ

職場でVueを使うので勉強する必要がある。

とりあえず

vue-cliを使っても良いが、

きちんと理解したいので生で書くことにした。

ルートコンポーネント

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue TEST</title>
</head>
<body>

<div id="app">
  <my-component></my-component>
</div>

<script src="./vue.js"></script>
<script src="./app.js"></script>
</body>
</html>

ここでいうid="app"のdivで囲まれている部分がVueで管理される範囲。

今回はmy-componentタグで囲まれている部分をComponentとして、

Vueで管理してみる。

テンプレート情報だけをもつコンポーネントを作ってみる

// app.js
// コンポーネントの定義            
var mycomponent = {                
  template: '<div>hello</div>'     
};

// コンポーネントの登録
Vue.component('my-component', mycomponent);

// 今後生成されるすべてのvueインスタンスで使えるようになる
var app = new Vue({
  el: '#app'
});

component自体はタダのオブジェクト。

templateというkeyにcomponentのhtml構造をもたせることができる。

そして、

Vue.component('my-component', mycomponent);

でVue（のコンストラクタ）にcomponentを登録する。

この宣言をしておくと、

今後生成されるすべてのVueインスタンス内において、

mycomponentが使えるようになる。

まとめ

すごい単純。

メリットはhtml構造が使い回せるくらい。

Componentが増えたり処理が増えたりすると、Componentを単一ファイルで管理する

「単一ファイルコンポーネント」ということになってくる。