# 要素を置換しないアプリケーションのマウント
breaking
# 概要
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