vue.js - 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 对象中引用元素“页脚”，也许您应该尝试引用另一个元素。在这种情况下，您希望该元素成为页脚组件的父元素。