Javascript Vuejs如何在#应用程序之前用HTML声明组件

Javascript Vuejs如何在#应用程序之前用HTML声明组件,javascript,vue.js,vuejs2,vue-component,Javascript,Vue.js,Vuejs2,Vue Component,出于某种原因,我需要在div前面用html呈现一个组件,该组件的id为#app,Vue.js需要该应用程序才能运行 这可能吗?在安装的子组件中,您可以在#app之前插入元素 jsidle:您可以使用它来完成此操作。关于如何在Vue应用程序之外进行渲染,有以下几种方法: 在Vue应用程序之外进行渲染 PortalVue将在元素的位置动态装入的实例 使用`id=“widget”`,此段落将在其中呈现。 新的Vue({el:'#app'}) 这个元素不受我们的Vue应用程序控制,但我们可以在那

出于某种原因,我需要在div前面用html呈现一个组件,该组件的id为#app,Vue.js需要该应用程序才能运行


这可能吗?

在安装的子组件
中,您可以在#app之前插入元素

jsidle:

您可以使用它来完成此操作。关于如何在Vue应用程序之外进行渲染,有以下几种方法:

在Vue应用程序之外进行渲染



PortalVue将在元素的位置动态装入的实例
使用`id=“widget”`,此段落将在其中呈现。

新的Vue({el:'#app'}) 这个元素不受我们的Vue应用程序控制,但我们可以在那里动态创建一个元素。
为什么?你能不能不用CSS把它放在你想放的任何地方?你的观点很好,我考虑过了。只是有太多的工作要做,CSS不太适合我,所以我想问一下是否有一个简单的方法可以解决这个问题我不知道你为什么问这个。。但您可以在应用程序之前添加组件。例如,试着这样做。。。在安装的组件中
mounted(){let target=document.body;target.insertBefore(this.$el,target.firstChild)}
 mounted() {
    document.body.insertBefore(this.$el, document.body.firstChild)
  }
  <div id="app">
    <portal target-el="#widget">
      <p>
        PortalVue will dynamically mount an  instance of <portal-target> in place of the Element
        with `id="widget"`, and this paragraph will be rendered inside of it.
      </p>
    </portal>
  </div>
  <script>
    new Vue({el: '#app'})
  </script>
  <aside id="widget" class="widget-sidebar">
    This Element is not controlled by our Vue-App, but we can create a <portal-target> there dynamically.
  </aside>
</body>