Question

使用Vue.js组件，一个简单的示例无法按预期方式呈现。这是HTML文件（为简便起见，我省略了html，head和body标签，这是允许的-我已经使用它们和DOCTYPE来运行它）。另外，我正在通过一个简单的Web服务器运行它：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<template id="hello">
    <h1>Hello</h1>
    <h1>There</h1>
</template>

<div id="app">
    <hello></hello>
</div>

<script>
    Vue.component('hello', {
        template: '#hello'
        });

    new Vue({
        el: '#app',
        });
</script>

但是，仅呈现单词“ Hello”，而不呈现单词“ There”。似乎Vue或Chrome都期望<template>块仅包含一个元素。如果我将2个<h1>元素包装在<div>中，则两个单词都将呈现。我将仔细检查该规范，但是描述<template>标签的此网页提供了一个示例，其中包含2个顶级元素：

https://www.html5rocks.com/en/tutorials/webcomponents/template/

我正在使用Chrome 69.0.3497.100和Vue 2.0.3。 Web服务器是一个非常基本的koa-static服务器，它仅提供静态页面。

使用Vue组件无法正确呈现HTML模板的内容

0 个答案: