Mounted application does not replace the element
breaking
Overview
In Vue 2.x, when mounting an application that has a
template
, the rendered content replaces the element we mount to. In Vue 3.x, the rendered application is appended as a child of such an element, replacing element's
innerHTML
.
2.x Syntax
In Vue 2.x, we pass an HTML element selector to
new Vue()
or
$mount
:
When we mount this application to the page that has a
div
with the passed selector (in our case, it's
id="app"
):
in the rendered result, the mentioned
div
will be replaced with the rendered application content:
3.x Syntax
In Vue 3.x, when we mount an application, its rendered content will replace the
innerHTML
of the element we pass to
mount
:
When this app is mounted to the page that has a
div
with
id="app"
, this will result in: