|
2 | 2 |
|
3 | 3 | ## template
|
4 | 4 |
|
5 |
| -- **Type:** `string` |
| 5 | +- **型:** `string` |
6 | 6 |
|
7 |
| -- **Details:** |
| 7 | +- **詳細:** |
8 | 8 |
|
9 |
| - A string template to be used as the markup for the component instance. The template will **replace** the mounted element. Any existing markup inside the mounted element will be ignored, unless content distribution slots are present in the template. |
| 9 | + コンポーネントインスタンスのマークアップとして使われる文字列のテンプレートです。そのテンプレートはマウントされた要素の `innerHTML` を **置換** します。マウントされた要素内の既存マークアップは、テンプレート内にコンテンツ配信スロットが存在しない限り、どれも無視されます。 |
10 | 10 |
|
11 |
| - If the string starts with `#` it will be used as a `querySelector` and use the selected element's innerHTML as the template string. This allows the use of the common `<script type="x-template">` trick to include templates. |
| 11 | + 文字列が `#` から始まる場合は、`querySelector` として扱われ、テンプレート文字列として選択された要素の innerHTML を使います。これは一般的な `<script type="x-template">` の方法を使って、テンプレートを含むことができます。 |
12 | 12 |
|
13 | 13 | :::tip Note
|
14 |
| - From a security perspective, you should only use Vue templates that you can trust. Never use user-generated content as your template. |
| 14 | + セキュリティの観点からは、あなたが信頼できる Vue テンプレートだけを使うべきです。ユーザが作成したコンテンツをテンプレートとして使ってはいけません。 |
15 | 15 | :::
|
16 | 16 |
|
17 | 17 | :::tip Note
|
18 |
| - If render function is present in the Vue option, the template will be ignored.::: |
| 18 | + Render 関数が Vue オプションに存在する場合、テンプレートは無視されます。 |
| 19 | + ::: |
19 | 20 |
|
20 |
| -- **See also:** |
21 |
| - - [Lifecycle Diagram](../guide/instance.html#lifecycle-diagram) |
22 |
| - - [Content Distribution with Slots](../guide/component-basics.html#content-distribution-with-slots) |
| 21 | +- **参照:** |
| 22 | + - [ライフサイクルダイアグラム](../guide/instance.html#ライフサイクルダイアグラム) |
| 23 | + - [スロットによるコンテンツ配信](../guide/component-basics.html#スロットによるコンテンツ配信) |
23 | 24 |
|
24 | 25 | ## render
|
25 | 26 |
|
26 |
| -- **Type:** `Function` |
| 27 | +- **型:** `Function` |
27 | 28 |
|
28 |
| -- **Details:** |
| 29 | +- **詳細:** |
29 | 30 |
|
30 |
| - An alternative to string templates allowing you to leverage the full programmatic power of JavaScript. |
| 31 | + 文字列テンプレートの代わりに、JavaScript のプログラム能力をフル活用することができます。 |
31 | 32 |
|
32 |
| -- **Usage:** |
| 33 | +- **使用方法:** |
33 | 34 |
|
34 | 35 | ```html
|
35 | 36 | <div id="app" class="demo">
|
|
38 | 39 | ```
|
39 | 40 |
|
40 | 41 | ```js
|
41 |
| - const app = Vue.createApp({}) |
| 42 | + const { createApp, h } = Vue |
| 43 | + const app = createApp({}) |
42 | 44 |
|
43 | 45 | app.component('my-title', {
|
44 | 46 | render() {
|
45 |
| - return Vue.h( |
| 47 | + return h( |
46 | 48 | 'h1', // tag name,
|
47 | 49 | this.blogTitle // tag content
|
48 | 50 | )
|
|
59 | 61 | ```
|
60 | 62 |
|
61 | 63 | :::tip Note
|
62 |
| - The `render` function has priority over the render function compiled from `template` option or in-DOM HTML template of the mounting element |
| 64 | + `render` 関数は、`template` オプションや、マウントした要素の DOM 内 HTML テンプレートからコンパイルされたレンダリング関数よりも高い優先度を持ちます。 |
63 | 65 | :::
|
64 | 66 |
|
65 |
| -- **See also:** [Render Functions](../guide/render-function.html) |
| 67 | +- **参照:** [Render 関数](../guide/render-function.html) |
0 commit comments