vue 獨立物件

by ysuper

HTML

<script src="https://unpkg.com/vue@next"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<div id="app">
  VM1: <input type="text" v-model="name">好棒棒
</div>

<div id="app2">
  VM2: <input type="text" v-model="name">好棒棒
</div>

<div id="app3">
  VM3: <input type="text" v-model="name">好棒棒
</div>

CSS

#app, #app2{
  position: relative;
  display: block;
  padding: 1rem;
  font-size: 1rem;
}

JavaScript

const dataObj = {
  name: '08JS'
};

const vm1 = Vue.createApp({
  data () {
    return dataObj
  },
}).mount('#app');

const vm2 = Vue.createApp({
  data () {
    return dataObj
  },
}).mount('#app2');

const vm3 = Vue.createApp({
  data () {
    return {...dataObj}
  },
}).mount('#app3');

vm1.$data.name = '阿不就';