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.

您可以在Mozilla的关于模板文字的Javascript参考中阅读更多相关内容.

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

new Vue({
    el: 'footer'
})

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

Answer 2

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

在Vue.js中定义组件模板的7种方法

它包括上述使用模板文字的方法，但还列出了处理多行模板的其他选项，例如x模板，内联模板，单个文件组件，甚至是JSX。

我不是上述文章的作者（我是Anthony Gore），而是刚接触Vue的人，对多行模板也有同样的疑问。