完成イメージ
ソースコード
ドットインストールを参考にしてます。
https://dotinstall.com/lessons/basic_vuejs_v2
※プレミアム会員のみ閲覧可能
↓細かい説明はコメントアウトでまとめてます↓
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>My Sample Vue App2</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="app">
<p>Total Likes {{total}}</p>
<!-- messageでcomponentにカスタム属性として値を渡す -->
<like-component message="Like" @increment="incrementTotal"></like-component>
<like-component message="Awesome" @increment="incrementTotal"></like-component>
<like-component message="Great" @increment="incrementTotal"></like-component>
<like-component @increment="incrementTotal"></like-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./js/main.js"></script>
</body>
</html>
main.js
//プロパティの設定には、;はつけない
(function(){
'use strict';
// コンポーネント(component)は名前付きの再利用可能なVueインスタンス
// 独自のタグを書くことができる
//extendで囲って、中身の定義をtemplateで書く。
//templateに書ける要素は１つのみ。複数書きたい場合は<div>とはで親要素を作ってあげる。
let likeComponent = Vue.extend({
//""の中は''でないとエラーになる
template: "<button @click='countUp'>{{message}}{{count}}</button>",
//配列でキーを受け取りますとしている。
// props: ["message"],
//propsにデフォルト値や型を指定するには、オブジェクトとして書く必要あり。
props: {
message:{
type: String,
default: "Like"
}
},
// dataをコンポーネント定義の中で使用する場合は、Functionタイプのみ受け付ける
data: function(){
//設定したプロパティをreturnする時は{}で囲む必要あり。
return{
count: 0
}
},
methods: {
countUp: function(){
//プロパティはthisで取得できる
this.count++;
//componentから親要素に対してincrementというカスタムイベントを発火させるには$emitを使う。
//view側で@increment="incrementTotal"を仕込む。
//親要素にデータを渡したい時は、このようにする。
//イベントの発火のみcomponent側でやり、data,methods設定は親要素で行う。
this.$emit("increment");
}
}
})
const vm = new Vue({
el: "#app",
// componentsの登録。#appに対して、このcomponentを使うよ、と宣言。
components: {
//like-component(タグで使う)の中身はlikeComponentというオブジェクトとする
// 末に;つけるとエラーになる。
"like-component": likeComponent
},
data: {
total: 0
},
methods: {
incrementTotal: function(){
this.total++;
}
}
})
})()