Skip to content

Commit 2504960

Browse files
committed
add colon where there is colon
1 parent 6eb1531 commit 2504960

File tree

1 file changed

+6
-6
lines changed

1 file changed

+6
-6
lines changed

src/guide/custom-directive.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
## 基本
44

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つの例として挙げられます:
66

77
<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">
88
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/JjdxaJW">
@@ -13,7 +13,7 @@ Vue.js 本体で提供されているデフォルトのディレクティブ (`v
1313

1414
ページを読み込むと、この要素にフォーカスが当たります (注意:`autofucus` はモバイルの Safari で動きません)。実際、このページに訪れてから他に何もクリックしなければ、上記の input 要素にフォーカスが当たります。また、`Rerun` ボタンをクリックしても、input 要素はフォーカスされます。
1515

16-
ここからこれを実現するディレクティブを実装しましょう
16+
ここからこれを実現するディレクティブを実装しましょう:
1717

1818
```js
1919
const app = Vue.createApp({})
@@ -27,7 +27,7 @@ app.directive('focus', {
2727
})
2828
```
2929

30-
ディレクティブを代わりにローカルに登録したい場合、コンポーネントの `directives` オプションで登録できます
30+
ディレクティブを代わりにローカルに登録したい場合、コンポーネントの `directives` オプションで登録できます:
3131

3232
```js
3333
directives: {
@@ -40,7 +40,7 @@ directives: {
4040
}
4141
```
4242

43-
そしてテンプレートでは、新規登録した `v-focus` 属性をどの要素に対しても以下のように利用できます
43+
そしてテンプレートでは、新規登録した `v-focus` 属性をどの要素に対しても以下のように利用できます:
4444

4545
```html
4646
<input v-focus />
@@ -72,7 +72,7 @@ VNodes は[後で](render-function.html#the-virtual-dom-tree)詳細に扱いま
7272

7373
ディレクティブの引数は動的にできます。例えば、`v-mydirective:[argument]="value"` において、`argument` はコンポーネントインスタンスの data プロパティに基づいて更新されます! これにより、私たちのアプリケーション全体を通した利用に対して、カスタムディレクティブは柔軟になります。
7474

75-
ページの固定位置に要素をピン留めするカスタムディレクティブを考えてみましょう。引数の値が縦方向のピクセル位置を更新するカスタムディレクティブを以下のように作成することができます:
75+
ページの固定位置に要素をピン留めするカスタムディレクティブを考えてみましょう。引数の値が縦方向のピクセル位置を更新するカスタムディレクティブを以下のように作成することができます:
7676

7777
```vue-html
7878
<div id="dynamic-arguments-example" class="demo">
@@ -227,7 +227,7 @@ return withDirectives(h('div'), [[vDemo, test]])
227227

228228
ここで `vDemo` はユーザによって記述されたディレクティブオブジェクトで、それは `mounted``updated` のフック関数を含みます。
229229

230-
`withDirectives` は複製した VNode を返します。複製された VNode は VNode のライフサイクルフック (詳細は[描画関数](render-function.html)を参照) としてラップ、注入されたユーザのフック関数を持ちます
230+
`withDirectives` は複製した VNode を返します。複製された VNode は VNode のライフサイクルフック (詳細は[描画関数](render-function.html)を参照) としてラップ、注入されたユーザのフック関数を持ちます:
231231

232232
```js
233233
{

0 commit comments

Comments
 (0)