How to instantiate Vue?

A

Alexey Povolnov2018-07-01 15:33:16

Vue.js

Alexey Povolnov, 2018-07-01 15:33:16

HTML

<body>

  <div id="app">
    <div>{{ message }}</div>
    <div id="children">{{ msg }}</div>
  </div>

</body>

vue

new Vue({
  el: '#app',
  data: {
    message: 'Hello!'
  }
});

new Vue({
  el: '#children',
  data: {
    msg: 'Hi!'
  }
});

The question itself.
The example above shows that in the HTML I have a PARENT - aka #app and a CHILD - aka #children.
How can I make separate instances of Vue for each element, or do I need to make each element its own instance, or do I need one instance of #app and something will happen next in it, I can’t understand, please explain.

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Alexey Shashenkov, 2018-07-01
@KNLNT

1 copy per 1 page.

new Vue({
  el: '#app',
  data: {
    message: 'Hello!',
    msg: 'Hi!'
  }
});

If you have a lot of different structures, solve in terms of components.
If you need to spread the state across different parts of the page, you can make many instances of Vue and connect via Vuex