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
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="http://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' })