comp_basic2.html

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Component basic</title>
  </head>
  <body>
    <div id="components-demo">
     <blog-post
        v-for="post in posts"
        v-bind:key="post.id"
        v-bind:post="post"
        >
      </blog-post>
    </div>

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

var example = new Vue({
  el: '#components-demo',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue', content: 'content1' },
      { id: 2, title: 'Blogging with Vue', content: 'content2' },
      { id: 3, title: 'Why Vue is so fun', content: 'content3' }
    ]
  }
});
    </script>
  </body>
</html>