Vuejs为模板添加多行？

Question

我想知道在构建Vuejs模板时如何最好地排列新行。我所拥有的代码不起作用，因为它破坏了JavaScript容器。 Vue.js希望我将整个html放在一行中，这在我计划添加页脚内容时有点不切实际。

Vue.component('footer-component', {
    template: "
      <div id='footer'>
        Footer Stuff
      </div>"
})

new Vue({
    el: 'footer'
})

我一直试图找到使用Vue进行HTML模板化的示例，但我找不到它们。使用React时，我能够通过多行编写HTML代码。我怎么能为Vuejs做同样的事？

Answer 1

您可以使用模板文字来围绕模板字符串。这将允许您在模板属性中编写多行HTML。

您可以在Template literals上的Mozilla Javascript参考中阅读更多内容。

Vue.component('footer-component', {
    template: `
      <div id='footer'>
        Footer Stuff
      </div>`
})

new Vue({
    el: 'footer'
})

我也希望你想在你的Vue对象中引用元素'footer'，也许你应该尝试引用另一个元素。在这种情况下，您希望成为页脚组件之父的元素。

Answer 2

这是一篇有趣的文章，描述了几种定义vue组件模板的方法：

7 Ways To Define A Component Template in Vue.js

它包括上面提到的使用模板文字的方法，但列出了处理多线模板的其他选项，如x-templates，内联模板，单个文件组件，甚至JSX。

我不是所说文章的作者（它是Anthony Gore），而是vue的新手，也有关于多行模板的相同问题。