From 637ec7529ac73bf995d448342852a402f11e1ce8 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Thu, 15 Apr 2021 00:33:50 +0900 Subject: [PATCH 1/3] fead: add migration guide > mount changes --- src/guide/migration/mount-changes.md | 94 ++++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 src/guide/migration/mount-changes.md diff --git a/src/guide/migration/mount-changes.md b/src/guide/migration/mount-changes.md new file mode 100644 index 00000000..9b551aac --- /dev/null +++ b/src/guide/migration/mount-changes.md @@ -0,0 +1,94 @@ +--- +title: 'Mount API changes' +badges: + - breaking +--- + +# Mounted application does not replace the element + +## 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`: + +```js +new Vue({ + el: '#app', + data() { + return { + message: 'Hello Vue!' + } + }, + template: ` +
{{ message }}
+ ` +}) + +// or +const app = new Vue({ + data() { + return { + message: 'Hello Vue!' + } + }, + template: ` +
{{ message }}
+ ` +}) + +app.$mount('#app') +``` + +When we mount this application to the page that has a `div` with the passed selector (in our case, it's `id="app"`): + +```html + +
+ Some app content +
+ +``` + +in the rendered result, the mentioned `div` will be replaced with the rendered application content: + +```html + +
Hello Vue!
+ +``` + +## 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`: + +```js +const app = Vue.createApp({ + data() { + return { + message: 'Hello Vue!' + } + }, + template: ` +
{{ message }}
+ ` +}) + +app.mount('#app') +``` + +When this app is mounted to the page that has a `div` with `id="app"`, this will result in: + +```html + +
+
Hello Vue!
+
+ +``` + +## See also + +- [`mount` API](/api/application-api.html#mount) From 5c0bf0886012e85bf71b0787f22cff21821f5221 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Fri, 16 Apr 2021 19:45:43 +0900 Subject: [PATCH 2/3] docs: translate migration guide > mount api changes --- src/guide/migration/mount-changes.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/guide/migration/mount-changes.md b/src/guide/migration/mount-changes.md index 9b551aac..15c7bda6 100644 --- a/src/guide/migration/mount-changes.md +++ b/src/guide/migration/mount-changes.md @@ -1,18 +1,18 @@ --- -title: 'Mount API changes' +title: 'マウント API の変更' badges: - breaking --- -# Mounted application does not replace the element +# 要素を置換しないアプリケーションのマウント -## 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`. +Vue 2.x では、 `template` を持つアプリケーションをマウントすると、レンダリングされたコンテンツがマウント先の要素を置き換えます。 Vue 3.x では、レンダリングされたアプリケーションは、子要素として追加され、要素の `innerHTML` を置き換えます。 -## 2.x Syntax +## 2.x での構文 -In Vue 2.x, we pass an HTML element selector to `new Vue()` or `$mount`: +Vue 2.x では、 HTML 要素セレクタを `new Vue()` または `$mount` に渡します: ```js new Vue({ @@ -27,7 +27,7 @@ new Vue({ ` }) -// or +// または const app = new Vue({ data() { return { @@ -42,7 +42,7 @@ const app = new Vue({ app.$mount('#app') ``` -When we mount this application to the page that has a `div` with the passed selector (in our case, it's `id="app"`): +このアプリケーションを渡されたセレクタ (ここでは `id="app"`) を持つ `div` のあるページにマウントした場合: ```html @@ -52,7 +52,7 @@ When we mount this application to the page that has a `div` with the passed sele ``` -in the rendered result, the mentioned `div` will be replaced with the rendered application content: +レンダリングされた結果は、上記の `div` がレンダリングされたアプリケーションのコンテンツと置き換えられます: ```html @@ -60,9 +60,9 @@ in the rendered result, the mentioned `div` will be replaced with the rendered a ``` -## 3.x Syntax +## 3.x での構文 -In Vue 3.x, when we mount an application, its rendered content will replace the `innerHTML` of the element we pass to `mount`: +Vue 3.x では、アプリケーションをマウントすると、レンダリングされたコンテンツが `mount` に渡した要素の `innerHTML` を置き換えます: ```js const app = Vue.createApp({ @@ -79,7 +79,7 @@ const app = Vue.createApp({ app.mount('#app') ``` -When this app is mounted to the page that has a `div` with `id="app"`, this will result in: +このアプリケーションを `id="app"` を持つ `div` のあるページにマウントすると、このようになります: ```html @@ -89,6 +89,6 @@ When this app is mounted to the page that has a `div` with `id="app"`, this will ``` -## See also +## 参照 - [`mount` API](/api/application-api.html#mount) From 21a3e8747a17a1498ba9aa8fe59511ecfaef8a85 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Fri, 16 Apr 2021 19:46:16 +0900 Subject: [PATCH 3/3] feat: link to translated pages --- src/.vuepress/config.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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' ] },