12-components-example-01

Using Components Example 1

Here, we are trying to convert a Bootstrap's Card component into a full-fledged Vue component with behavior.

So, instead of doing this:

<div class="card">
  <h3 class="card-header">Featured</h3>
  <div class="card-block">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  </div>
</div>

We are simply doing

<bootstrap-card
	header="Featured" 
	title="Special title treatment" 
	text="With supporting text below as a natural lead-in to additional content.">
</bootstrap-card>

using the bootstrap-card Vue component.