1
1
# テンプレート構文
2
2
3
- Vue.js では HTML ベースのテンプレート構文を使っているので、Vue インスタンスのデータと描画された DOM を宣言的に対応させることができます。全ての Vue.js テンプレートは、仕様に準拠しているブラウザや HTML パーサによってパースできる有効な HTML です。
3
+ Vue.js では HTML ベースのテンプレート構文を使っているので、コンポーネントインスタンスのデータと描画された DOM を宣言的に対応させることができます。全ての Vue.js テンプレートは、仕様に準拠しているブラウザや HTML パーサによってパースできる有効な HTML です。
4
4
5
5
内部では、Vue はテンプレートを仮想 (Virtual) DOM の描画 (render) 関数にコンパイルします。リアクティブシステムと組み合わせて、Vue は再描画に必要なコンポーネントをインテリジェントに把握でき、アプリケーションの状態が変わった時に最低限の DOM 操作を適用します
6
6
@@ -16,7 +16,7 @@ Vue.js では HTML ベースのテンプレート構文を使っているので
16
16
<span >Message: {{ msg }}</span >
17
17
```
18
18
19
- mustache タグは、対応するオブジェクトの ` msg ` プロパティの値に置き換えられます。また、` msg ` プロパティが変更される時、それに応じて更新されます。
19
+ mustache タグは、対応するコンポーネントインスタンスから ` msg ` プロパティの値に置き換えられます。また、` msg ` プロパティが変更される時、それに応じて更新されます。
20
20
21
21
[ v-once ディレクティブ] ( ../api/directives.html#v-once ) を使用することで、データ変更時の更新はおこなわず、一度だけ展開することができます。ただし、同じノードのあらゆる他のバインディングが影響を受けることに注意してください:
22
22
@@ -43,32 +43,37 @@ mustache タグは、対応するオブジェクトの `msg` プロパティの
43
43
44
44
### 属性
45
45
46
- Mustache は、HTML 属性の内部で使用することはできません。代わりに、[ ` v-bind ` ディレクティブ] ( ../api/#v-bind ) を使用してください:
46
+ Mustache は、HTML 属性の内部で使用することはできません。代わりに、[ ` v-bind ` ディレクティブ] ( ../api/directives.html #v-bind ) を使用してください:
47
47
48
48
``` html
49
49
<div v-bind:id =" dynamicId" ></div >
50
50
```
51
51
52
- 属性が単に存在していることを ` true ` と示すといった真偽値属性の場合、` v-bind ` は少し異なった働きをします。この例では:
52
+ バインドされた値が ` null ` や ` undefined ` の場合、その属性はレンダリングされた要素には含まれません。
53
+
54
+ 属性が単に存在していることを ` true ` と示すといった真偽値属性の場合、` v-bind ` は少し異なった働きをします。例えば:
53
55
54
56
``` html
55
57
<button v-bind:disabled =" isButtonDisabled" >Button</button >
56
58
```
57
59
58
- ` isButtonDisabled ` が ` null ` または ` undefined ` の場合、 ` disabled ` 属性は描画された ` <button> ` 要素に含められません 。
60
+ ` isButtonDisabled ` が真の値をもつ場合、 ` disabled ` 属性は含められます。また、 ` <button disabled="" > ` との整合性を保つために、値が空文字である場合も含まれます。その他の偽の値の場合、この属性は省略されます 。
59
61
60
62
### JavaScript 式の使用
61
63
62
64
これまで、テンプレートに単純なキーをバインディングしてきました。実際には Vue.js は全てのデータバインディング内部で JavaScript 式を完全にサポートします:
63
65
64
66
``` 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('') }}
67
72
68
73
<div v-bind:id =" 'list-' + id" ></div >
69
74
```
70
75
71
- これらの式は、Vue インスタンスが所有するデータスコープ内で JavaScript として評価されます。制限として、それぞれのバインディングは、** 単一の式** だけ含むことができるというものです。なので、以下は動作** しません** :
76
+ これらの式は、現在のアクティブなインスタンスのデータスコープ内で JavaScript として評価されます。制限として、それぞれのバインディングは、** 単一の式** だけ含むことができるというものです。なので、以下は動作** しません** :
72
77
73
78
``` html
74
79
<!-- これは文であり、式ではありません: -->
@@ -117,7 +122,7 @@ Mustache は、HTML 属性の内部で使用することはできません。代
117
122
<a v-bind:[attributeName] =" url" > ... </a >
118
123
```
119
124
120
- ここで ` attributeName ` は JavaScript 式として動的に評価され、その評価結果が引数の最終的な値として使われます。例えば、Vue インスタンスが ` "href" ` という値の ` attributeName ` という data プロパティをもつ場合、このバインディングは ` v-bind:href ` と等しくなります。
125
+ ここで ` attributeName ` は JavaScript 式として動的に評価され、その評価結果が引数の最終的な値として使われます。例えば、コンポーネントインスタンスが ` "href" ` という値の ` attributeName ` という data プロパティをもつ場合、このバインディングは ` v-bind:href ` と等しくなります。
121
126
122
127
同様に、動的なイベント名にハンドラをバインドするために動的引数を使うこともできます:
123
128
@@ -201,4 +206,4 @@ in-DOM テンプレートの中では、v-bind:[someattr] に変換されます
201
206
202
207
#### JavaScript 式 の制約
203
208
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