[Vuejs]-I have some question about Vue component structure

by

0👍

✅

You can use component.
reference: https://v2.vuejs.org/v2/guide/components.html

let comp_a=Vue.component('comp-a', {
  data: function () {
    return {
      message: ""
    }
  },
  template: ` <div><input type="text" v-model="message"/>
            {{message}}</div>`
});
let app = new Vue({
    el:"#app"

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <comp-a></comp-a>
</div>

If you want to component’s html code in html area. template can point to by id. you can do following:

let comp_a=Vue.component('comp-a', {
  data: function () {
    return {
      message: ""
    }
  },
  template: "#comp-a"
});

let app = new Vue({
    el:"#app"

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <comp-a></comp-a>
</div>

<template id="comp-a">
<div>
  <input type="text" v-model="message"/>
            {{message}}
 </div>
</template>

0👍

VueJS does not work this way. You don’t nest IDs. You could do this:

 <html>
 <head>
     <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
 </head>
 <body>
    <div id="app">

    </div>

    <div id="comp-a">
        {{message}}
    </div>
</body>
<script>
  new Vue({
    el : "#app"
  })
  new Vue({
    el : "#comp-a",
    data : {
        message : "message"
    }
  })
</script>

But even that approach has problems. You really should have only one matching VueJS area.

The only reason to have two is if you really have two applications running on the same html file. I have never seen a reason to do that.

Leave a comment