You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying application instance's data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers.
3
+
Vue.js では HTML ベースのテンプレート構文を使っているので、Vue インスタンスのデータと描画された DOM を宣言的に対応させることができます。全ての Vue.js テンプレートは、仕様に準拠しているブラウザや HTML パーサによってパースできる有効な HTML です。
4
4
5
-
Under the hood, Vue compiles the templates into Virtual DOM render functions. Combined with the reactivity system, Vue is able to intelligently figure out the minimal number of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.
5
+
内部では、Vue はテンプレートを仮想 (Virtual) DOM の描画 (render) 関数にコンパイルします。リアクティブシステムと組み合わせて、Vue は再描画に必要なコンポーネントをインテリジェントに把握でき、アプリケーションの状態が変わった時に最低限の DOM 操作を適用します
6
6
7
-
If you are familiar with Virtual DOM concepts and prefer the raw power of JavaScript, you can also [directly write render functions](render-function.html) instead of templates, with optional JSX support.
7
+
もし、あなたが仮想 DOM の概要に詳しく、JavaScript で直接描画するのを好む場合、テンプレートの代わりに[直接 render 関数で書く](render-function.html)ことも可能で、オプションで JSX をサポートしています。
8
8
9
-
## Interpolations
9
+
## 展開
10
10
11
-
### Text
11
+
### テキスト
12
12
13
-
The most basic form of data binding is text interpolation using the "Mustache" syntax (double curly braces):
The mustache tag will be replaced with the value of the `msg`property on the corresponding data object. It will also be updated whenever the data object's `msg`property changes.
You can also perform one-time interpolations that do not update on data change by using the [v-once directive](../api/directives.html#v-once), but keep in mind this will also affect any other bindings on the same node:
<spanv-once>This will never change: {{ msg }}</span>
25
25
```
26
26
27
-
### Raw HTML
27
+
### 生の HTML
28
28
29
-
The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use the [`v-html`directive](../api/directives.html#v-html):
29
+
2重中括弧の mustaches は、データを HTML ではなく、プレーンなテキストとして扱います。実際の HTML として出力するためには、[`v-html`ディレクティブ](../api/directives.html#v-html)を使用する必要があります:
30
30
31
31
```html
32
32
<p>Using mustaches: {{ rawHtml }}</p>
@@ -40,31 +40,31 @@ The double mustaches interprets the data as plain text, not HTML. In order to ou
The contents of the `span`will be replaced with the value of the `rawHtml`property, interpreted as plain HTML - data bindings are ignored. Note that you cannot use `v-html`to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.
43
+
この `span`のコンテンツは `rawHtml`プロパティの値に置き換えられ、プレーンな HTML として解釈されます。Vue は、文字列ベースのテンプレートエンジンではないので、`v-html`をテンプレート部品を構成して使用できないことに注意しましょう。代わりに、UI の再利用や組み合わせのための基礎として、コンポーネントを利用することが好ましいです。
44
44
45
45
::: tip
46
-
Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS vulnerabilities](https://en.wikipedia.org/wiki/Cross-site_scripting). Only use HTML interpolation on trusted content and **never** on user-provided content
46
+
[XSS 脆弱性](https://en.wikipedia.org/wiki/Cross-site_scripting)を容易に引き起こすので、ウェブサイトで動的に任意の HTML を描画することは、非常に危険です。信頼できるコンテンツにだけ HTML 展開を利用してください。ユーザーから提供されたコンテンツに対しては**決して**使用してはいけません。
47
47
:::
48
48
49
-
### Attributes
49
+
### 属性
50
50
51
-
Mustaches cannot be used inside HTML attributes. Instead, use a [`v-bind`directive](../api/#v-bind):
So far we've only been binding to simple property keys in our templates. But Vue.js actually supports the full power of JavaScript expressions inside all data bindings:
{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('')
@@ -73,137 +73,137 @@ So far we've only been binding to simple property keys in our templates. But Vue
73
73
<divv-bind:id="'list-' + id"></div>
74
74
```
75
75
76
-
These expressions will be evaluated as JavaScript in the data scope of the current active instance. One restriction is that each binding can only contain **one single expression**, so the following will **NOT** work:
<!--flow control won't work either, use ternary expressions-->
82
+
<!--フロー制御はいずれも動作しません。三項演算子を使用してください。-->
83
83
{{ if (ok) { return message } }}
84
84
```
85
85
86
-
## Directives
86
+
## ディレクティブ
87
87
88
-
Directives are special attributes with the `v-`prefix. Directive attribute values are expected to be **a single JavaScript expression** (with the exception of `v-for`and`v-on`, which will be discussed later). A directive's job is to reactively apply side effects to the DOM when the value of its expression changes. Let's review the example we saw in the introduction:
88
+
ディレクティブは `v-`から始まる特別な属性です。ディレクティブ属性値は、**単一の JavaScript 式**を期待します(ただし、`v-for`と`v-on` は例外で、これについては後から説明します)。ディレクティブの仕事は、属性値の式が変化したときに、リアクティブに副作用を DOM に適用することです。イントロダクションで見た例を振り返ってみましょう:
89
89
90
90
```html
91
91
<pv-if="seen">Now you see me</p>
92
92
```
93
93
94
-
Here, the `v-if`directive would remove/insert the `<p>`element based on the truthiness of the value of the expression `seen`.
Some directives can take an "argument", denoted by a colon after the directive name. For example, the `v-bind`directive is used to reactively update an HTML attribute:
98
+
ディレクティブの中には "引数" を取るものもあります。これはディレクティブ名の後にコロンで表記します。例えば、`v-bind`ディレクティブは、リアクティブに HTML 属性を更新します:
99
99
100
100
```html
101
101
<av-bind:href="url"> ... </a>
102
102
```
103
103
104
-
Here`href`is the argument, which tells the `v-bind` directive to bind the element's `href`attribute to the value of the expression `url`.
Here`attributeName`will be dynamically evaluated as a JavaScript expression, and its evaluated value will be used as the final value for the argument. For example, if your application instance has a data property, `attributeName`, whose value is `"href"`, then this binding will be equivalent to `v-bind:href`.
Modifiers are special postfixes denoted by a dot, which indicate that a directive should be bound in some special way. For example, the `.prevent`modifier tells the `v-on`directive to call `event.preventDefault()`on the triggered event:
You'll see other examples of modifiers later, [for`v-on`](events.md#event-modifiers) and [for`v-model`](forms.md#modifiers), when we explore those features.
The `v-`prefix serves as a visual cue for identifying Vue-specific attributes in your templates. This is useful when you are using Vue.js to apply dynamic behavior to some existing markup, but can feel verbose for some frequently used directives. At the same time, the need for the `v-` prefix becomes less important when you are building a [SPA](https://en.wikipedia.org/wiki/Single-page_application), where Vue manages every template. Therefore, Vue provides special shorthands for two of the most often used directives, `v-bind`and`v-on`:
They may look a bit different from normal HTML, but`:`and`@`are valid characters for attribute names and all Vue-supported browsers can parse it correctly. In addition, they do not appear in the final rendered markup. The shorthand syntax is totally optional, but you will likely appreciate it when you learn more about its usage later.
175
+
これらは普通の HTML とはちょっと違うように見えるかもしれません。ですが`:`や`@`は属性名に利用可能な文字で、Vue のサポートしているすべてのブラウザで正しくパースすることができます。加えて、最終的に描画されるマークアップにそれらは現れません。省略記法の構文の利用は完全に任意ですが、後でその使用方法について詳しく学んだ時に便利と感じることでしょう。
177
176
178
-
> From the next page on, we'll use the shorthand in our examples, as that's the most common usage for Vue developers.
Dynamic arguments are expected to evaluate to a string, with the exception of `null`. The special value`null`can be used to explicitly remove the binding. Any other non-string value will trigger a warning.
Dynamic argument expressions have some syntax constraints because certain characters, such as spaces and quotes, are invalid inside HTML attribute names. For example, the following is invalid:
We recommend replacing any complex expressions with a [computed property](computed.html), one of the most fundamental pieces of Vue, which we'll cover shortly.
When using in-DOM templates (templates directly written in an HTML file), you should also avoid naming keys with uppercase characters, as browsers will coerce attribute names into lowercase:
This will be converted to v-bind:[someattr] in in-DOM templates.
202
-
Unless you have a "someattr" property in your instance, your code won't work.
201
+
in-DOM テンプレートの中では、v-bind:[someattr] に変換されます。
202
+
インスタンスに "someattr" プロパティがない場合、このコードは動作しません。
203
203
-->
204
204
<av-bind:[someAttr]="value"> ... </a>
205
205
```
206
206
207
-
#### JavaScript Expressions
207
+
#### JavaScript 式 の制約
208
208
209
-
Template expressions are sandboxed and only have access to a [whitelist of globals](https://github.com/vuejs/vue-next/blob/master/packages/shared/src/globalsWhitelist.ts#L3) such as `Math` and `Date`. You should not attempt to access user defined globals in template expressions.
0 commit comments