Vue JS Components and Syntax – Create Components on Vue.js

How to create reusable Components in Vue.Js. A Short snippet and code sample. Get Started Quickly with Vue.JS

Tweet
Share
Share
Pin

A little syntax about Vue.JS and components. Define a Component and reuse it on your projects!

<abraham-card title="Test Card for Abraham" body="Some quick example text to build on the card title and make up the bulk of the card's content." button="Hide Card"></abraham-card>
Vue.component('abraham-card',{
  props: ['title', 'body', 'button'],
  template:`<div class="card" v-show="isVisible">
            <img src="https://via.placeholder.com/500x500" class="card-img-top" alt="">
            <div class="card-body">
              <h5 class="card-title">{{title}}</h5>
              <p class="card-text">{{ body }}</p>
              <a href="#" @click="hideCard" class="btn btn-primary">{{ button }}</a>
            </div>
          </div>`,
  data(){
    return {
      isVisible: true
    }
  },
  methods:{
    hideCard(){
      this.isVisible = false;
    }
  }
});


new Vue({
  el: '#root'
})