如何渲染Vue的主應用程序到body元素？

我正在使用稱爲「頁面」的付費主題的項目中構建管理頁面。如何渲染Vue的主應用程序到body元素？

問題是，在這些主題中，<nav>和<header>必須是<body>的直接子女。

當我使用Vue引導應用程序時，我將其渲染爲<div>，其中id設置爲root。然後將該容器內的<nav>和<header>嵌套（即在<div id="root">下）。

我一直在尋找如何讓Vue組件成爲身體直接的孩子的高低。

如何做到這一點？

什麼我得到：

<body> 
    <div> 
     <nav></nav> 
     <header></header> 
    </div> 
</body>

什麼主題需要：

<body> 
    <nav></nav> 
    <header></header> 
</body>

來源

2017-03-13 James Lewis

是您的主題使用子選擇？（例如'body> div'）。 Vue不喜歡你安裝到車身標籤。 –

使用Vue 2.0，您無法將根實例掛載到body或html元素。您會收到[Vue warn]: Do not mount Vue to <html> or <body> - mount to normal elements instead.錯誤消息。

提供的元素僅用作安裝點。與Vue 1.x不同的是，在所有情況下，掛載的元素將被替換爲Vue生成的DOM。因此不建議將根實例安裝到<html>或<body>。

https://vuejs.org/v2/api/#el

周圍的方式是手動移動元素成分mount()事件。

<div id="app"> 
    <navbar :msg="msg"></navbar> 

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 

    <button @click="msg = 'tested'">Test 2-way binding</button> 
</div>

工作流程示例：

從`body`

new Vue({ 
    el: '#app', 
    data: { 
    msg: 'message' 
    }, 
    components: { 
    'navbar': { 
     template: `<navbar>{{ msg }}</navbar>`, 
     props: ['msg'], 
     mounted() { 
     document.body.insertBefore(this.$el, document.body.firstChild) 
     } 
    } 
    } 
})

https://jsfiddle.net/jedrzejchalubek/m9dnsjjr/2/

來源

2017-03-14 00:16:17 jedrzejchalubek

剛剛宣告根渲染鉤在body水平，如：

<body id="root"></body>

＆hellip;假設你之前有這樣的東西：

<body> 
    <div id="root"></div> 
</body>

來源

2017-03-13 16:35:51

我確實嘗試過，但Vue不允許我直接渲染身體。 –

如何渲染Vue的主應用程序到body元素？

回答

相關問題