2
2
3
3
## 基本
4
4
5
- Vue.js 本体で提供されているデフォルトのディレクティブ (` v-model ` や ` v-show ` ) に加えて、独自のカスタムディレクティブ (custom directives) を登録することも可能です。Vue ではコードの再利用や抽象化の基本形はコンポーネントです。しかしながら、単純な要素への低レベルな DOM のアクセスが必要なケースがあるかもしれません。こういったケースにカスタムディレクティブが役に立つことでしょう。以下のような input 要素へのフォーカスが1つの例として挙げられます。
5
+ Vue.js 本体で提供されているデフォルトのディレクティブ (` v-model ` や ` v-show ` ) に加えて、独自のカスタムディレクティブ (custom directives) を登録することも可能です。Vue ではコードの再利用や抽象化の基本形はコンポーネントです。しかしながら、単純な要素への低レベルな DOM のアクセスが必要なケースがあるかもしれません。こういったケースにカスタムディレクティブが役に立つことでしょう。以下のような input 要素へのフォーカスが1つの例として挙げられます:
6
6
7
7
<p class =" codepen " data-height =" 300 " data-theme-id =" 39028 " data-default-tab =" result " data-user =" Vue " data-slug-hash =" JjdxaJW " data-editable =" true " style =" height : 300px ; box-sizing : border-box ; display : flex ; align-items : center ; justify-content : center ; border : 2px solid ; margin : 1em 0 ; padding : 1em ;" data-pen-title =" Custom directives: basic example " >
8
8
<span >See the Pen <a href =" https://codepen.io/team/Vue/pen/JjdxaJW " >
@@ -13,7 +13,7 @@ Vue.js 本体で提供されているデフォルトのディレクティブ (`v
13
13
14
14
ページを読み込むと、この要素にフォーカスが当たります (注意:` autofucus ` はモバイルの Safari で動きません)。実際、このページに訪れてから他に何もクリックしなければ、上記の input 要素にフォーカスが当たります。また、` Rerun ` ボタンをクリックしても、input 要素はフォーカスされます。
15
15
16
- ここからこれを実現するディレクティブを実装しましょう。
16
+ ここからこれを実現するディレクティブを実装しましょう:
17
17
18
18
``` js
19
19
const app = Vue .createApp ({})
@@ -27,7 +27,7 @@ app.directive('focus', {
27
27
})
28
28
```
29
29
30
- ディレクティブを代わりにローカルに登録したい場合、コンポーネントの ` directives ` オプションで登録できます。
30
+ ディレクティブを代わりにローカルに登録したい場合、コンポーネントの ` directives ` オプションで登録できます:
31
31
32
32
``` js
33
33
directives: {
@@ -40,7 +40,7 @@ directives: {
40
40
}
41
41
```
42
42
43
- そしてテンプレートでは、新規登録した ` v-focus ` 属性をどの要素に対しても以下のように利用できます。
43
+ そしてテンプレートでは、新規登録した ` v-focus ` 属性をどの要素に対しても以下のように利用できます:
44
44
45
45
``` html
46
46
<input v-focus />
@@ -72,7 +72,7 @@ VNodes は[後で](render-function.html#the-virtual-dom-tree)詳細に扱いま
72
72
73
73
ディレクティブの引数は動的にできます。例えば、` v-mydirective:[argument]="value" ` において、` argument ` はコンポーネントインスタンスの data プロパティに基づいて更新されます! これにより、私たちのアプリケーション全体を通した利用に対して、カスタムディレクティブは柔軟になります。
74
74
75
- ページの固定位置に要素をピン留めするカスタムディレクティブを考えてみましょう。引数の値が縦方向のピクセル位置を更新するカスタムディレクティブを以下のように作成することができます:。
75
+ ページの固定位置に要素をピン留めするカスタムディレクティブを考えてみましょう。引数の値が縦方向のピクセル位置を更新するカスタムディレクティブを以下のように作成することができます:
76
76
77
77
``` vue-html
78
78
<div id="dynamic-arguments-example" class="demo">
@@ -227,7 +227,7 @@ return withDirectives(h('div'), [[vDemo, test]])
227
227
228
228
ここで ` vDemo ` はユーザによって記述されたディレクティブオブジェクトで、それは ` mounted ` や ` updated ` のフック関数を含みます。
229
229
230
- ` withDirectives ` は複製した VNode を返します。複製された VNode は VNode のライフサイクルフック (詳細は[ 描画関数] ( render-function.html ) を参照) としてラップ、注入されたユーザのフック関数を持ちます。
230
+ ` withDirectives ` は複製した VNode を返します。複製された VNode は VNode のライフサイクルフック (詳細は[ 描画関数] ( render-function.html ) を参照) としてラップ、注入されたユーザのフック関数を持ちます:
231
231
232
232
``` js
233
233
{
0 commit comments