Vue.js component作成方法

【ルール】

componentは　Vue の宣言前に書く（複数のVue宣言がある場合、使用できるのはcomponetを作成した記述以下で記載されたVue宣言の場所で使用可能）

component以下で記述のVueではどこでも使用可能

html上にて作成した名前のタグで呼び出す

呼び出す際はVueの宣言のある場所でないと使用できない

コード

Vue.component('list',{//第一引数がコンポーネント名（この名前で呼び出す）
data(){//第二引数にコンポーネントの内容を記述する
return {
items:[
 {id:1, name:'taro' },
 {id:2, name:'ziro' },
 {id:3, name:'sabu' },
 {id:4, name:'yon' },
 {id:5, name:'goro' },
 ]
 }
 },
template:`
 <ul>
 <li v-for='item in items' :key='item.id'>
 {{item.name}}
 </li>
 </ul>
 `
})

全体

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Vueの練習</h1>
<div id="app">
<h2>{{message}}</h2>
<list></list>

<list></list>

</div>
<list></list>

<div id="app2">
<list></list>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>

Vue.component('list',{//第一引数がコンポーネント名（この名前で呼び出す）
data(){//第二引数にコンポーネントの内容を記述する
return {
items:[
 {id:1, name:'taro' },
 {id:2, name:'ziro' },
 {id:3, name:'sabu' },
 {id:4, name:'yon' },
 {id:5, name:'goro' },
 ]
 }
 },
template:`
 <ul>
 <li v-for='item in items' :key='item.id'>
 {{item.name}}
 </li>
 </ul>
 `
})


new Vue({
el:'#app',
data:{
message:'コンポーネントの練習'
 }
})




new Vue({
el:'#app2',
data:{
message:'コンポーネントの練習'
 }
})

 
</script>
</body>
</html>

出力結果

f:id:kirikko_Scondcube:20200730213100p:plain — 出力結果

コンポーネンツが3つ表示された。

ここで表示されているのは

appで呼び出したもの2つ

app2で呼び出したもの１つ

appとapp2の間に記述した<list></list>はVue宣言外のため出力がない点覚えておく