Vue.JSのチュートリアルでComponentなど

Vueの初心者向けチュートリアルを実施中。JavaScriptのフレームワーク（？でいいの？）のVueはとっつきやすいという感じがしていて、本を購入しなくともオンラインのチュートリアルなどでそれなりに使えそうな気持ちになります。

マスターできた、という訳ではないところが注意。
ComponentでTemplateとMethodsを利用して割と簡単にボタンを押して、コンテンツの表示・非表示ができました。

Vue.component('message', {
 props: [
 'title',
 'body'
 ],

 data() {
 return {
 isVisible: true
 }
 },
 template: `
 <article class="message" v-show="isVisible">
 <div class="message-header">
 {{ title }}
 <button @click="hideModal">X</button>
 </div>

 <div class="message-body">
 {{ body }}
 </div>
 </article>
 `,
 methods: {
 hideModal() {
 this.isVisible = !this.isVisible;
 }
 },
});
new Vue({
 el: "#root"
});

HTML部分は

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css">
</head>
<body>
<div id="root" class="container">
<message title="hello World" body="Loren ipsum dolor sit amet..."></message>

<message title="hello VUE" body="This is Body of message template!"></message>

</div>
<script src="https://unpkg.com/vue@2.6.8/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>