File tree Expand file tree Collapse file tree 7 files changed +13
-13
lines changed Expand file tree Collapse file tree 7 files changed +13
-13
lines changed Original file line number Diff line number Diff line change 61
61
```
62
62
63
63
:::tip Note
64
- ` render ` 関数は、` template ` オプションや、マウントした要素の DOM 内 HTML テンプレートからコンパイルされたレンダリング関数よりも高い優先度を持ちます 。
64
+ ` render ` 関数は、` template ` オプションや、マウントした要素の DOM 内 HTML テンプレートからコンパイルされた Render 関数よりも高い優先度を持ちます 。
65
65
:::
66
66
67
67
- ** 参照:** [ Render 関数] ( ../guide/render-function.html )
Original file line number Diff line number Diff line change @@ -84,7 +84,7 @@ const app = Vue.createApp({
84
84
85
85
` inheritAttrs ` を ` false ` にセットした場合属性の継承は無効化されますが、` inheritAttrs ` の設定に関わらずコンポーネントの ` $attrs ` プロパティを使って、` props ` や ` emits ` といったコンポーネントのプロパティを除く全ての属性(例えば ` class ` や ` style ` 、` v-on ` といったものも)を他の要素の属性への適用することを制御できます。
86
86
87
- [ 前節 ] ( #属性の継承 ) で利用した date-picker のコンポーネント例を用いて、プロパティでない属性の全てをルートの ` div ` 要素ではなく ` input ` 要素に適用する場合、` v-bind ` を用いて簡略的に記述することも可能です。
87
+ [ 前のセクション ] ( #属性の継承 ) で利用した date-picker のコンポーネント例を用いて、プロパティでない属性の全てをルートの ` div ` 要素ではなく ` input ` 要素に適用する場合、` v-bind ` を用いて簡略的に記述することも可能です。
88
88
89
89
``` js{5}
90
90
app.component('date-picker', {
Original file line number Diff line number Diff line change @@ -150,9 +150,9 @@ export default {
150
150
151
151
` setup ` から返された [ refs] ( ../api/refs-api.html#ref ) は、テンプレート内でアクセスされたときに[ 自動的に浅いアンラップ] ( /guide/reactivity-fundamentals.html#ref-のアンラップ ) されるので、テンプレート内で ` .value ` を使用すべきではないことに注意してください。
152
152
153
- ## レンダリング関数での使用
153
+ ## Render 関数での使用
154
154
155
- ` setup ` は同じスコープで宣言されたリアクティブなステートを直接利用することができるレンダリング関数を返すこともできます :
155
+ ` setup ` は同じスコープで宣言されたリアクティブなステートを直接利用することができる Render 関数を返すこともできます :
156
156
157
157
``` js
158
158
// MyBook.vue
@@ -169,7 +169,7 @@ export default {
169
169
}
170
170
```
171
171
172
- レンダリング関数を返すことで 、他のものを返すことができなくなります。内部的には問題ありませんが、このコンポーネントのメソッドをテンプレート参照から親コンポーネントに公開したい場合には、問題となります。
172
+ Render 関数を返すことで 、他のものを返すことができなくなります。内部的には問題ありませんが、このコンポーネントのメソッドをテンプレート参照から親コンポーネントに公開したい場合には、問題となります。
173
173
174
174
この問題を解決するには、` expose ` を呼び出して、外部コンポーネントのインスタンスで利用可能なプロパティを定義したオブジェクトを渡します:
175
175
Original file line number Diff line number Diff line change 1
1
# テンプレート参照
2
2
3
- > この節ではコード例で [ 単一ファイルコンポーネント] ( single-file-component.html ) の文法を使用しています。
3
+ > このセクションではコード例で [ 単一ファイルコンポーネント] ( single-file-component.html ) の文法を使用しています。
4
4
5
5
> このガイドはすでに [ Composition API 導入] ( composition-api-introduction.html ) を読んでいることを前提に書かれています。もしまだ読んでいないのなら、先に読みましょう。
6
6
Original file line number Diff line number Diff line change @@ -283,6 +283,6 @@ vm.selected.number // => 123
283
283
284
284
## コンポーネントの ` v-model `
285
285
286
- > まだ Vue コンポーネントに慣れていない場合、この節は一旦スキップすることができます 。
286
+ > まだ Vue コンポーネントに慣れていない場合、このセクションは一旦スキップすることができます 。
287
287
288
288
HTML 組み込みの input タイプが、常にあなたのニーズに適っているとは限りません。幸運にも、Vue コンポーネントによって、動作を隅々までカスタマイズ可能な再利用性のある入力フォームを自作することができます。それらのフォームに ` v-model ` を使うことも可能です!詳しくは、コンポーネントガイドの [ カスタム input] ( ./component-basics.html#コンポーネントで-v-model-を使う ) を参照してください。
Original file line number Diff line number Diff line change 2
2
3
3
Vue.js では HTML ベースのテンプレート構文を使っているので、コンポーネントインスタンスのデータと描画された DOM を宣言的に対応させることができます。全ての Vue.js テンプレートは、仕様に準拠しているブラウザや HTML パーサによってパースできる有効な HTML です。
4
4
5
- 内部では、Vue はテンプレートを仮想 (Virtual) DOM の描画 (render) 関数にコンパイルします。リアクティブシステムと組み合わせて、Vue は再描画に必要なコンポーネントをインテリジェントに把握でき、アプリケーションの状態が変わった時に最低限の DOM 操作を適用します
5
+ 内部では、Vue はテンプレートを仮想 (Virtual) DOM の Render 関数にコンパイルします。リアクティブシステムと組み合わせて、Vue は再描画に必要なコンポーネントをインテリジェントに把握でき、アプリケーションの状態が変わった時に最低限の DOM 操作を適用します
6
6
7
7
もし、あなたが仮想 DOM の概要に詳しく、JavaScript で直接描画するのを好む場合、テンプレートの代わりに[ 直接 render 関数で書く] ( render-function.html ) ことも可能で、オプションで JSX をサポートしています。
8
8
@@ -117,7 +117,7 @@ Mustache は、HTML 属性の内部で使用することはできません。代
117
117
118
118
``` html
119
119
<!--
120
- 動的引数には、"動的引数の式の制約" の節で後述されるように 、いくつかの制約がある点に注意してください。
120
+ 動的引数には、"動的引数の式の制約" のセクションで後述されるように 、いくつかの制約がある点に注意してください。
121
121
-->
122
122
<a v-bind:[attributeName] =" url" > ... </a >
123
123
```
@@ -140,7 +140,7 @@ Mustache は、HTML 属性の内部で使用することはできません。代
140
140
<form v-on:submit.prevent =" onSubmit" >...</form >
141
141
```
142
142
143
- 後ほど[ ` v-on ` ] ( events.html#イベント修飾子 ) および[ ` v-model ` ] ( forms.html#修飾子 ) の節を読む際 、修飾子の他の例を見るでしょう。
143
+ 後ほど [ ` v-on ` ] ( events.html#イベント修飾子 ) および [ ` v-model ` ] ( forms.html#修飾子 ) を読む際 、修飾子の他の例を見るでしょう。
144
144
145
145
## 省略記法
146
146
Original file line number Diff line number Diff line change @@ -95,11 +95,11 @@ rollup({
95
95
96
96
## テンプレートのプリコンパイル
97
97
98
- DOM 内のテンプレートや、 JavaScript 内のテンプレートリテラルを使う場合、テンプレートからレンダリング関数へのコンパイルは実行時に行われます 。ほとんどの場合、この方法で十分な速度が得られますが、アプリケーションがパフォーマンスを重視される場合は避けたほうがよいです。
98
+ DOM 内のテンプレートや、 JavaScript 内のテンプレートリテラルを使う場合、テンプレートから Render 関数へのコンパイルは実行時に行われます 。ほとんどの場合、この方法で十分な速度が得られますが、アプリケーションがパフォーマンスを重視される場合は避けたほうがよいです。
99
99
100
- テンプレートをプリコンパイルする最も簡単な方法は、 [ 単一ファイルコンポーネント] ( /guide/single-file-component.html ) を使うことです。これは関連するビルドセットアップが自動的にプリコンパイルを行います。これにより、ビルドされたコードは生のテンプレート文字列ではなく、すでにコンパイルされたレンダリング関数が含まれることになります 。
100
+ テンプレートをプリコンパイルする最も簡単な方法は、 [ 単一ファイルコンポーネント] ( /guide/single-file-component.html ) を使うことです。これは関連するビルドセットアップが自動的にプリコンパイルを行います。これにより、ビルドされたコードは生のテンプレート文字列ではなく、すでにコンパイルされた Render 関数が含まれることになります 。
101
101
102
- Webpack を使っていて、 JavaScript とテンプレートファイルを分離したい場合は、 [ vue-template-loader] ( https://github.com/ktsn/vue-template-loader ) を使うと、ビルドステップでテンプレートファイルを JavaScript のレンダリング関数に変換することもできます 。
102
+ Webpack を使っていて、 JavaScript とテンプレートファイルを分離したい場合は、 [ vue-template-loader] ( https://github.com/ktsn/vue-template-loader ) を使うと、ビルドステップでテンプレートファイルを JavaScript の Render 関数に変換することもできます 。
103
103
104
104
## コンポーネントの CSS を抽出
105
105
You can’t perform that action at this time.
0 commit comments