Vue Components

by suatatan

HTML

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div>VUE</div>
  <div id="blog-post-demo">
    <blog-post title="My journey with Vue"></blog-post>
    <blog-post title="Blogging with Vue"></blog-post>
    <blog-post title="Why Vue is so fun"></blog-post>
  </div>
  <script>
      //---Komponenti Tanımla--
      Vue.component('blog-post', {
        props: ['title'],
        template: '<h3 style="color:red">{{ title }}</h3>'
      })
      //-----Verilerini yolla----
      new Vue({
      el: '#blog-post-demo',

      data: {
        posts: [
          { id: 1, title: 'My journey with Vue' },
          { id: 2, title: 'Blogging with Vue' },
          { id: 3, title: 'Why Vue is so fun' }
        ]
      }
    })
  </script>
</body>
</html>