Skip to content

Commit cf09c44

Browse files
Guide > Template Syntax の翻訳を追従 (#274)
* docs: reword Vue instance/application parameters mentions vuejs/docs@3f66e80#diff-9c31097fc6ae839e3f0fa75210e6747839489d1e7d92491ee6f803fc2d938d6b * fix: change 'application' to 'component' in template-syntax.md vuejs/docs@ab4fac3#diff-9c31097fc6ae839e3f0fa75210e6747839489d1e7d92491ee6f803fc2d938d6b * fix: update broken links vuejs/docs@96d6403#diff-9c31097fc6ae839e3f0fa75210e6747839489d1e7d92491ee6f803fc2d938d6b * fix: explain how to omit dynamic attributes (#745) * fix: adjust the line breaks in a template syntax example (#790) * proposal of 'allow listing' as an inclusive alternative to 'whitelist… vuejs/docs@6f904c1#diff-9c31097fc6ae839e3f0fa75210e6747839489d1e7d92491ee6f803fc2d938d6b Co-authored-by: skirtle <[email protected]>
1 parent 6cb647c commit cf09c44

File tree

1 file changed

+15
-10
lines changed

1 file changed

+15
-10
lines changed

src/guide/template-syntax.md

+15-10
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# テンプレート構文
22

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

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

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

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

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

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

4444
### 属性
4545

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

4848
```html
4949
<div v-bind:id="dynamicId"></div>
5050
```
5151

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

5456
```html
5557
<button v-bind:disabled="isButtonDisabled">Button</button>
5658
```
5759

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

6062
### JavaScript 式の使用
6163

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

6466
```html
65-
{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('')
66-
}}
67+
{{ number + 1 }}
68+
69+
{{ ok ? 'YES' : 'NO' }}
70+
71+
{{ message.split('').reverse().join('') }}
6772

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

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

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

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

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

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

202207
#### JavaScript 式 の制約
203208

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

0 commit comments

Comments
 (0)