Skip to content

8月後半の更新に追従 #508

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 17 commits into from
Sep 4, 2021
Merged
Show file tree
Hide file tree
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
17 changes: 0 additions & 17 deletions src/.vuepress/public/images/sponsors/autocode.svg

This file was deleted.

Binary file added src/.vuepress/public/images/sponsors/hbuilder.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions src/.vuepress/theme/data/patreon-sponsors.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ export default {
],
"special_sponsors": [
{
"url": "https://autocode.com",
"img": "autocode.svg",
"name": "Autocode",
"description": "Build app-to-app workflows and connect APIs"
"url": "https://www.dcloud.io/hbuilderx.html?hmsr=vue-en&hmpl=&hmcu=&hmkw=&hmci=",
"img": "hbuilder.png",
"name": "HBuilder",
"description": "An IDE for Vue"
}
],
"platinum_sponsors": [
Expand Down
2 changes: 1 addition & 1 deletion src/api/refs-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ count.value++
console.log(count.value) // 1
```

If an object is assigned as a ref's value, the object is made deeply reactive by the [reactive](./basic-reactivity.html#reactive) method.
If an object is assigned as a ref's value, the object is made deeply reactive by the [reactive](./basic-reactivity.html#reactive) function.

**Typing:**

Expand Down
8 changes: 4 additions & 4 deletions src/api/sfc-script-setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ Think of `MyComponent` as being referenced as a variable. If you have used JSX,

### Dynamic Components

Since components are referenced as variables instead of registered under string keys, we should use dynamic `:is` binding when using dynamic components inside `<script setup>`:
Since components are referenced as variables instead of registered under string keys, you should use dynamic `:is` binding when using dynamic components inside `<script setup>`:

```vue
<script setup>
Expand Down Expand Up @@ -133,7 +133,7 @@ import * as Form from './form-components'

## `defineProps` and `defineEmits`

To declare options like `props` and `emits` with full type inference support, we can use the `defineProps` and `defineEmits` APIs, which are automatically available inside `<script setup>`:
To declare `props` and `emits` in `<script setup>`, you must use the `defineProps` and `defineEmits` APIs, which provide full type inference support and are automatically available inside `<script setup>`:

```vue
<script setup>
Expand All @@ -148,7 +148,7 @@ const emit = defineEmits(['change', 'delete'])

- `defineProps` and `defineEmits` are **compiler macros** only usable inside `<script setup>`. They do not need to be imported, and are compiled away when `<script setup>` is processed.

- `defineProps` accepts the same value as the `props` option, while `defineEmits` accepts the same value as the `emits` option.
- `defineProps` accepts the same value as the [`props` option](/api/options-data.html#props), while `defineEmits` accepts the same value as the [`emits` option](/api/options-data.html#emits).

- `defineProps` and `defineEmits` provide proper type inference based on the options passed.

Expand Down Expand Up @@ -195,7 +195,7 @@ const attrs = useAttrs()

## Usage alongside normal `<script>`

`<script setup>` can be used alongside normal `<script>`. A normal `<script>` may be needed in cases where we need to:
`<script setup>` can be used alongside normal `<script>`. A normal `<script>` may be needed in cases where you need to:

- Declare options that cannot be expressed in `<script setup>`, for example `inheritAttrs` or custom options enabled via plugins.
- Declaring named exports.
Expand Down
2 changes: 1 addition & 1 deletion src/api/sfc-style.md
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ A `<style module>` tag is compiled as [CSS Modules](https://github.com/css-modul

The resulting classes are hashed to avoid collision, achieving the same effect of scoping the CSS to the current component only.

Refer to the [CSS Modules spec](https://github.com/css-modules/css-modules) for mode details such as [global exceptions](https://github.com/css-modules/css-modules#exceptions) and [composition](https://github.com/css-modules/css-modules#composition).
Refer to the [CSS Modules spec](https://github.com/css-modules/css-modules) for more details such as [global exceptions](https://github.com/css-modules/css-modules#exceptions) and [composition](https://github.com/css-modules/css-modules#composition).

### Custom Inject Name

Expand Down
2 changes: 1 addition & 1 deletion src/guide/component-registration.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ app.component('my-component-name', {

### 命名のケース (Name Casing)

コンポーネントを文字列テンプレートか単一ファイルコンポーネントで定義する際は、コンポーネント名に 2 つの命名規則があります:
コンポーネントを文字列テンプレートか単一ファイルコンポーネントで定義する際は、名前の付け方に 2 つのオプションがあります:

#### ケバブケース

Expand Down
7 changes: 6 additions & 1 deletion src/guide/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,12 @@ vue upgrade --next
npm の場合:

```bash
$ npm init vite <プロジェクト名> -- --template vue
# npm 6.x
$ npm init vite@latest <プロジェクト名> --template vue

# npm 7+, extra double-dash is needed:
$ npm init vite@latest <プロジェクト名> -- --template vue

$ cd <プロジェクト名>
$ npm install
$ npm run dev
Expand Down
6 changes: 3 additions & 3 deletions src/guide/migration/attribute-coercion.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ badges:
| `draggable` | `draggable` &rarr; `false` |
| `spellcheck` | `spellcheck` &rarr; `true` |

これまでの振る舞いを維持するために、また、`false` を `'false'` に強制するために、3.x Vue の開発者は `contenteditable` `spellcheck` に対して `v-bind` 式を `false` または `'false'` に解決する必要があります
3.x では「列挙されたプロパティ」のために `null` を `'false'` に強制しなくなったため、`contenteditable` `spellcheck` のような場合、2.x と同じ振る舞いを維持するために、開発者は `null` に解決していた `v-bind` 式を `false` に解決するか、`'false'` に変更する必要があります

2.x では、列挙された属性に対して無効な値を `'true'` に強制的に設定していました。これは通常意図していなかったもので、大規模に利用される可能性は低いと思われます。3.x では、`true` または `'true'` を明示的に指定する必要があります。

Expand All @@ -107,7 +107,7 @@ badges:
<tbody>
<tr>
<td rowspan="3">2.x “列挙された属性”<br><small>つまり<code>contenteditable</code>、<code>draggable</code>、<code>spellcheck</code></small></td>
<td><code>undefined</code>, <code>false</code></td>
<td><code>undefined</code></td>
<td><code>undefined</code>, <code>null</code></td>
<td><i>削除されます</i></td>
</tr>
Expand All @@ -120,7 +120,7 @@ badges:
<td><code>"true"</code></td>
</tr>
<tr>
<td><code>null</code>, <code>'false'</code></td>
<td><code>null</code>, <code>false</code>, <code>'false'</code></td>
<td><code>false</code>, <code>'false'</code></td>
<td><code>"false"</code></td>
</tr>
Expand Down
6 changes: 3 additions & 3 deletions src/guide/migration/custom-directives.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ badges:

Vue 2 では、以下のフックを使用して要素のライフサイクルをターゲットにしたカスタムディレクティブが作成していました。これらはすべてオプションです。

- **bind** - ディレクティブが要素にバインドされると発生します。これは一度だけ発生します
- **inserted** - 要素が親 DOM に挿入された後に発生します
- **bind** - ディレクティブが要素にバインドされると呼び出されます。これは一度だけ呼び出されます
- **inserted** - 要素が親 DOM に挿入された後に呼び出されます
- **update** - 要素が更新されたときに呼び出されますが、子はまだ更新されていません。
- **componentUpdated** - コンポーネントと子が更新されると呼び出されます。
- **unbind** - ディレクティブが削除されると呼び出されます。 また、これは一度だけ呼び出されます。
Expand Down Expand Up @@ -45,7 +45,7 @@ Vue.directive('highlight', {
- bind → **beforeMount**
- inserted → **mounted**
- **beforeUpdate**: 追加されました!これは、コンポーネントのライフサイクルフックのように、要素自体が更新される前に呼び出されます。
- update → 削除されました!updated と似たようなものが多すぎて冗長です。代わりに updated を使ってください。
- update → 削除されました! `updated` と似たようなものが多すぎて冗長です。代わりに `updated` を使ってください。
- componentUpdated → **updated**
- **beforeUnmount**: 追加されました!コンポーネントのライフサイクルフックと同様に、要素がマウント解除される直前に呼び出されます。
- unbind -> **unmounted**
Expand Down
14 changes: 7 additions & 7 deletions src/guide/migration/custom-elements-interop.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ badges:
## 概要

- **破壊的変更:** タグをカスタム要素として扱うかのチェックは、テンプレートのコンパイル中に実行されるようになりました。そのためランタイム設定ではなくコンパイラオプションで設定する必要があります。
- **破壊的変更:** 特別な `is` プロパティの使用は予約済みの `<component>` タグのみに制限されます。
- **破壊的変更:** 特別な `is` 属性の使用は予約済みの `<component>` タグのみに制限されます。
- **新規:** ネイティブ HTML のパース制限を回避するためにネイティブ要素で `is` が使用されていた 2.x のユースケースをサポートするため、値の前に `vue:` を付けて、Vue コンポーネントとして解決します。

## 自主的なカスタム要素
Expand Down Expand Up @@ -69,21 +69,21 @@ Vue.config.ignoredElements = ['plastic-button']
<button is="plastic-button">Click Me!</button>
```

Vue では、ブラウザで普遍的に利用できるようになる前のネイティブ属性の動作をシミュレートするために、特別なプロパティ `is` を使用していました。しかし、2.x では、`plastic-button` という名前の Vue コンポーネントをレンダリングしていると解釈されていました。これにより、上記のカスタマイズされたビルトイン要素のネイティブな使用がブロックされます。
Vue では、ブラウザで普遍的に利用できるようになる前のネイティブ属性の動作をシミュレートするために、特別な属性 `is` を使用していました。しかし、2.x では、`plastic-button` という名前の Vue コンポーネントをレンダリングしていると解釈されていました。これにより、上記のカスタマイズされたビルトイン要素のネイティブな使用がブロックされます。

3.0 では、Vue の `is` プロパティの特別な扱いを `<component>` タグのみに制限しています。
3.0 では、Vue の `is` 属性の特別な扱いを `<component>` タグのみに制限しています。

- 予約済みの `<component>` タグで使用された場合、2.x と全く同じ動作をします。
- 通常のコンポーネントに使用すると、通常のプロパティのように動作します
- 通常のコンポーネントに使用すると、通常の属性のように動作します

```html
<foo is="bar" />
```

- 2.x の動作: `bar` コンポーネントをレンダリングします。
- 3.x の動作: `foo` コンポーネントをレンダリングし、`is` プロパティを渡します
- 3.x の動作: `foo` コンポーネントをレンダリングし、`is` 属性を渡します

- 通常の要素で使用される場合、`is` プロパティとして `createElement` の呼び出しに渡され、ネイティブ属性としてもレンダリングされます。これはカスタマイズされたビルトイン要素の使用をサポートします。
- 通常の要素で使用される場合、`is` 属性として `createElement` の呼び出しに渡され、ネイティブ属性としてもレンダリングされます。これはカスタマイズされたビルトイン要素の使用をサポートします。

```html
<button is="plastic-button">Click Me!</button>
Expand All @@ -105,7 +105,7 @@ Vue では、ブラウザで普遍的に利用できるようになる前のネ

### 2.x での構文

Vue 2 では、ネイティブタグに `is` プロパティを使用してこれらの制限を回避することを推奨しています
Vue 2 では、ネイティブタグに `is` 属性を使用してこれらの制限を回避することを推奨しています

```html
<table>
Expand Down
Loading