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
In Vue 3, APIs that globally mutate Vue's behavior are now moved to application instances created by the new `createApp`method. In addition, their effects are now scoped to that specific application's instance:
3
+
Vue 3 では、Vue の動作にグローバルな変更を与える API は、新しい `createApp`メソッドによって作成されたアプリケーションインスタンスへと移行されました。さらに、その効果が適用されるスコープは、指定したアプリケーションのインスタンス内に限定されるようになりました:
4
4
5
5
```js
6
6
import { createApp } from'vue'
7
7
8
8
constapp=createApp({})
9
9
```
10
10
11
-
Calling `createApp`returns an application instance. This instance provides an application context. The entire component tree mounted by the application instance share the same context, which provides the configurations that were previously "global" in Vue 2.x.
In addition, since the `createApp`method returns the application instance itself, you can chain other methods after it which can be found in the following sections.
-The application instance if a `definition`argument was passed
76
-
-The directive definition if a `definition`argument was not passed
75
+
-`definition`引数が渡された場合はアプリケーションのインスタンス
76
+
-`definition`引数が渡されていない場合はディレクティブの定義
77
77
78
-
-**Usage:**
78
+
-**使用方法:**
79
79
80
-
Register or retrieve a global directive.
80
+
グローバルディレクティブを登録または取得します。
81
81
82
-
-**Example:**
82
+
-**例:**
83
83
84
84
```js
85
85
import { createApp } from'vue'
86
86
constapp=createApp({})
87
87
88
-
//register
88
+
//登録
89
89
app.directive('my-directive', {
90
-
//Directive has a set of lifecycle hooks:
91
-
//called before bound element's parent component is mounted
90
+
//ディレクティブはライフサイクルのセットをもちます:
91
+
//バインドされた要素の親コンポーネントがマウントされる前に呼び出されます。
92
92
beforeMount() {},
93
-
//called when bound element's parent component is mounted
93
+
//バインドされた要素の親コンポーネントがマウントされた後に呼び出されます。
94
94
mounted() {},
95
-
//called before the containing component's VNode is updated
95
+
//コンポーネントが含む VNode に更新が行われる前に呼び出されます。
96
96
beforeUpdate() {},
97
-
//called after the containing component's VNode and the VNodes of its children // have updated
97
+
//コンポーネントが含む VNode 及びその子要素に更新が行われた場合に呼び出されます。
98
98
updated() {},
99
-
//called before the bound element's parent component is unmounted
99
+
//バインドされた要素の親コンポーネントがアンマウントされる前に呼び出されます。
100
100
beforeUnmount() {},
101
-
//called when the bound element's parent component is unmounted
101
+
//バインドされた要素の親コンポーネントがアンマウントされた後に呼び出されます。
102
102
unmounted() {}
103
103
})
104
104
105
-
//register (function directive)
105
+
//登録 (関数ディレクティブ)
106
106
app.directive('my-directive', () => {
107
-
//this will be called as `mounted` and `updated`
107
+
// `mounted` ならびに `updated` にて呼び出されます。
108
108
})
109
109
110
-
//getter, return the directive definition if registered
110
+
//ゲッター。登録されている場合、ディレクティブ定義を返却します。
111
111
constmyDirective=app.directive('my-directive')
112
112
```
113
113
114
-
Directive hooks are passed these arguments:
114
+
ディレクティブフックには、これらの要素が渡されます:
115
115
116
116
#### el
117
117
118
-
The element the directive is bound to. This can be used to directly manipulate the DOM.
118
+
ディレクティブがバインドされる要素。これを利用することで、 DOM を直接操作できます。
119
119
120
120
#### binding
121
121
122
-
An object containing the following properties.
122
+
このオブジェクトは、以下のプロパティを持ちます。
123
123
124
-
-`instance`: The instance of the component where directive is used.
125
-
-`value`: The value passed to the directive. For example in `v-my-directive="1 + 1"`, the value would be `2`.
126
-
-`oldValue`: The previous value, only available in `beforeUpdate`and`updated`. It is available whether or not the value has changed.
127
-
-`arg`: The argument passed to the directive, if any. For example in `v-my-directive:foo`, the arg would be `"foo"`.
128
-
-`modifiers`: An object containing modifiers, if any. For example in `v-my-directive.foo.bar`, the modifiers object would be `{ foo: true, bar: true }`.
129
-
-`dir`: an object, passed as a parameter when directive is registered. For example, in the directive
124
+
-`instance`: ディレクティブが使われているコンポーネントのインスタンス。
125
+
-`value`: ディレクティブの値。例えば `v-my-directive="1 + 1"` の場合、 value は `2`となります。
Apart from `el`, you should treat these arguments as read-only and never modify them. If you need to share information across hooks, it is recommended to do so through element's [dataset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset).
Apply a mixin in the whole application scope. Once registered they can be used in the template of any component within the current application. This can be used by plugin authors to inject custom behavior into components. **Not recommended in application code**.
Sets a value that can be injected into all components within the application. Components should use `inject` to receive the provided values.
227
-
228
-
From a `provide`/`inject` perspective, the application can be thought of as the root-level ancestor, with the root component as its only child.
226
+
アプリケーション内のすべてのコンポーネントがアクセスできる値を設定します。コンポーネントは provide されている値を受け取るためには、 `inject` を使用しなければなりません。
229
227
230
-
This method should not be confused with the [provide component option](options-composition.html#provide-inject) or the [provide function](composition-api.html#provide-inject) in the composition API. While those are also part of the same `provide`/`inject`mechanism, they are used to configure values provided by a component rather than an application.
Providing values via the application is especially useful when writing plugins, as plugins typically wouldn't be able to provide values using components. It is an alternative to using [globalProperties](application-config.html#globalproperties).
230
+
このメソッドは、 Composition API の [provide コンポーネントオプション](options-composition.html#provide-inject)や [provide 関数](composition-api.html#provide-inject)と混同してはいけません。これらも同じ provide/inject メカニズムの一部ですが、アプリケーションではなく、コンポーネントによって提供される値を設定するために利用されます。
The `provide`and`inject`bindings are NOT reactive. This is intentional. However, if you pass down an observed object, properties on that object do remain reactive.
Install a Vue.js plugin. If the plugin is an Object, it must expose an `install` method. If it is a function itself, it will be treated as the install method.
303
-
304
-
The install method will be called with the application as its first argument. Any `options` passed to `use` will be passed on in subsequent arguments.
0 commit comments