Vue-3 example (module)

by khrome

HTML

<div id="app">
</div>

<template id="appTemplate">
  <div>
    <my-input v-model="email"></my-input>
    <button @click="email = ''">&times;</button>
    <hr />
    <my-input v-model="password"></my-input>
    <button @click="password = ''">&times;</button>
    <hr />
    <div @click="log({email, password})">
      {{ email }} : {{ password }}
    </div>
  </div>
</template>

<template id="myInput">
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
</template>

<script type="module">
  import {ref, watch, computed, createApp} from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0-rc.5/vue.esm-browser.js';

const app = createApp({
  template: document.getElementById("appTemplate").innerHTML,
  setup() {
  	let email = ref('[email protected]')
    let password = ref('1234')
    let log = (val)=>console.log(val);
    
    return {email, password, log };
  }
});

app.component('my-input', {
  props: ['modelValue'],
  template: document.getElementById("myInput").innerHTML
});

app.mount('#app')
</script>