Vue Component Blog Post Example

by jing coco

HTML

<script src="https://unpkg.com/vue"></script>

<div id="dynamic-component-demo" class="demo">
  <button
    v-for="tab in tabs"
    v-bind:key="tab"
    v-bind:class="['tab-button', { active: currentTab === tab }]"
    v-on:click="currentTab = tab"
  >{{ tab }}</button>

  <component
    v-bind:is="currentTabComponent"
    class="tab"
  ></component>
  <tab-home  currenttab="123"   ></tab-home>
     <blog-post v-bind:post="posts"
                v-on:enlarge-text="postFontSize +=$event "
        ></blog-post>

</div>

CSS

.tab-button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}
.tab-button:hover {
  background: #e0e0e0;
}
.tab-button.active {
  background: #e0e0e0;
}
.tab {
  border: 1px solid #ccc;
  padding: 10px;
}

JavaScript

Vue.component('tab-home', { 
	template: `<div>Home component{{currenttab}}</div>` ,
   props:['currenttab' ]
})
Vue.component('tabPosts', { 
	template: '<div>Posts component</div>' 
})
Vue.component('tab-archive', { 
	template: '<div>Archive component</div>' 
})

   Vue.component('blog-post', {
        props: ['post'],
        template: `
<div class="blog-post">
  <h3>{{ post.title }}</h3>
    <button v-on:click="$emit('enlarge-text',0.1)">
    Enlarge text
  </button>
  <div v-html="post.content"></div>
</div>
`
    })
new Vue({
  el: '#dynamic-component-demo',
  data: {
    currentTab: 'Home',
    tabs: ['Home', 'Posts', 'Archive'],
      posts:{
                    title: 'fdf',
                    content: 'contentss.'
                }
  },
  computed: {
    currentTabComponent: function () {
      return 'tab-home'
    }
  }
})