diff --git a/hello2.html b/hello2.html new file mode 100644 index 0000000..fc093ca --- /dev/null +++ b/hello2.html @@ -0,0 +1,31 @@ +<html> + <head> + <title>コンポーネント</title> + <script src="https://cdn.jsdelivr.net/npm/vue"></script> + <script> + window.onload = function(){ + Vue.component('hoge', { + template:'<div>{{name}}: {{msg}}</div>', + props: ['msg'], + data: function(){// コンポーネントのdataは関数でなければダメ + return { + name: 'Taro' + } + } + }); + + var app = new Vue({ + el: '#app' + }); + } + </script> + </head> + <body> + <h1>サンプル</h1> + <div id="app"> + <hoge msg="hello"></hoge> + <hoge msg="hogehoge"></hoge> + <hoge msg="fuga"></hoge> + </div> + </body> +</html>