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

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

vuejs2 vue.js

extraxt · 技术社区 · 6 年前

这一次,我正在构建一个小项目,并将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 回复 | 直到 6 年前

Daniel 6 年前

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

推荐文章

4r60_ · 如何停止VueJS上的间隔?[副本]

2 年前

Park · Vuejs道具,路径较长

2 年前

Mathijs · vue-chartjs4中的混合气泡图和折线图

2 年前

roev · 大堆来自(物体)。forEach不使用vue。js

3 年前

haferje · Vue。用于计算属性重新渲染的js加载指示器

6 年前

Ready Dev · Axios一次发出多个请求(vue.js)

6 年前

JeanValjean · 如何在Vue中使用事件总线通过自定义事件传递数据。js 2

6 年前

dede.brahma · VueJs-元素UI el select:如何获取值父级和子级

6 年前

tzortzik · 如何使用vue路由器将对象作为道具传递?

6 年前

Tim · VueJS-迭代从AJAX调用返回的数据

6 年前