自作アプリ作成記録16日目

早くVue.jsを駆使して自作アプリ作成に進みたいと思い、公式ドキュメントを読み進む。本日はコンポーネントに関する基礎を学ぶ。

コンポーネントとは

・ブラウザに表示する部品
・親コンポーネントはデータを持つ？(Reactと一緒？)
・HTMLには何を表示したいかだけ記載する
・jsファイルでコンポーネントのデータの操作をする

公式ドキュメントにある例を元に、自分なりに文章で説明してみる。

HTMLファイル
<div id="blog-post-demo">
           <blog-post
               v-for="post in posts"
               v-bind:key="post.id"
               v-bind:post="post"
           ></blog-post>
       </div>

   <script src="component.js"></script>

blog-postというのがコンポーネントで部品にあたる。
v-forだとかv-bindあたりはまだよくわかっていない・・・

JSファイル
Vue.component('blog-post', {
   props: ['post'],
   template: `
     <div class="blog-post">
       <h3>{{ post.title }}</h3>
       <div v-html="post.content"></div>
     </div>
   `
 })

new Vue({
   el: '#blog-post-demo',
   data: {
       posts:[
           {id: 1, title: 'Myjourney with Vue'},
           {id: 2, title: 'Blogging with Vue'},
           {id: 3, title: 'Why Vue is so fun'}
       ]
   }
})

JavaScriptファイルのVue.componentの部分がコンポーネントの定義。
blog-postという名前。第2引数にコンポーネントの中身？が載っている。
new Vueでインスタンス生成。要素名はblog-post-demoという名前のID。
dataはpostsの配列を持っている。

すごく大雑把だけど多分こんな認識だと思っている。v-forとかv-bindあたりがよくわからないので引き続きこの辺りを学ぶ。