vue.jsでのてコンポーネントについて - Computer programming and health

Vue.jsにてコンポーネント(component)を学ぶ | This section describes the components in vue.js.

「コンポーネント」：構成部品をどんなページにも簡単に組み込める部品（コンポーネント化）にして、独立したコンポーネントに分け、再利用しやすくすること

コンポーネントの定義方法

書式：Vue.component(‘コンポーネントの名前’,｛コンポーネントのオプション})

コンポーネントを定義する

親コンポーネント内にコンポーネントを描画する

ここにコンポーネントが入ります。（見えませんが、<show-hello></show-hello>とコードを書いてます。）

<show-hello></show-hello>と記述した場所に、コンポーネントのtemplateオプションの内容が置き換わった。

HTML <div id=”app”>
<p>ここにコンポーネントが入ります。<br>↓（<show-hello></show-hello>とコードを書いてます。）</p>
<show-hello></show-hello>
</div>

CSS .yellow {
background: linear-gradient(transparent 65%, yellow 65%);
}

JavaScript Vue.component(‘show-hello’,{template:'<span class=”yellow”>Hello Vue! </span>’});
var app = new Vue({
el:’#app’,
});

templateオプションの注意点

templateオプションに指定するテンプレートは、必ず全体を単一のタグで囲まなければいけない。

誤り(Incorrect)　→　template:'<span>{{name}}</span>:<span>{{price}}円</span>’

正(correct)　→　template:'<div><span>{{name}}</span>:<span>{{price}}円</span></div>’

↓ここにコンポーネントが入ります。

誤った記述ではnameしか反映されないが、正しい記述ではnameとpriceが反映される。

HTML <div id=”app2″>
<p>↓ここにコンポーネントが入ります。</p>
<my-product></my-product>
</div>

CSS .red {
color: red;
}

JavaScript Vue.component(‘my-product’,{
template:'<div class=”red”><span>{{name}}</span>:<span>{{price}}円</span></div>’,
data: function(){
return {
name: ‘スマホケース’,
price: 980
}
}
});
var app2 = new Vue({
el:’#app2′
});

この本を参考に学び、完成させることができました。しかし、プログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^) 身に付けて消えないスキルがこの値段。買っておいてよかったです。

レベルアップにはプロから学ぶのも時には必要

キャリアアップに必要なスキルを取得しよう。

オンラインで受講ができるスクールですので、全国どこからでも。

就職・転職支援