From db96a436ce1f135fadff598e1f9aea26e2e6b93b Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Wed, 28 Apr 2021 20:44:13 +0900 Subject: [PATCH 1/5] docs: added video explanation links for Vue 3 https://github.com/vuejs/docs-next/commit/dec96b373f18a3f69ce21dc3b6e76daa84a9fcd7#diff-abdbed51e2bfc8953234d2f9b988dd01aae15aaec9f031d800f8994f660eeb08 --- src/guide/teleport.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/guide/teleport.md b/src/guide/teleport.md index ac4e4da0..b678bd27 100644 --- a/src/guide/teleport.md +++ b/src/guide/teleport.md @@ -1,5 +1,7 @@ # Teleport +[Watch a free video about Teleport on Vue Mastery](https://www.vuemastery.com/courses/vue-3-essentials/teleport) + Vue は私たちに、UI やそれに関連する挙動をコンポーネントにして、カプセル化することで UI を作り上げることを勧めています。私たちはそれらを互いに入れ子にして、アプリケーションを構成するツリーを作ることができます。 しかしながら、コンポーネントのテンプレートの一部が、論理的にこのコンポーネントに属している場合もありますが、技術的な観点では、テンプレートのこの部分を Vue アプリの外や、DOM 内の別の場所に移動させることが望ましいこともあります。 From a6391e74e4edd99f5b627e7f90b3372ea9859cdd Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Wed, 28 Apr 2021 20:45:07 +0900 Subject: [PATCH 2/5] docs: add Vue 3 video lessons https://github.com/vuejs/docs-next/commit/3341528dfd2f38bea12794b1501eded3c9c7ff30#diff-abdbed51e2bfc8953234d2f9b988dd01aae15aaec9f031d800f8994f660eeb08 --- src/guide/teleport.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/teleport.md b/src/guide/teleport.md index b678bd27..62475f5e 100644 --- a/src/guide/teleport.md +++ b/src/guide/teleport.md @@ -1,6 +1,6 @@ # Teleport -[Watch a free video about Teleport on Vue Mastery](https://www.vuemastery.com/courses/vue-3-essentials/teleport) +
Learn how to use teleport with a free lesson on Vue School
Vue は私たちに、UI やそれに関連する挙動をコンポーネントにして、カプセル化することで UI を作り上げることを勧めています。私たちはそれらを互いに入れ子にして、アプリケーションを構成するツリーを作ることができます。 From bac6fd50f7a3fb24627a0badaf84e2b1214394b3 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Wed, 28 Apr 2021 20:46:56 +0900 Subject: [PATCH 3/5] Improve formatting of teleport.md https://github.com/vuejs/docs-next/commit/6453ae576de792eb97a6a3045cbab450ff644e8a#diff-abdbed51e2bfc8953234d2f9b988dd01aae15aaec9f031d800f8994f660eeb08 --- src/guide/teleport.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/teleport.md b/src/guide/teleport.md index 62475f5e..54a5fa0a 100644 --- a/src/guide/teleport.md +++ b/src/guide/teleport.md @@ -1,6 +1,6 @@ # Teleport -
Learn how to use teleport with a free lesson on Vue School
+Learn how to use teleport with a free lesson on Vue School Vue は私たちに、UI やそれに関連する挙動をコンポーネントにして、カプセル化することで UI を作り上げることを勧めています。私たちはそれらを互いに入れ子にして、アプリケーションを構成するツリーを作ることができます。 From 14ed06627c0e64ab1fc037dd3bb02ccffe889249 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Wed, 28 Apr 2021 20:56:19 +0900 Subject: [PATCH 4/5] fix: markdown format --- src/guide/teleport.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/guide/teleport.md b/src/guide/teleport.md index 54a5fa0a..0b16e22f 100644 --- a/src/guide/teleport.md +++ b/src/guide/teleport.md @@ -1,6 +1,6 @@ # Teleport -Learn how to use teleport with a free lesson on Vue School +Vue School の無料レッスンで Teleport の使い方を学ぶ Vue は私たちに、UI やそれに関連する挙動をコンポーネントにして、カプセル化することで UI を作り上げることを勧めています。私たちはそれらを互いに入れ子にして、アプリケーションを構成するツリーを作ることができます。 @@ -55,7 +55,7 @@ app.component('modal-button', { Teleport は、グローバルステートに頼ったり、2つのコンポーネントに分割しなくても、HTML の一部を DOM のどの親の下でレンダリングするかを制御するための、きれいな方法を提供します。 -`` を使って、Vue にこの HTML を "**body**" タグに "**teleport (テレポート) **" させるよう、`modal-button` を変更しましょう。 +`` を使って、Vue にこの HTML を "**body**" タグに "**teleport** (テレポート) " させるよう、`modal-button` を変更しましょう。 ```js app.component('modal-button', { From 6f1559183e0d7036831d0d39505cba41eaf6c248 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Wed, 28 Apr 2021 21:05:18 +0900 Subject: [PATCH 5/5] docs: replace to camelcase for technical term --- src/guide/teleport.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/guide/teleport.md b/src/guide/teleport.md index 0b16e22f..f7b57021 100644 --- a/src/guide/teleport.md +++ b/src/guide/teleport.md @@ -55,7 +55,7 @@ app.component('modal-button', { Teleport は、グローバルステートに頼ったり、2つのコンポーネントに分割しなくても、HTML の一部を DOM のどの親の下でレンダリングするかを制御するための、きれいな方法を提供します。 -`` を使って、Vue にこの HTML を "**body**" タグに "**teleport** (テレポート) " させるよう、`modal-button` を変更しましょう。 +`` を使って、Vue にこの HTML を "**body**" タグに "**Teleport** (テレポート) " させるよう、`modal-button` を変更しましょう。 ```js app.component('modal-button', { @@ -121,7 +121,7 @@ app.component('child-component', { これは、親コンポーネントからの注入が期待通りに動作し、Vue Devtools 上では実際のコンテンツが移動した場所に配置されるのではなく、親コンポーネントの下に配置されることを意味します。 -## 複数の teleport のターゲットを同じにして使う +## 複数の Teleport のターゲットを同じにして使う 一般的なユースケースのシナリオは、再利用可能な `` コンポーネントで、同時に複数のインスタンスがアクティブになっている状態かもしれません。このようなシナリオの場合、複数の `` は、同じターゲット要素に対してそれぞれのコンテンツをマウントすることができます。