Question

自学Vue时，我遇到了一些问题。

首先，我用new Vue ({el:" # id "})绑定某些组件。

当我用<div id = "app">绑定根组件new Vue ({el:" # app "})时，

它毁了那里已经绑定的东西。

我在new Vue ({el:" # id "})中的功能和数据不再起作用。

我做错了设计吗？

如果是这样，我应该如何解决这个问题？

<html>
<head>
    <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div id="comp-a">
            <input type="text" v-model="message"/>
            {{message}}
        </div>
    </div>
</body>
<script>
    new Vue({
        el : "#comp-a",
        data : {
            message : "message"
        }
    })
    new Vue({
        el : "#app"
    })
</script>

Answer 1

VueJS无法以这种方式工作。您不嵌套ID。您可以这样做：

 <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>

但是即使那样，方法也有问题。您确实应该只有一个匹配的VueJS区域。

拥有两个应用程序的唯一原因是，如果您确实有两个应用程序在同一个html文件上运行。我从未见过这样做的理由。

Answer 2

您可以使用组件。参考：https://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>

如果要在html区域中编写组件的html代码。模板可以按ID指向。您可以执行以下操作：

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>

我对Vue组件结构有疑问

2 个答案: