examples/opt_drill.html

The writing and effects shown below are the same as the official ones. <br>
以下展示的写法和效果于官方一致 <br>

<head>
  <title>Vueey | tem Drill</title>
  <link rel="stylesheet" href="https://unpkg.com/@tofukit/resetcss">
  <!-- 解开注释，查看官方效果 | uncomment to see the official effects -->
  <!-- <script src="https://unpkg.com/vue@2/dist/vue.min.js"></script> -->
  <script src="https://unpkg.com/vueey@latest"></script>
</head>

<body>
  <div id="app">
    <button @click="count--">dec</button>
    <input ref="input" :value="count" @input="count = $event.target.value">
    <button @click="count++">inc</button>
    <div ref="container"></div>
  </div>
</body>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      count: NaN,
    },
    methods: {
      init() {
        this.count = 0;
      },
      reached(val) {
        alert(`${val} is out of range!`);
        this.init();
      },
    },
    watch: {
      count(val, oldVal) {
        if (Number.isNaN(val)) {
          this.init();
          return;
        };
        if (val > 3 || val < 0) this.reached(val);
        this.$refs.container.innerHTML += `<p>${oldVal} --> ${val}</p>`;
      },
    },
    created() {
      console.log('(created:$refs) ' + this.$refs);
      console.log('(created:count) ' + this.count);
    },
    mounted() {
      this.init();
      this.$refs.input.focus();
      this.$refs.input.value = 1;
    },
    updated() {
      console.log('(updated:count) ' + this.count);
      const cont = this.$refs.container;
      while (cont.childElementCount > 3) {
        cont.removeChild(cont.firstChild);
      }
    }
  });
</script>