createApp({}).mount('#app') 在 vue3 中清除 #app 的子元素

本文介绍了createApp({}).mount('#app') 在 vue3 中清除 #app 的子元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

所以我正在尝试将 Vue3 添加到现有的 asp.net 核心项目中.我希望发生的事情是让我的剃刀应用程序正常呈现，然后使用自定义 vue 组件为我的前端提供更具反应性的感觉.但是，当我将一个空的 vue 应用程序安装到我的包装器 div(所有其他正文内容的父级)时，它似乎删除了该包装器 div 的所有 innerHTML，完全删除了所有服务器呈现的正文内容.

在我的 _Layout.cshtml 文件中，我将所有内容包装在一个 ID 为app"的 div 中.

在 main.js 中

import { createApp } from 'vue'const vueApp = createApp({}).mount('#app');//下面的组件定义

使用这样设置的应用程序，当我运行我的 .net 项目时，我看到一个空白的白色浏览器窗口，而不是我期望的 razor 编译的 html.在 Vue2 中，可以这样做:

const vueApp = new Vue({el: '#app',数据: {....},方法: {....}//， 等等});

这将导致应用程序正常呈现，vue 应用程序绑定到 #app，使 vue 可用于子内容(模型绑定、vue 点击处理等).

我尝试在 mount() 上使用 isHydrate 可选参数，但它不会导致结果发生任何变化.

我在这里遗漏了什么吗?不清除内容就挂不了应用，如何慢慢迁移已有项目使用vue3?非常感谢任何指导.

谢谢

注意事项:

vue-next 运行时-dom source 如果这个方法是被调用的 mount 方法，我不确定为什么 container.innerHTML 不会在组件中设置.{} 不是函数，也没有为它定义渲染/模板.
vue-next 运行时-core apiCreateApp 源如果这是被调用的方法......我不知道.

解决方案

更新

Vue 3 没有模板渲染器，编译后将无法处理模板.为了解决这个问题，你可以导入 vue/dist/vue.esm-browser(和 vue.runtime.esm-browser.prod for prod)，而不是默认的 vue.这将允许运行时组件呈现.

So I'm trying to add Vue3 to an existing asp.net core project. What I'd like to happen is for my razor app to render as normal, then use custom vue components to give my frontend a more reactive feel. However, when I mount an empty vue app to my wrapper div (parent of all other body content), it seems to be deleting all innerHTML of that wrapper div, completely removing all server rendered body content.

In my _Layout.cshtml file, I'm wrapping all content in a div with id 'app'.

<body>
  <div id='app'>
    @RenderBody()
  </div>

  <script src="~/js/vue-app/dist/js/chunk-vendors.76316534.js"></script>
  <script src="~/js/vue-app/dist/js/app.bf4c5ba9.js"></script>
</body>

in main.js

import { createApp } from 'vue'

const vueApp = createApp({}).mount('#app');

// component definitions below

With the app set up like this, when I run my .net project I see a blank white browser window instead of the razor compiled html that I expect. In Vue2, it was possible to do this:

const vueApp = new Vue({
  el: '#app',
  data: {
    ....
  },
  methods: {
   ....
  }//, etc
});

Which would result in the app being rendered as normalthe vue app bound to #app, making vue available to the child content (model binding, vue click handling, etc).

I've tried playing around with the isHydrate optional parameter on mount(), but it causes no change in the result.

Am I missing something here? How do you slowly migrate an existing project to use vue3 if you can't mount the app without clearing content? Any guidance is much appreciated.

Thank you

Notes:

vue-next runtime-dom source If this method is the mount method getting called, I'm not sure why container.innerHTML would not be getting set in the component. {} is not a function, and render/template is not defined for it.
vue-next runtime-core apiCreateApp source If this is the method getting called....I have no idea.

解决方案

Update

Vue 3, without template renderer, will not be able to handle the templates after it has been compiled. To fix that, you can import vue/dist/vue.esm-browser (and vue.runtime.esm-browser.prod for prod), instead of the default vue. This will allow run-time component rendering.

这篇关于createApp({}).mount('#app') 在 vue3 中清除 #app 的子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！