Skip to content

API Reference > Options DOM の翻訳を追従 #396

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jun 17, 2021
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 19 additions & 17 deletions src/api/options-dom.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,34 +2,35 @@

## template

- **Type:** `string`
- **:** `string`

- **Details:**
- **詳細:**

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.
コンポーネントインスタンスのマークアップとして使われる文字列のテンプレートです。そのテンプレートはマウントされた要素の `innerHTML` を **置換** します。マウントされた要素内の既存マークアップは、テンプレート内にコンテンツ配信スロットが存在しない限り、どれも無視されます。

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.
文字列が `#` から始まる場合は、`querySelector` として扱われ、テンプレート文字列として選択された要素の innerHTML を使います。これは一般的な `<script type="x-template">` の方法を使って、テンプレートを含むことができます。

:::tip Note
From a security perspective, you should only use Vue templates that you can trust. Never use user-generated content as your template.
セキュリティの観点からは、あなたが信頼できる Vue テンプレートだけを使うべきです。ユーザが作成したコンテンツをテンプレートとして使ってはいけません。
:::

:::tip Note
If render function is present in the Vue option, the template will be ignored.:::
Render 関数が Vue オプションに存在する場合、テンプレートは無視されます。
:::

- **See also:**
- [Lifecycle Diagram](../guide/instance.html#lifecycle-diagram)
- [Content Distribution with Slots](../guide/component-basics.html#content-distribution-with-slots)
- **参照:**
- [ライフサイクルダイアグラム](../guide/instance.html#ライフサイクルダイアグラム)
- [スロットによるコンテンツ配信](../guide/component-basics.html#スロットによるコンテンツ配信)

## render

- **Type:** `Function`
- **:** `Function`

- **Details:**
- **詳細:**

An alternative to string templates allowing you to leverage the full programmatic power of JavaScript.
文字列テンプレートの代わりに、JavaScript のプログラム能力をフル活用することができます。

- **Usage:**
- **使用方法:**

```html
<div id="app" class="demo">
Expand All @@ -38,11 +39,12 @@
```

```js
const app = Vue.createApp({})
const { createApp, h } = Vue
const app = createApp({})

app.component('my-title', {
render() {
return Vue.h(
return h(
'h1', // tag name,
this.blogTitle // tag content
)
Expand All @@ -59,7 +61,7 @@
```

:::tip Note
The `render` function has priority over the render function compiled from `template` option or in-DOM HTML template of the mounting element
`render` 関数は、`template` オプションや、マウントした要素の DOM HTML テンプレートからコンパイルされたレンダリング関数よりも高い優先度を持ちます。
:::

- **See also:** [Render Functions](../guide/render-function.html)
- **参照:** [Render 関数](../guide/render-function.html)