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
Copy file name to clipboardExpand all lines: src/guide/index.md
+35-35Lines changed: 35 additions & 35 deletions
Original file line number
Diff line number
Diff line change
@@ -4,19 +4,19 @@ type: guide
4
4
order: 2
5
5
---
6
6
7
-
## What is Vue.js?
7
+
## Vue.js とは？
8
8
9
-
Vue (pronounced /vjuː/, like**view**) is a **progressive framework** for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with [modern tooling](application.html) and [supporting libraries](https://github.com/vuejs/awesome-vue#libraries--plugins).
9
+
Vue (発音は / v j u ː / 、**view** と同様）はユーザーインターフェイスを構築するための**プログレッシブフレームワーク**です。他のモノリシックなフレームワークとは異なり、Vue は初めから少しづつ適用していけるように設計されています。コアとなるライブラリは view レイヤだけに焦点を当てているため、Vue.js を使い始めたり、他のライブラリや既存のプロジェクトに統合することはとても簡単です。一方、[モダンなツール](application.html)や[サポートライブラリ](https://github.com/vuejs/awesome-vue#libraries--plugins)と併せて利用することで、洗練されたシングルページアプリケーションを開発することも可能です。
10
10
11
-
If you are an experienced frontend developer and want to know how Vue compares to other libraries/frameworks, check out the [Comparison with Other Frameworks](comparison.html).
The easiest way to try out Vue.js is using the [JSFiddle Hello World example](https://jsfiddle.net/chrisvfritz/4tpzm3e1/). Feel free to open it in another tab and follow along as we go through some basic examples. If you prefer downloading / installing from a package manager, check out the [Installation](/guide/installation.html) page.
15
+
Vue.js を試すには、[JSFiddle Hello World example](https://jsfiddle.net/chrisvfritz/4tpzm3e1/) が最も簡単です。自由に他のタブを開いて、基本的な例を試してみましょう。もしパッケージマネージャからダウンロード/インストールする方を好むなら、[インストール](/guide/installation.html)のページをチェックしてください。
16
16
17
-
## Declarative Rendering
17
+
## 宣言的レンダリング
18
18
19
-
At the core of Vue.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax:
19
+
Vue.js のコアは、単純なテンプレート構文を使って宣言的にデータを DOM にレンダリングすることを可能にするシステムです:
20
20
21
21
```html
22
22
<divid="app">
@@ -45,9 +45,9 @@ var app = new Vue({
45
45
</script>
46
46
{% endraw %}
47
47
48
-
We have already created our very first Vue app! This looks pretty similar to just rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now **reactive**. How do we know? Just open up your browser's JavaScript console and set `app.message`to a different value. You should see the rendered example above update accordingly.
48
+
これで初めての Vue アプリケーションが作成できました！一見するとただテンプレートをレンダリングしているように見えますが、Vue.js は内部で多くの作業を行っています。データと DOM はリンクされ、そして全てが**リアクティブ**になっています。しかし、どうしてそれが分かるのでしょうか？ブラウザの JavaScript コンソールを開いて、`app.message`の値を変えてみましょう。レンダリングされたサンプルが、上記に応じて更新されるのが確認できるでしょう。
49
49
50
-
In addition to text interpolation, we can also bind element attributes like this:
50
+
文字列の展開に加えて、このように要素の属性をバインドすることもできます:
51
51
52
52
```html
53
53
<divid="app-2">
@@ -76,13 +76,13 @@ var app2 = new Vue({
76
76
</script>
77
77
{% endraw %}
78
78
79
-
Here we are encountering something new. The `v-bind`attribute you are seeing is called a **directive**. Directives are prefixed with `v-`to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Here it is basically saying "bind this element's `id`attribute to the`id`property on the Vue instance."
79
+
ここには、何か新しいものがあります。`v-bind`属性はディレクティブと呼ばれています。ディレクティブは Vue.js によって提供された特別な属性を示すために `v-`が接頭辞がついており、あなたが推測したように、レンダリングされた DOM に特定のリアクティブな振舞いを与えます。ここで宣言されているのは、「この要素の `id`属性を Vue インスタンスの`id`プロパティにバインドする」ということになります。
80
80
81
-
Use the browser devtools to inspect the element above - you should see that it has the id `inspect-me`. And yes, it would update if you modify `app2.id`in the console.
81
+
ブラウザの開発者ツールを使って上の要素を調べてみましょう。`inspect-me` という id を持っているのが見えるはずです。そして、コンソールから `app2.id`を変更すれば更新されるでしょう。
82
82
83
-
## Conditionals and Loops
83
+
## 条件分岐とループ
84
84
85
-
It's quite simple to toggle the presence of an element, too:
85
+
要素の有無を切り替えることも非常にシンプルにできます:
86
86
87
87
```html
88
88
<divid="app-3">
@@ -113,11 +113,11 @@ var app3 = new Vue({
113
113
</script>
114
114
{% endraw %}
115
115
116
-
Go ahead and enter `app3.seen = false`in the console. You should see the message disappear.
This second example demonstrates that we can bind data to not only text and attributes, but also the **structure** of the DOM. Moreover, Vue also provides a powerful transition effect system that can automatically apply [transition effects](transitions.html) when elements are inserted/updated/removed by Vue.
118
+
この2つ目の例は、テキストをデータにバインドできるだけではなく、 DOM の**構造**にデータをバインドできることを示しています。さらに Vue は、要素が Vue によって挿入/更新/削除されたとき、自動的に[トランジションエフェクト(遷移効果)](transitions.html)を適用できる強力なトランジションエフェクトシステムも提供します。
119
119
120
-
There are quite a few other directives, each with its own special functionality. For example, the `v-for`directive can be used for displaying a list of items using the data from an Array:
Note in the method we simply update the state of our app without touching the DOM - all DOM manipulations are handled by Vue, and the code you write is focused on the underlying logic.
210
+
メソッドの中では DOM に触ることなくアプリケーションの状態を更新しているだけなことに注意してください。すべての DOM 操作は Vue によって処理され、あなたが書くコードはその後ろにあるロジックに集中できます。
211
211
212
-
Vue also provides the `v-model`directive that makes two-way binding between form input and app state a breeze:
The component system is another important concept in Vue, because it's an abstraction that allows us to build large-scale applications composed of small, self-contained, and often reusable components. If we think about it, almost any type of application interface can be abstracted into a tree of components:
Now you can compose it in another component's template:
257
+
これで他のコンポーネントのテンプレートからこのコンポーネントを利用することができるようになります:
258
258
259
259
```html
260
260
<ul>
261
261
<todov-for="todo in todos"></todo>
262
262
</ul>
263
263
```
264
264
265
-
But this would render the same text for every todo, which is not super interesting. We should be able to pass data from the parent scope into child components. Let's modify the component definition to make it accept a [prop](/guide/components.html#Props):
265
+
しかし、これだと全ての todo で同じテキストがレンダリングされてしまうだけで、あまり面白くありません。親のスコープから子コンポーネントへとデータを渡せるようにすべきです。[prop](/guide/components.html#Props) を受け取れるようにコンポーネントの定義を変えてみましょう:
266
266
267
267
```js
268
268
Vue.component('todo', {
@@ -271,7 +271,7 @@ Vue.component('todo', {
271
271
})
272
272
```
273
273
274
-
Now we can pass the todo into each repeated component using `v-bind`:
274
+
こうすることで、繰り返されるコンポーネントそれぞれに `v-bind` を使って todo を渡すことができます:
275
275
276
276
```html
277
277
<divid="app-7">
@@ -312,9 +312,9 @@ var app7 = new Vue({
312
312
</script>
313
313
{% endraw %}
314
314
315
-
This is just a contrived example, but we have managed to separate our app into two smaller units, and the child is reasonably well-decoupled from the parent via the props interface. We can now further improve our `<todo>`component with more complex template and logic without affecting the parent app.
In a large application, it is necessary to divide the whole app into components to make development manageable. We will talk a lot more about components [later in the guide](/guide/components.html), but here's an (imaginary) example of what an app's template might look like with components:
@@ -326,14 +326,14 @@ In a large application, it is necessary to divide the whole app into components
326
326
</div>
327
327
```
328
328
329
-
### Relation to Custom Elements
329
+
### カスタム要素との関係
330
330
331
-
You may have noticed that Vue components are very similar to **Custom Elements**, which are part of the [Web Components Spec](http://www.w3.org/wiki/WebComponents/). That's because Vue's component syntax is loosely modeled after the spec. For example, Vue components implement the [Slot API](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md)and the `is`special attribute. However, there are a few key differences:
1.The Web Components Spec is still in draft status, and is not natively implemented in every browser. In comparison, Vue components don't require any polyfills and work consistently in all supported browsers (IE9 and above). When needed, Vue components can also be wrapped inside a native custom element.
2. Vue components provide important features that are not available in plain custom elements, most notably cross-component data flow, custom event communication and built tool integrations.
We've just briefly introduced the most basic features of Vue.js core - the rest of this guide will cover them and other advanced features with much finer details, so make sure to read through it all!
0 commit comments