From 4e3090bdf8015166830c433968d278dd1f70b002 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Wed, 28 Apr 2021 19:24:50 +0900 Subject: [PATCH 1/5] docs: make pinPadding value change reflect in the template https://github.com/vuejs/docs-next/commit/c4b734d39bfeb73089bac2e525133ee48759e001#diff-91618a748fbcef0b7ce1f26f300d5aabe925114da5a69022eef7d42a7ed4d3bf --- src/guide/custom-directive.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/custom-directive.md b/src/guide/custom-directive.md index 81d5a8d2..4cf9d298 100644 --- a/src/guide/custom-directive.md +++ b/src/guide/custom-directive.md @@ -130,7 +130,7 @@ app.mount('#dynamic-arguments-example')

Scroll down the page

-

Stick me 200px from the {{ direction }} of the page

+

Stick me {{ pinPadding + 'px' }} from the {{ direction }} of the page

``` From fd605a880a4f40ef7e72ecd25c8935e2390474ec Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Wed, 28 Apr 2021 19:28:08 +0900 Subject: [PATCH 2/5] fix: fixed custom directives on components https://github.com/vuejs/docs-next/commit/dee5886588de85522a28f7f284d581dcfe67f7d8#diff-91618a748fbcef0b7ce1f26f300d5aabe925114da5a69022eef7d42a7ed4d3bf --- src/guide/custom-directive.md | 40 ++++++++++------------------------- 1 file changed, 11 insertions(+), 29 deletions(-) diff --git a/src/guide/custom-directive.md b/src/guide/custom-directive.md index 4cf9d298..625c7fc8 100644 --- a/src/guide/custom-directive.md +++ b/src/guide/custom-directive.md @@ -194,40 +194,22 @@ app.directive('demo', (el, binding) => { ## コンポーネントにおける使用法 -3.0 ではフラグメントがサポートされているため、コンポーネントは潜在的に１つ以上のルートノードを持つことができます。これは複数のルートノードを持つ１つのコンポーネントにカスタムディレクティブが使用された時に、問題を引き起こします。 - -3.0 のコンポーネント上でどのようにカスタムディレクティブが動作するかを詳細に説明するために、3.0 においてカスタムディレクティブがどのようにコンパイルされるのかをまずは理解する必要があります。以下のようなディレクティブは: +When used on components, custom directive will always apply to component's root node, similarly to [non-prop attributes](component-attrs.html). ```vue-html -
-``` - -おおよそ以下のようにコンパイルされます: - -```js -const vDemo = resolveDirective('demo') - -return withDirectives(h('div'), [[vDemo, test]]) + ``` -ここで `vDemo` はユーザによって記述されたディレクティブオブジェクトで、それは `mounted` や `updated` のフック関数を含みます。 - -`withDirectives` は複製した VNode を返します。複製された VNode は VNode のライフサイクルフック (詳細は[Render 関数](render-function.html)を参照) としてラップ、注入されたユーザのフック関数を持ちます: - ```js -{ - onVnodeMounted(vnode) { - // vDemo.mounted(...) を呼びます - } -} +app.component('my-component', { + template: ` +
// v-demo directive will be applied here + My component content +
+ ` +}) ``` -**結果として、VNode のデータの一部としてカスタムディレクティブは全て含まれます。カスタムディレクティブがコンポーネントで利用される場合、これらの `onVnodeXXX` フック関数は無関係な props としてコンポーネントに渡され、最終的に `this.$attrs` になります。** - -これは以下のようなテンプレートのように、要素のライフサイクルに直接フックできることを意味しています。これはカスタムディレクティブが複雑すぎる場合に便利です: - -```vue-html -
-``` +Unlike attributes, directives can't be passed to a different element with `v-bind="$attrs"`. -これは [属性のフォールスロー](component-attrs.html) と一貫性があります。つまり、コンポーネントにおけるカスタムディレクティブのルールは、その他の異質な属性と同じです: それをどこにまた適用するかどうかを決めるのは、子コンポーネント次第です。子コンポーネントが内部の要素に `v-bind="$attrs"` を利用している場合、あらゆるカスタムディレクティブもその要素に適用されます。 +With [fragments](/guide/migration/fragments.html#overview) support, components can potentially have more than one root nodes. When applied to a multi-root component, directive will be ignored and the warning will be thrown. From 7de50ae1ef0671d3fbdf669fbcd30611682b197a Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Wed, 28 Apr 2021 19:29:21 +0900 Subject: [PATCH 3/5] feat: added `created` hook to directives https://github.com/vuejs/docs-next/commit/c9b8954c4012fd591a451dc5a92943e7b85c9ebb#diff-91618a748fbcef0b7ce1f26f300d5aabe925114da5a69022eef7d42a7ed4d3bf --- src/guide/custom-directive.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/guide/custom-directive.md b/src/guide/custom-directive.md index 625c7fc8..d216d4ac 100644 --- a/src/guide/custom-directive.md +++ b/src/guide/custom-directive.md @@ -45,7 +45,9 @@ directives: { ディレクティブの定義オブジェクトは、いくつかのフック関数を提供しています (全てオプション): -- `beforeMount`: ディレクティブが初めて要素に束縛された時、そして親コンポーネントがマウントされる前に呼ばれます。ここは1度だけ実行するセットアップ処理を行える場所です。 +- `created`: called before the bound element's attributes or event listeners are applied. This is useful in cases where the directive needs to attach event listeners that must be called before normal `v-on` event listeners. + +- `beforeMount`: called when the directive is first bound to the element and before parent component is mounted. - `mounted`: 束縛された要素の親コンポーネントがマウントされた時に呼ばれます。 From e470e7bc30d90ee6b58c3e9eaf85c8d1e114058f Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Wed, 28 Apr 2021 19:39:01 +0900 Subject: [PATCH 4/5] fix: typo --- src/guide/custom-directive.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/custom-directive.md b/src/guide/custom-directive.md index d216d4ac..39dcf66e 100644 --- a/src/guide/custom-directive.md +++ b/src/guide/custom-directive.md @@ -6,7 +6,7 @@ Vue.js 本体で提供されているデフォルトのディレクティブ (`v -ページを読み込むと、この要素にフォーカスが当たります (注意：`autofucus` はモバイルの Safari で動きません)。実際、このページに訪れてから他に何もクリックしなければ、上記の input 要素にフォーカスが当たります。また、`Rerun` ボタンをクリックしても、input 要素はフォーカスされます。 +ページを読み込むと、この要素にフォーカスが当たります (注意：`autofocus` はモバイルの Safari で動きません)。実際、このページに訪れてから他に何もクリックしなければ、上記の input 要素にフォーカスが当たります。また、`Rerun` ボタンをクリックしても、input 要素はフォーカスされます。 ここからこれを実現するディレクティブを実装しましょう: From de5b8b3f4c986ee6dd61263dab7a9a9f58c73c26 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Wed, 28 Apr 2021 20:31:08 +0900 Subject: [PATCH 5/5] docs: translate custom directives --- src/guide/custom-directive.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/guide/custom-directive.md b/src/guide/custom-directive.md index 39dcf66e..10a3794a 100644 --- a/src/guide/custom-directive.md +++ b/src/guide/custom-directive.md @@ -45,9 +45,9 @@ directives: { ディレクティブの定義オブジェクトは、いくつかのフック関数を提供しています (全てオプション): -- `created`: called before the bound element's attributes or event listeners are applied. This is useful in cases where the directive needs to attach event listeners that must be called before normal `v-on` event listeners. +- `created`: 束縛された要素の属性や、イベントリスナが適用される前に呼ばれます。これは通常の `v-on` イベントリスナの前に呼ばれなければならないイベントリスナをつける必要がある場合に便利です。 -- `beforeMount`: called when the directive is first bound to the element and before parent component is mounted. +- `beforeMount`: ディレクティブが最初に要素に束縛されたとき、親コンポーネントがマウントされる前に呼ばれます。 - `mounted`: 束縛された要素の親コンポーネントがマウントされた時に呼ばれます。 @@ -169,7 +169,7 @@ app.directive('pin', { ## 関数による省略記法 -前回の例では、`mounted` と `updated` に同じ振る舞いを欲しかったでしょう。しかし、その他のフック関数を気にしてはいけません。ディレクティブにコールバックを渡すことで実現できます: +前の例では、`mounted` と `updated` に同じ振る舞いをさせたいが、その他のフックは気にしない、という場合があります。そのような場合は、ディレクティブにコールバックを渡すことで実現できます: ```js app.directive('pin', (el, binding) => { @@ -194,9 +194,9 @@ app.directive('demo', (el, binding) => { }) ``` -## コンポーネントにおける使用法 +## コンポーネントでの使い方 -When used on components, custom directive will always apply to component's root node, similarly to [non-prop attributes](component-attrs.html). +コンポーネントに使われた場合、カスタムディレクティブは [プロパティでない属性](component-attrs.html) と同じように、常にコンポーネントのルートノードに適用されます ```vue-html @@ -205,13 +205,13 @@ When used on components, custom directive will always apply to component's root ```js app.component('my-component', { template: ` -
// v-demo directive will be applied here +
// v-demo ディレクティブはここで適用される My component content
` }) ``` -Unlike attributes, directives can't be passed to a different element with `v-bind="$attrs"`. +属性とは異なり、ディレクティブは `v-bind="$attrs"` で別の要素に渡すことはできません。 -With [fragments](/guide/migration/fragments.html#overview) support, components can potentially have more than one root nodes. When applied to a multi-root component, directive will be ignored and the warning will be thrown. +[Fragments](/guide/migration/fragments.html#overview) のサポートによって、コンポーネントは複数のルートノードを持つことができます。マルチルートコンポーネントに適用された場合、ディレクティブは無視され、警告が投げられます。