JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <h3>Root Instance</h3>

  <!-- 在根實體使用自訂元件 -->
  <child-comp></child-comp>
  <child-comp></child-comp>
</div>

SCSS

#app {
  display: block;
  padding: 1rem;
  font-size: 1rem;
  background-color: #eee;
}

.app-child {
  padding: 10px;
  background-color: #ccc;
  margin: 1rem 0;
}

JavaScript

const vm = Vue.createApp({
  data() {
    return {
      count: 0
    }
  }
});


// 子元件
vm.component('child-comp', {
	template: `
    <div class="app-child">
      <div>Hello Vue!</div>
    </div>`
});

vm.mount('#app');