「コンポーネント」：構成部品をどんなページにも簡単に組み込める部品（コンポーネント化）にして、独立したコンポーネントに分け、再利用しやすくすること。| "Component": To make a component into a component (componentization) that can be easily incorporated into any page, divide it into independent components, and make it easy to reuse.

　　　

コンポーネントの定義方法 | How to define a component

書式：Vue.component('コンポーネントの名前',｛コンポーネントのオプション})
| Format: Vue.component ('component name', {component options})

コンポーネントを定義する| Define a component ：
Vue.component('show-hello',{template:'<ｐ>Hello Vue!</ｐ>'});

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

　　　　

<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オプションの注意点 | Precautions for template option

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

The template specified in the template option must be enclosed in a single tag.

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

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

誤った記述ではnameしか反映されないが、正しい記述ではnameとpriceが反映される。| Incorrect description reflects only name, but correct description reflects name and 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'
});

やっぱりプロの人から直接学びたいという方はこちら。| Click here if you want to learn directly from professionals

ぺージの先頭に戻る(Return to top of page)

プライバシーポリシー