Question

我尝试过以多种方式定义模板，但它们都会因不同的错误而失败。我在每个示例中使用了单个根<div>标记，因为控制台一直在建议。对于测试，它只是一个简单的：

<div>hello it's me</div>

这是我尝试过的：

脚本标记：组件模板需要根元素，而不仅仅是文本：hello it is me

<script type="text/x-template" id="my-template">
  <div>hello it's me</div>
</script>

模板标签无法找到元素：#my-template

<template id="my-template">
  <div>hello it's me</div>
</template>`

带有模板标签的脚本:(没有控制台错误，但不可见！）

<script type="text/x-template" id="my-template">
  <template>
    <div>hello it's me</div>
  </template>
</script>

带模板的脚本（ID'ed）标签：找不到模板：＃my-template

<script type="text/x-template">
<template id="my-template">
    <div>hello it's me</div>
</template>
</script>

使用DOM模板的正确方法是什么？此外，模板标记是否必须显示在DOM <head>，<body>的开头，<body>的结尾，或特别是其他地方？

谢谢！

Answer 1

嘿所以没有你所有的js代码，但vue应用程序有两个部分。

Vue实例，它安装在dom节点上。 id会在你的html
属于vue实例应用程序的组件

例如，假设你有一个index.html文件，你可以用这种方式挂载vue。

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<body>
  <div id='app'></div>
</body>
<script type="application/javascript">
  new Vue({
    el: '#app'
  })
</script>

这告诉vue创建一个实例并将其附加到你的dom。

第二部分是向vue添加组件。使用webpack可以更好地执行此操作，但您可以像这样手动执行此操作。

<script src="https://unpkg.com/vue/dist/vue.js"></script>

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

<script>
  foo = Vue.component('foo',{
    template: '<div>I am a real component!</div>'
  });

  new Vue({
    el: '#app',
    template: '<div><foo></foo></div>',
    components: [foo]
  })
</script>

使DOM模板在VueJS 2.0中运行的确切要求是什么？

1 个答案: