Skip to content

Guide > Template Syntax の翻訳を追従 #274

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Apr 23, 2021
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 15 additions & 10 deletions src/guide/template-syntax.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# テンプレート構文

Vue.js では HTML ベースのテンプレート構文を使っているので、Vue インスタンスのデータと描画された DOM を宣言的に対応させることができます。全ての Vue.js テンプレートは、仕様に準拠しているブラウザや HTML パーサによってパースできる有効な HTML です。
Vue.js では HTML ベースのテンプレート構文を使っているので、コンポーネントインスタンスのデータと描画された DOM を宣言的に対応させることができます。全ての Vue.js テンプレートは、仕様に準拠しているブラウザや HTML パーサによってパースできる有効な HTML です。

内部では、Vue はテンプレートを仮想 (Virtual) DOM の描画 (render) 関数にコンパイルします。リアクティブシステムと組み合わせて、Vue は再描画に必要なコンポーネントをインテリジェントに把握でき、アプリケーションの状態が変わった時に最低限の DOM 操作を適用します

Expand All @@ -16,7 +16,7 @@ Vue.js では HTML ベースのテンプレート構文を使っているので
<span>Message: {{ msg }}</span>
```

mustache タグは、対応するオブジェクトの `msg` プロパティの値に置き換えられます。また、`msg` プロパティが変更される時、それに応じて更新されます。
mustache タグは、対応するコンポーネントインスタンスから `msg` プロパティの値に置き換えられます。また、`msg` プロパティが変更される時、それに応じて更新されます。

[v-once ディレクティブ](../api/directives.html#v-once)を使用することで、データ変更時の更新はおこなわず、一度だけ展開することができます。ただし、同じノードのあらゆる他のバインディングが影響を受けることに注意してください:

Expand Down Expand Up @@ -48,32 +48,37 @@ mustache タグは、対応するオブジェクトの `msg` プロパティの

### 属性

Mustache は、HTML 属性の内部で使用することはできません。代わりに、[`v-bind` ディレクティブ](../api/#v-bind)を使用してください:
Mustache は、HTML 属性の内部で使用することはできません。代わりに、[`v-bind` ディレクティブ](../api/directives.html#v-bind)を使用してください:

```html
<div v-bind:id="dynamicId"></div>
```

属性が単に存在していることを `true` と示すといった真偽値属性の場合、`v-bind` は少し異なった働きをします。この例では:
バインドされた値が `null` や `undefined` の場合、その属性はレンダリングされた要素には含まれません。

属性が単に存在していることを `true` と示すといった真偽値属性の場合、`v-bind` は少し異なった働きをします。例えば:

```html
<button v-bind:disabled="isButtonDisabled">Button</button>
```

`isButtonDisabled` が `null` または `undefined` の場合、`disabled` 属性は描画された `<button>` 要素に含められません
`isButtonDisabled` が真の値をもつ場合、 `disabled` 属性は含められます。また、 `<button disabled="">` との整合性を保つために、値が空文字である場合も含まれます。その他の偽の値の場合、この属性は省略されます

### JavaScript 式の使用

これまで、テンプレートに単純なキーをバインディングしてきました。実際には Vue.js は全てのデータバインディング内部で JavaScript 式を完全にサポートします:

```html
{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('')
}}
{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>
```

これらの式は、Vue インスタンスが所有するデータスコープ内で JavaScript として評価されます。制限として、それぞれのバインディングは、**単一の式**だけ含むことができるというものです。なので、以下は動作**しません**:
これらの式は、現在のアクティブなインスタンスのデータスコープ内で JavaScript として評価されます。制限として、それぞれのバインディングは、**単一の式**だけ含むことができるというものです。なので、以下は動作**しません**:

```html
<!-- これは文であり、式ではありません: -->
Expand Down Expand Up @@ -122,7 +127,7 @@ Mustache は、HTML 属性の内部で使用することはできません。代
<a v-bind:[attributeName]="url"> ... </a>
```

ここで `attributeName` は JavaScript 式として動的に評価され、その評価結果が引数の最終的な値として使われます。例えば、Vue インスタンスが `"href"` という値の `attributeName` という data プロパティをもつ場合、このバインディングは `v-bind:href` と等しくなります。
ここで `attributeName` は JavaScript 式として動的に評価され、その評価結果が引数の最終的な値として使われます。例えば、コンポーネントインスタンスが `"href"` という値の `attributeName` という data プロパティをもつ場合、このバインディングは `v-bind:href` と等しくなります。

同様に、動的なイベント名にハンドラをバインドするために動的引数を使うこともできます:

Expand Down Expand Up @@ -206,4 +211,4 @@ in-DOM テンプレートの中では、v-bind:[someattr] に変換されます

#### JavaScript 式 の制約

テンプレート式はサンドボックスで、`Math` や `Date` といった [ホワイトリストにあるグローバルオブジェクト](https://github.com/vuejs/vue-next/blob/master/packages/shared/src/globalsWhitelist.ts#L3)だけにアクセスできます。テンプレート式内でユーザーが定義したグローバルオブジェクトにアクセスしようとしてはいけません。
テンプレート式はサンドボックス化されていて、 `Math` や `Date` といった [グローバルオブジェクトの制限リスト](https://github.com/vuejs/vue-next/blob/master/packages/shared/src/globalsWhitelist.ts#L3) にだけアクセスできます。テンプレート式内でユーザーが定義したグローバルオブジェクトにアクセスしようとしてはいけません。