examples/tem_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" @updated="log('updated',count,name)">
    <!-- {{ }} -->
    <h1>hello {{ name }}</h1>
    <p>
      {{ count }} * 2 = {{ 
        count * 2
      }}
    </p>
    <!-- @event -->
    <button @click="inc">inc</button>
    <button @click="inc()">inc()</button>
    <button @click="count++">add</button>
    <button @click="count++;log('hi')">add and say hi</button>
    <!-- :attr and @event -->
    <br><br>
    <input :value="name" @input="ipt">
    <input :placeholder="getPh()" @change="
      const val = $event.target.value
      const cont = $refs.changeTo 
      cont.textContent = 'change to: ' + val
    ">
    <input :value="'Vue' + 'ey'" @keyup="$refs.showKey.value = $event.key">
    <!-- ref -->
    <input :ref="showKeyRefStr" type="button">
    <p ref="changeTo"></p>
  </div>
</body>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      name: 'Vueey',
      count: 0,
      showKeyRefStr: 'showKey',
      updatedEvent: new Event('updated')
    },
    methods: {
      inc() {
        this.count++;
      },
      ipt(evt) {
        this.name = evt.target.value;
      },
      log: console.log,
      getPh: () => 'change me'
    },
    updated() {
      this.$el.dispatchEvent(this.updatedEvent);
    }
  })
</script>