bachhm-dev

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
    {{ new Date() | formatUnix}}
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

bachhm-dev

<template>
  <form>
    <div>
      <label for="name">Name</label>
      <input type="text" :value="name" @input="updateName($event.target.value)" />
    </div>
    <div>
      <label for="email">Email</label>
      <input type="email" :value="email" @input="updateEmail($event.target.value)" />
    </div>

bachhm-dev

<template>
  <div id="app">
    <InviteForm v-model:name="inviteName" v-model:email="inviteEmail" />
    <div>
      <div>{{ inviteName }}</div>
      <div>{{ inviteEmail }}</div>
    </div>
  </div>
</template>

bachhm-dev

<input 
  :value="property"
  @input="property = $event.target.value"
/>

bachhm-dev

<template>
  <div>
    <h1>{{ msg }}</h1>
    <button @click="count++">count is: {{ count }}</button>
    <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
  </div>
</template>

bachhm-dev

<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>

bachhm-dev

const app = createApp(App)
// This configuration effect only 1 instance
app.mixin(/* ... */)
app.mount('#app')

bachhm-dev

// this mixin affects both below instances
Vue.mixin({ /* ... */ })

const app1 = new Vue({ el: '#app-1' })
const app2 = new Vue({ el: '#app-2' })

bachhm-dev

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

bachhm-dev

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')