From 8f780b6cae6f55e7700378115135470dff65f5ca Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Tue, 20 Apr 2021 01:21:06 +0900 Subject: [PATCH 1/6] feat: add guide > data methods --- src/guide/data-methods.md | 125 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 125 insertions(+) create mode 100644 src/guide/data-methods.md diff --git a/src/guide/data-methods.md b/src/guide/data-methods.md new file mode 100644 index 00000000..69c6a14c --- /dev/null +++ b/src/guide/data-methods.md @@ -0,0 +1,125 @@ +# Data Properties and Methods + +## Data Properties + +The `data` option for a component is a function. Vue calls this function as part of creating a new component instance. It should return an object, which Vue will then wrap in its reactivity system and store on the component instance as `$data`. For convenience, any top-level properties of that object are also exposed directly via the component instance: + +```js +const app = Vue.createApp({ + data() { + return { count: 4 } + } +}) + +const vm = app.mount('#app') + +console.log(vm.$data.count) // => 4 +console.log(vm.count) // => 4 + +// Assigning a value to vm.count will also update $data.count +vm.count = 5 +console.log(vm.$data.count) // => 5 + +// ... and vice-versa +vm.$data.count = 6 +console.log(vm.count) // => 6 +``` + +These instance properties are only added when the instance is first created, so you need to ensure they are all present in the object returned by the `data` function. Where necessary, use `null`, `undefined` or some other placeholder value for properties where the desired value isn't yet available. + +It is possible to add a new property directly to the component instance without including it in `data`. However, because this property isn't backed by the reactive `$data` object, it won't automatically be tracked by [Vue's reactivity system](reactivity.html). + +Vue uses a `$` prefix when exposing its own built-in APIs via the component instance. It also reserves the prefix `_` for internal properties. You should avoid using names for top-level `data` properties that start with either of these characters. + +## Methods + +To add methods to a component instance we use the `methods` option. This should be an object containing the desired methods: + +```js +const app = Vue.createApp({ + data() { + return { count: 4 } + }, + methods: { + increment() { + // `this` will refer to the component instance + this.count++ + } + } +}) + +const vm = app.mount('#app') + +console.log(vm.count) // => 4 + +vm.increment() + +console.log(vm.count) // => 5 +``` + +Vue automatically binds the `this` value for `methods` so that it always refers to the component instance. This ensures that a method retains the correct `this` value if it's used as an event listener or callback. You should avoid using arrow functions when defining `methods`, as that prevents Vue from binding the appropriate `this` value. + +Just like all other properties of the component instance, the `methods` are accessible from within the component's template. Inside a template they are most commonly used as event listeners: + +```html + +``` + +In the example above, the method `increment` will be called when the ` + ` +}) +``` From 3915a1fa7cde49e6be69ae29c354151466be59dd Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Tue, 20 Apr 2021 19:55:39 +0900 Subject: [PATCH 2/6] docs: translate guide > data properties and methods --- src/guide/data-methods.md | 52 +++++++++++++++++++-------------------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/src/guide/data-methods.md b/src/guide/data-methods.md index 69c6a14c..8e884c91 100644 --- a/src/guide/data-methods.md +++ b/src/guide/data-methods.md @@ -1,8 +1,8 @@ -# Data Properties and Methods +# データプロパティとメソッド -## Data Properties +## データプロパティ -The `data` option for a component is a function. Vue calls this function as part of creating a new component instance. It should return an object, which Vue will then wrap in its reactivity system and store on the component instance as `$data`. For convenience, any top-level properties of that object are also exposed directly via the component instance: +コンポーネントの `data` オプションは関数です。Vue は新しいコンポーネントのインスタンスを作成する際に、この関数を呼び出します。これはオブジェクトを返すもので、 Vue はオブジェクトをそのリアクティブシステムでラップして、コンポーネントのインスタンスに `$data` として格納します。便宜上、そのオブジェクトのトップレベルのプロパティは、コンポーネントのインスタンスを介して直接公開されます: ```js const app = Vue.createApp({ @@ -16,24 +16,24 @@ const vm = app.mount('#app') console.log(vm.$data.count) // => 4 console.log(vm.count) // => 4 -// Assigning a value to vm.count will also update $data.count +// vm.count に値を代入すると、 $data.count も更新 vm.count = 5 console.log(vm.$data.count) // => 5 -// ... and vice-versa +// ... 逆もまた同様 vm.$data.count = 6 console.log(vm.count) // => 6 ``` -These instance properties are only added when the instance is first created, so you need to ensure they are all present in the object returned by the `data` function. Where necessary, use `null`, `undefined` or some other placeholder value for properties where the desired value isn't yet available. +これらのインスタンスプロパティは、インスタンスの初回作成時にのみ追加されます。そのため、 `data` 関数から返されたオブジェクトに、それらがすべて含まれていることを確認する必要があります。必要に応じて、必要な値がまだ利用できないプロパティには、 `null` や `undefined` 、またはその他のプレースホルダーの値を使ってください。 -It is possible to add a new property directly to the component instance without including it in `data`. However, because this property isn't backed by the reactive `$data` object, it won't automatically be tracked by [Vue's reactivity system](reactivity.html). +新しいプロパティを `data` に含めずに、コンポーネントのインスタンスに直接追加することはできます。しかし、このプロパティはリアクティブな `$data` オブジェクトによって裏付けされていないので、 [Vue のリアクティブシステム](reactivity.html) によって、自動的に追跡されることはありません。 -Vue uses a `$` prefix when exposing its own built-in APIs via the component instance. It also reserves the prefix `_` for internal properties. You should avoid using names for top-level `data` properties that start with either of these characters. +Vue は、コンポーネントのインスタンスを介して自身のビルトイン API を公開する際に、 `$` をプレフィックスに使います。 また、内部プロパティのために `_` を予約しています。トップレベルの `data` プロパティの名前に、これらの文字からはじまる名前を使うことは避けるべきです。 -## Methods +## メソッド -To add methods to a component instance we use the `methods` option. This should be an object containing the desired methods: +コンポーネントのインスタンスにメソッドを追加するには、 `methods` オプションを使います。これは必要なメソッドを含むオブジェクトでなければなりません: ```js const app = Vue.createApp({ @@ -42,7 +42,7 @@ const app = Vue.createApp({ }, methods: { increment() { - // `this` will refer to the component instance + // `this` はコンポーネントインスタンスを参照 this.count++ } } @@ -57,17 +57,17 @@ vm.increment() console.log(vm.count) // => 5 ``` -Vue automatically binds the `this` value for `methods` so that it always refers to the component instance. This ensures that a method retains the correct `this` value if it's used as an event listener or callback. You should avoid using arrow functions when defining `methods`, as that prevents Vue from binding the appropriate `this` value. +Vue は、 `methods` の `this` を自動的に束縛して、常にコンポーネントのインスタンスを参照します。これにより、メソッドがイベントリスナやコールバックとして使われる際に、正しい `this` の値を保持することができます。Vue が適切な `this` の値を束縛するのを防ぐため、 `methods` を定義する際にはアロー関数を使うのは避けるべきです。 -Just like all other properties of the component instance, the `methods` are accessible from within the component's template. Inside a template they are most commonly used as event listeners: +コンポーネントのインスタンスの他のすべてのプロパティと同様に、 `methods` はコンポーネントのテンプレート内からアクセスできます。テンプレート内からはよくイベントリスナとして使われます: ```html ``` -In the example above, the method `increment` will be called when the `