JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<script src="https://unpkg.com/vue@next"></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: 1rem;
}
.wrap {
  overflow: hidden;
  margin-bottom: 1rem;

  > div {
    display: block;
    float: left;
    height: 10rem;
  }
}

.demo {
  width: 35%;
}

.inspector {
  font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
  width: 90%;
  max-width: 400px;
  overflow-y: scroll;
  border: 1px solid #ccc;
}

.inspector-msg {
  padding-left: 1rem;
  font-size: 1rem;
  line-height: 2.5;
  border-bottom: 1px solid #ececec;

  &.highlight{
    background-color: lightcyan;
  }
}

button {
  margin-right: 1rem;
  margin-bottom: 1rem;
}

JavaScript

const vm = Vue.createApp({
  data() {
    return {
      msg: [],
      isActive: false
    }
  },
  methods: {
    toggle() {
      if (!this.isActive) {
        this.empty();
      }
      this.isActive = !this.isActive;
    },
    empty() {
      this.msg = [];
    },
    pushMsg(msg) {
      this.msg.push({
        isHighlight: (msg.includes('===')),
        msg: msg
      });

      this.$nextTick(() => {
        const inspector = document.querySelector('.inspector');
        inspector.scrollTop = inspector.scrollHeight;
      });
    },
  }
});



vm.component('demo-app', {
  template: `<div>
    <h3>{{ msg }}</h3>
    <input v-model="msg">
  </div>`,
  data() {
    return {
      msg: 'Hello Vue.js!'
    }
  },
  beforeCreate() {
    this.$emit('update', '=== beforeCreate! === ');
    this.$emit('update', `this.msg: ${this.msg}`);
    this.$emit('update', `this.$el: ${this.$el}`);
  },
  created() {
    this.$emit('update', '=== created! === ');
    this.$emit('update', `this.msg: ${this.msg}`);
    this.$emit('update', `this.$el: ${this.$el}`);
  },
  beforeMount() {
    this.$emit('update', '=== beforeMount! === ');
    this.$emit('update', `this.msg: ${this.msg}`);
    this.$emit('update', `this.$el: ${this.$el}`);
  },
  mounted() {
    this.$emit('update', '=== mounted! === ');
    this.$emit('update', `this.msg: ${this.msg}`);
    this.$emit('update', `this.$el: ${this.$el}`);
  },
  beforeUpdate() {
    this.$emit('update', '=== beforeUpdate! === ');
    this.$emit('update', `msg in view: ${this.$el.querySelector('h3').innerText}`);
    this.$emit('update', `this.msg: ${this.msg}`);
  },
  updated() {
    this.$emit('update', '=== updated! === ');
    this.$emit('update', `msg in view: ${this.$el.querySelector('h3').innerText}`);
    this.$emit('update', `this.msg: ${this.msg}`);
  },
  beforeUnmount() {
    this.$emit('update', `=== beforeUnmount! === `);
  },
  unmounted() {
    this.$emit('update', `=== unmount! === `);
  }
});

vm.mount('#app');