3
3
- breaking
4
4
---
5
5
6
- # 属性強制の振舞い <MigrationBadges :badges =" $frontmatter.badges " />
6
+ # 属性強制の振る舞い <MigrationBadges :badges =" $frontmatter.badges " />
7
7
8
8
::: info Info
9
9
これはローレベルな内部 API の変更であり、ほとんどの開発者には影響しません。
@@ -20,15 +20,15 @@ badges:
20
20
21
21
## 2.x での構文
22
22
23
- 2.x では、` v-bind ` の値を強制するために以下のような戦略がありました:
23
+ 2.x では、` v-bind ` の値を強制するために以下のような戦略がありました:
24
24
25
25
- いくつかの属性/要素のペアでは、Vue は常に対応する IDL 属性(プロパティ)を使用します。: [ ` <input> ` 、` <select> ` 、` <progress> ` における` value ` など] ( https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/util/attrs.js#L11-L18 )
26
26
27
- - 「[ ブール属性] ( https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/util/attrs.js#L33-L40 ) 」と[ xlinks] ( https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/util/attrs.js#L44-L46 ) については、Vue はそれらが"falsy"([ ` undefined ` 、` null ` 、` false ` ] ( https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/util/attrs.js#L52-L54 ) )の場合には削除し、それ以外の場合には追加します ([ ここ] ( https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/runtime/modules/attrs.js#L66-L77 ) や[ こちら] ( https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/runtime/modules/attrs.js#L81-L85 ) を見てください)。
27
+ - 「[ ブール属性] ( https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/util/attrs.js#L33-L40 ) 」と [ xlinks] ( https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/util/attrs.js#L44-L46 ) については、Vue はそれらが "falsy" ([ ` undefined ` 、` null ` 、` false ` ] ( https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/util/attrs.js#L52-L54 ) ) の場合には削除し、それ以外の場合には追加します ([ ここ] ( https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/runtime/modules/attrs.js#L66-L77 ) や[ こちら] ( https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/runtime/modules/attrs.js#L81-L85 ) を見てください)。
28
28
29
- - 「[ 列挙された属性] ( https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/util/attrs.js#L20 ) 」(現在は` contenteditable ` 、` draggable ` 、` spellcheck ` )については、Vue はそれらを[ 強制的に] ( https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/util/attrs.js#L24-L31 ) 文字列にしようとします ([ vuejs/vue #9397 ] ( https://github.com/vuejs/vue/issues/9397 ) を修正するために、` contenteditable ` については今のところ特別な扱いをしています)。
29
+ - 「[ 列挙された属性] ( https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/util/attrs.js#L20 ) 」(現在は ` contenteditable ` 、` draggable ` 、` spellcheck ` )については、Vue はそれらを[ 強制的に] ( https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/util/attrs.js#L24-L31 ) 文字列にしようとします ([ vuejs/vue #9397 ] ( https://github.com/vuejs/vue/issues/9397 ) を修正するために、` contenteditable ` については今のところ特別な扱いをしています)。
30
30
31
- - 他の属性については、"falsy"な値(` undefined ` , ` null ` , or ` false ` )は削除し、他の値はそのまま設定します([ こちら] ( https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/runtime/modules/attrs.js#L92-L113 ) を見てください)。
31
+ - 他の属性については、"falsy" な値(` undefined ` , ` null ` , or ` false ` )は削除し、他の値はそのまま設定します([ こちら] ( https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/runtime/modules/attrs.js#L92-L113 ) を見てください)。
32
32
33
33
次の表では、Vue が「列挙された属性」を通常の非ブール属性とは異なる方法で強制する方法を説明しています:
34
34
@@ -43,20 +43,20 @@ badges:
43
43
| ` attr="foo" ` | ` foo="foo" ` | ` draggable="true" ` |
44
44
| ` attr ` | ` foo="" ` | ` draggable="true" ` |
45
45
46
- 上の表からわかるように、現在の実装では` true ` を ` 'true' ` に強制していますが、` false ` の場合は属性を削除しています。これはまた、` aria-selected ` や ` aria-hidden ` といった` aria-* ` 属性のような非常に一般的なユースケースでも、ユーザーが手動でブール値を文字列に強制する必要があるなど、一貫性に欠けていました。
46
+ 上の表からわかるように、現在の実装では ` true ` を ` 'true' ` に強制していますが、` false ` の場合は属性を削除しています。これはまた、` aria-selected ` や ` aria-hidden ` といった ` aria-* ` 属性のような非常に一般的なユースケースでも、ユーザーが手動でブール値を文字列に強制する必要があるなど、一貫性に欠けていました。
47
47
48
48
## 3.x での構文
49
49
50
50
この「列挙された属性」という内部概念を捨てて、通常の非ブール HTML 属性として扱うつもりです。
51
51
52
52
- これは、通常の非ブール属性と「列挙された属性」の間の矛盾を解決します。
53
- - また、` 'true' ` や ` 'false' ` 以外の値や、` contenteditable ` のような属性には、これから定義されるキーワードを使用することも可能になります。
53
+ - また、` 'true' ` や ` 'false' ` 以外の値や、` contenteditable ` のような属性には、これから定義されるキーワードを使用することも可能になります。
54
54
55
- 非ブール属性については、Vue は` false ` であれば削除はせず、代わりに` 'false' ` に強制します。
55
+ 非ブール属性については、Vue は ` false ` であれば削除はせず、代わりに ` 'false' ` に強制します。
56
56
57
- - これにより、` true ` と ` false ` の間の矛盾が解消され、` aria-* ` 属性の出力が容易になります。
57
+ - これにより、` true ` と ` false ` の間の矛盾が解消され、` aria-* ` 属性の出力が容易になります。
58
58
59
- 新しい振舞いについては 、以下の表を参照してください:
59
+ 新しい振る舞いについては 、以下の表を参照してください:
60
60
61
61
| バインディング式 | ` foo ` <sup >通常の属性</sup > | ` draggable ` <sup >列挙された属性</sup > |
62
62
| ------------------- | --------------------------- | ------------------------------------- |
@@ -77,23 +77,23 @@ badges:
77
77
78
78
### 列挙された属性
79
79
80
- 列挙された属性が存在しない場合や` attr="false" ` が存在しない場合に、以下のように異なる IDL 属性値(実際の状態を反映した値)が生成されることがあります:
80
+ 列挙された属性が存在しない場合や ` attr="false" ` が存在しない場合に、以下のように異なる IDL 属性値(実際の状態を反映した値)が生成されることがあります:
81
81
82
82
| 列挙された属性の不在 | IDL 属性と値 |
83
83
| -------------------- | ------------------------------------ |
84
84
| ` contenteditable ` | ` contentEditable ` &rarr ; ` 'inherit' ` |
85
85
| ` draggable ` | ` draggable ` &rarr ; ` false ` |
86
86
| ` spellcheck ` | ` spellcheck ` &rarr ; ` true ` |
87
87
88
- これまでの振舞いを維持するために 、また、` false ` を ` 'false' ` に強制するために、3.x Vue の開発者は` contenteditable ` と ` spellcheck ` に対して` v-bind ` 式を ` false ` または` 'false' ` に解決する必要があります。
88
+ これまでの振る舞いを維持するために 、また、` false ` を ` 'false' ` に強制するために、3.x Vue の開発者は ` contenteditable ` と ` spellcheck ` に対して ` v-bind ` 式を ` false ` または ` 'false' ` に解決する必要があります。
89
89
90
- 2.x では、列挙された属性に対して無効な値を` 'true' ` に強制的に設定していました。これは通常意図していなかったもので、大規模に利用される可能性は低いと思われます。3.x では、` true ` または` 'true' ` を明示的に指定する必要があります。
90
+ 2.x では、列挙された属性に対して無効な値を ` 'true' ` に強制的に設定していました。これは通常意図していなかったもので、大規模に利用される可能性は低いと思われます。3.x では、` true ` または ` 'true' ` を明示的に指定する必要があります。
91
91
92
92
### 属性を削除する代わりに ` false ` を ` 'false' ` に強制する
93
93
94
94
3.x では、明示的に属性を削除するには ` null ` または ` undefined ` を使用しなければなりません。
95
95
96
- ### 2.x と 3.x 間の振舞いの比較
96
+ ### 2.x と 3.x 間の振る舞いの比較
97
97
98
98
<table >
99
99
<thead >
0 commit comments