Vue.js (1)

クラゲちゃんを鳴かせてしまえというサンプルを Vue.js で作る。
audio 要素とか全然覚えてない。autoplay が 1 回しか効かないようなので、URL 書き換えの直前で v-if で要素を消しておいて、非同期で URL の書き換えと要素の出現を実行させてみる。4 時間分くらいの勉強の集大成的に。
次は仮想 DOM いってみよ。リフローを最低限のコストで実行するために VNode 作っておいて DOM の差分を Javascript オブジェクトで計算しといてから DOM ツリー更新するって話だろう。きっと。DOM ツリーのレーベンシュタイン距離を最小にする・・・って話でもないのかな？分からんけど。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <audio :src="url" autoplay v-if="play"></audio>
  <button @click="btnClick">{{btnTitle}}</button>
</div>

new Vue({
  el: "#app",
  data: {
    btnTitle: "Ghast shoots",
    url: "",
    play: true
  },
  methods: {
    btnClick: function() {
      this.play = false
      thiz = this
      setTimeout(function() {
          thiz.url = "https://gamepedia.cursecdn.com/minecraft_gamepedia/a/a1/Ghast_charge.ogg"
          thiz.play = true
        }, 0)
    }
  }
})