<div id="app">
  <h2>直接顯示元件</h2>
  <primary-component :data="item"></primary-component>
  <h2>使用 is 顯示元件</h2>
  <div is="primary-component" :data=item></div>
</div>

<script type="text/x-template" id="primaryComponent">
  <div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
    <div class="card-header">{{ data.header }}</div>
    <div class="card-body">
      <h5 class="card-title">{{ data.title }}</h5>
      <p class="card-text">{{ data.text }}</p>
    </div>
  </div>
</script>
Vue.component("primary-component", {
  props: ["data"],
  template: "#primaryComponent",
});

var app = new Vue({
  el: "#app",
  data: {
    item: {
      header: "這裡是 header",
      title: "這裡是 title",
      text:
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim perferendis illo reprehenderit ex natus earum explicabo modi voluptas cupiditate aperiam, quasi quisquam mollitia velit ut odio vitae atque incidunt minus?"
    },
  }
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js