Vue.js_뷰 인스턴스

뷰 인스턴스

<div id="app1">
  {{instance}}<br>
  <button @click="instanceToggle">app1's button</button>
</div>

<div id="app2">
  {{instance}}<br>
  <button @click="instanceToggle">app2's button</button>
</div>

<script>
const app1 = new Vue({
  el: '#app1',
  data: {
    instance: 'app1'
  },
  methods: {
    instanceToggle(){
      app2.instance = 'clicked'
    }
  }
})
const app2 = new Vue({
  el: '#app2',
  data: {
    instance: 'app2'
  },
  methods: {
    instanceToggle(){
    app1.instance = 'clicked'
    }
  }
})
</script>

Vue함수로 새 인스턴스를 만들어준다.
app1, app2가 인스턴스다

app1 과 app2 둘다 버튼 클릭시 텍스트가 바인딩되는데, 서로 다른 인스턴스의 데이터로 바꾸려면 (instanceName.data)로 사용하면된다.

+추가
여러개의 인스턴스를 사용하는 경우는 거의 없다.
VueJs만의 스킬은 아니고 JavaScript의 프레임워크이기 때문에 원리나 구조상 사용이 가능한것뿐!