Jam*_*wis 4 html javascript css vue.js
我正在使用名为"pages"的付费主题的项目中构建管理页面.
问题是,在这些主题,<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>
Jęd*_*bek 12
使用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>.
解决方法是在组件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>
示例工作流程
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/
小智 5
使用 Vue 3，您可以
let YourApp = {
data() {
return {
message: 'Hello World!'
}
},
template: `
<nav>Nav</nav>
<header>Header</header>
<span> inspect to see </span>
`
}
// Browser Version - vue.global.js
Vue.createApp(YourApp).mount('body')<script src="https://cdn.jsdelivr.net/npm/vue@3.0.2/dist/vue.global.min.js"></script>| 归档时间： |
|
| 查看次数： |
6075 次 |
| 最近记录： |