diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index 9fc7d9ef..0bada200 100644 --- a/src/.vuepress/config.js +++ b/src/.vuepress/config.js @@ -194,19 +194,19 @@ const sidebar = { '/guide/migration/key-attribute', '/guide/migration/keycode-modifiers', '/guide/migration/listeners-removed', - // '/guide/migration/mount-changes', + '/guide/migration/mount-changes', // '/guide/migration/props-data', '/guide/migration/props-default-this', '/guide/migration/render-function-api', '/guide/migration/slots-unification', '/guide/migration/suspense', '/guide/migration/transition', - // '/guide/migration/transition-group', + '/guide/migration/transition-group', '/guide/migration/v-on-native-modifier-removed', '/guide/migration/v-model', '/guide/migration/v-if-v-for', '/guide/migration/v-bind', - // '/guide/migration/vnode-lifecycle-events', + '/guide/migration/vnode-lifecycle-events', '/guide/migration/watch' ] }, diff --git a/src/guide/migration/mount-changes.md b/src/guide/migration/mount-changes.md new file mode 100644 index 00000000..15c7bda6 --- /dev/null +++ b/src/guide/migration/mount-changes.md @@ -0,0 +1,94 @@ +--- +title: 'マウント API の変更' +badges: + - breaking +--- + +# 要素を置換しないアプリケーションのマウント + +## 概要 + +Vue 2.x では、 `template` を持つアプリケーションをマウントすると、レンダリングされたコンテンツがマウント先の要素を置き換えます。 Vue 3.x では、レンダリングされたアプリケーションは、子要素として追加され、要素の `innerHTML` を置き換えます。 + +## 2.x での構文 + +Vue 2.x では、 HTML 要素セレクタを `new Vue()` または `$mount` に渡します: + +```js +new Vue({ + el: '#app', + data() { + return { + message: 'Hello Vue!' + } + }, + template: ` +
{{ message }}
+ ` +}) + +// または +const app = new Vue({ + data() { + return { + message: 'Hello Vue!' + } + }, + template: ` +
{{ message }}
+ ` +}) + +app.$mount('#app') +``` + +このアプリケーションを渡されたセレクタ (ここでは `id="app"`) を持つ `div` のあるページにマウントした場合: + +```html + +
+ Some app content +
+ +``` + +レンダリングされた結果は、上記の `div` がレンダリングされたアプリケーションのコンテンツと置き換えられます: + +```html + +
Hello Vue!
+ +``` + +## 3.x での構文 + +Vue 3.x では、アプリケーションをマウントすると、レンダリングされたコンテンツが `mount` に渡した要素の `innerHTML` を置き換えます: + +```js +const app = Vue.createApp({ + data() { + return { + message: 'Hello Vue!' + } + }, + template: ` +
{{ message }}
+ ` +}) + +app.mount('#app') +``` + +このアプリケーションを `id="app"` を持つ `div` のあるページにマウントすると、このようになります: + +```html + +
+
Hello Vue!
+
+ +``` + +## 参照 + +- [`mount` API](/api/application-api.html#mount)