JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div id="app">
  <h3>修改內容來觀察 Vue 實體的生命週期</h3>
  <hr>

  <div class="wrap">
    <div class="demo">
      <demo-app v-if="isActive" @update="pushMsg" />
    </div>

    <div class="inspector">
      <div class="inspector-msg" v-for="(m, idx) in msg" :class="{ 'highlight' : m.isHighlight }" :key="m.msg + idx">{{ m.msg }}</div>
    </div>
  </div>

  <hr>
  <button @click="toggle">{{ (!isActive) ? 'Active' : 'Destroy' }} the Vue instance</button>
  <button @click="empty">Empty the inspector</button>
</div>

SCSS

#app {
  display: block;
  padding: 1rem;
  font-size: 1.2rem;
}

li {
  list-style-type: disc;
}

p {
  margin: 1rem 0;
}

input {
  font-size: 1.2rem;
  padding: 3px 5px;
}

button {
  margin-top: 1rem;
}

JavaScript

const vm = new Vue({
  data: () => {
    return {
      text: '08JS',
      items: ["Vue", "is", "Awesome"]
    }
  },
  methods: {
    changeVal() {
      this.$set(this.items, 0, this.text)
      alert(this.items);
    }
  }
}).$mount('#app');