代码之家 › 专栏 › 技术社区 › extraxt

当一个新的组件被插入时,其余的都会消失在应用程序中

vuejs2 vue.js

2

extraxt · 技术社区 · 7 年前

这一次,我正在构建一个小项目,并将Vue包含在脚本标记中。

但我不明白下面的行为。

// app.js

Vue.component('todo-item', {
  template: `<div>Todo Component!</div>`
})

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

HTML索引.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Title</title>
</head>
<body>

  <div id="app">

    {{ message }}

    <div>
      Just some content...
    </div>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="./js/app.js"></script>
</body>
</html>

结果是:

'<todo-item />'

<div id="app">

    {{ message }}

    <todo-item />

    <div>
      Just some content...
    </div>

  </div>

文字“只是一些内容…”消失了:

我做错什么了?

1 回复 | 直到 7 年前

1

6

Daniel 7 年前

TL;DR;

而不是 <todo-item/> 使用 <todo-item></todo-item>

未编译虚拟用户.js不支持自动关闭html标记。

请参见样式指南:

只有官方的无效元素。这就是为什么战略只是当Vues模板编译器可以在然后提供符合DOM规范的HTML。

https://vuejs.org/v2/style-guide/#Self-closing-components-strongly-recommended

以及github中的问题:

https://github.com/vuejs/vue/issues/1036
https://github.com/vuejs/vue/issues/8664