これから始める Vue.js のはじめてのコンポーネント -『Vue.js』

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

Vue.js とは

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

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

Vue.js を始める

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


<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' );

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

おわります。

これから始める Vue.js のはじめてのコンポーネント -『Vue.js』のアイキャッチ画像

share

related