# 被挂载的应用不会替换元素
非兼容
# 概述
在 Vue 2.x 中,当挂载一个具有 template
的应用时,被渲染的内容会替换我们要挂载的目标元素。在 Vue 3.x 中,被渲染的应用会作为子元素插入,从而替换目标元素的 innerHTML
。
# 2.x 语法
在 Vue 2.x 中,我们传入一个 HTML 元素选择器到 new Vue()
或 $mount
:
new Vue({
el: '#app',
data() {
return {
message: 'Hello Vue!'
}
},
template: `
<div id="rendered">{{ message }}</div>
`
})
// 或
const app = new Vue({
data() {
return {
message: 'Hello Vue!'
}
},
template: `
<div id="rendered">{{ message }}</div>
`
})
app.$mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
当我们把应用挂载到拥有匹配被传入选择器 (在这个例子中是 id="app"
) 的 div
的页面时:
<body>
<div id="app">
Some app content
</div>
</body>
1
2
3
4
5
2
3
4
5
在渲染结果中,被提到的 div
将会被应用内容所替换:
<body>
<div id="rendered">Hello Vue!</div>
</body>
1
2
3
2
3
# 3.x 语法
在 Vue 3.x 中,当我们挂载一个应用时,其渲染内容会替换我们传递给 mount
的元素的 innerHTML
:
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue!'
}
},
template: `
<div id="rendered">{{ message }}</div>
`
})
app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
当这个应用挂载到拥有匹配 id="app"
的 div
的页面时,结果会是:
<body>
<div id="app" data-v-app="">
<div id="rendered">Hello Vue!</div>
</div>
</body>
1
2
3
4
5
2
3
4
5