Learn WebAssembly

Component rendering

The contents of the template property, which dictates what to render, are shown as follows:

template: `  <div class="flex column">   <h1>SPACE WASM!</h1>    <canvas      ref="canvas"      :height="bounds.height"      :width="bounds.width">    </canvas>    <div class="flex controls">      <div>        <button class="defaultText" @click="onActionClick">          Pause        </button>      </div>    <div class="flex column">      <label class="defaultText" for="speed">Speed: {{speed}}</label>      <input        v-model="speed"        id="speed"        type="range"        min="1"        max="10"        step="1">    </div>  </div></div>

Since we're using Vue, we can bind the attributes and event handlers of HTML elements to properties and methods defined in our component. In addition to a PAUSE/RESUME button, there's a range <input> that ...