簡単なVue.jsの始めかたと概要です。プレイスホルダーイメージのコンポーネントを作ってみます。

Vue.js とは

Vue.jsは柔軟で、気軽に使えるフレームワークです。Webcomponetsの実装や複雑なアプリケーションの構築でない場合だったら、CDNでサクッと読み込んで使ってもいいですし、実際の構築ではWebpackなどででビルドして使っていくことが多いです。

Vue.jsはコンポーネント構築のためのフレームワークで、できることはReactとよく似ていますが、より気軽に導入できるのがVue.jsだと考えられます。

Vue.js を始める

レポジトリからダウンロード(npm/yarn)するか、CDNで読み込んでもいいでしょう。

• vue

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>

コンテナをつくる

Vue.jsで構築したい領域をHTMLに用意します。

<div id="app"></div>

ルートコンポーネントの作成

ルートコンポーネントを作成します。new Vue()でインスタンスを生成して、生成したインスタンスはコンテナにマウントします。

let root = new Vue({

  template: '<div>Vue, Vue!</div>',

});

root.$mount('#app');

子コンポーネントの作成

ルートコンポーネントの中に、子コンポーネントを展開します。ルートコンポーネントは、インスタンスを作成しましたが、子供はクラス用意するため、newは必要ありません。

クラスを作るにはVue.extend関数を使います。クラスを作成し、親のcomponetsにセット、templateに独自タグで呼び出すようにしてみます。

let placeholdImage = Vue.extend({

  template:
  `<img src="https://source.unsplash.com/random/1600x900" alt="">`

});

let root = new Vue({

  template:
  `<div>
      <placehold-image></placehold-image>
   </div>`,

  components: {
    placeholdImage: placeholdImage
  }

});

root.$mount( '#app' );

注意点として、独自タグではハイフン区切りで記述して、クラスはキャメルケースで記述します。独自タグを定義しているので、<placehold-image>の記述だけで、何度も子
コンポーネントを呼び出すことができます。

属性を受け渡す

親コンポーネントから子コンポーネントに属性を受け渡せるようにして、呼び出し時にモデファイできるようにします。この受け渡す構造をバインド、と呼びます。

子が属性を受け取るためには、props を定義し独自属性を作り、元の属性名に:を付与します。

let placeholdImage = Vue.extend({
  template:
  `<img :width="mywidth" src="https://source.unsplash.com/random/1600x900" alt="">`,
  props: {
    mywidth: {
      type: Number,
      default: 1600
    }
  }
});

呼び出し元の独自タグでは、独自属性に値を渡します。

let root = new Vue({

  template:
  `<div>
      <placehold-image :mywidth="500"></placehold-image>
      <placehold-image></placehold-image>
   </div>`,

  components: {
    placeholdImage: placeholdImage
  }

});

root.$mount( '#app' );

これでサイズを呼び出し元で変更できるプレイスホルダーイメージのコンポーネントが作れました。

おわります。