## 概要
今回は、Vue.jsでよく使う主力のプロパティを書いていきます。

## data
dataは、簡単に言うとファイル内で使うデータを設定するものになります。フォームに初期値を設定したり、別のファイルからpropsを使って受け取った値を組み込んだりすることができます。
そして、配列を格納する変数を設定して、メソッドを介したりして、複数のデータを格納することもできたりします。
https://ja.vuejs.org/guide/components/props.html
サンプルコードは以下のようになります。
![img](/mosaic-code.jpg)

## methods
こちらは、ファイル内で使用するメソッドをまとめていくプロパティになります。
以下が、サンプルコードになります。
![img](/mosaic-code.jpg)
## computed
こちらは、プロパティが更新されると、自動的に値が更新される算出プロパティです。
サンプルコードはこちらです。
![img](/mosaic-code.jpg)
こちらは、store/index.jsに定義している、メッセージの一覧を表示するためのメソッドを、画面が表示されると同時に呼び出しています。
このように、画面が表示されると同時に動かしたいメソッドを格納するプロパティです。

## createdとmounted
Vue.jsのcreatedとmountedは、どちらもVue.jsコンポーネントのライフサイクルフックであり、それぞれ特定のタイミングで呼び出されるメソッドです。

createdは、Vue.jsインスタンスが初期化された直後に呼び出されるメソッドで、DOM要素が作成される前に呼び出されます。createdの中では、Vue.jsインスタンスに初期データをセットするなど、初期化に関する処理を行うことができます。

一方、mountedは、Vue.jsインスタンスがDOMにマウントされた後に呼び出されるメソッドです。このタイミングで、Vue.jsインスタンスが作成したDOM要素にアクセスすることができます。mountedの中では、DOMに関する処理を行うことができます。

簡単に言うと以下のような感じです。
createdはDOMがまだ作られていない状態で呼び出すメソッド、mountedではDOMが作成された直後の状態に呼び出すメソッド


## components
これは、コンポーネント化したファイルの一覧をまとめるプロパティになります。
![img](/mosaic-code.jpg)
これは、チャット機能のフォームをコンポーネント化したものです。
templete内では、コンポーネント化したファイルを表示したい場所に、以下のように書きます。
![img](/mosaic-code.jpg)
## 参考にしたサイト
https://reffect.co.jp/vue/vue-js-created-mounted-diffrence#createdmounted
https://qiita.com/tanoken729b/items/5770d4c620163a25ad21

[cv:issue_marketplace_engineer]

## 概要
今回は、Vue.jsでよく使う主力のプロパティを書いていきます。

## data
dataは、簡単に言うとファイル内で使うデータを設定するものになります。フォームに初期値を設定したり、別のファイルからpropsを使って受け取った値を組み込んだりすることができます。
そして、配列を格納する変数を設定して、メソッドを介したりして、複数のデータを格納することもできたりします。
https://ja.vuejs.org/guide/components/props.html
サンプルコードは以下のようになります。
```
data() {
   return {         
     messageText: "",
     age: "",
　　　　　　　　　　　// 配列を格納する変数
     users[]
   }
},
```

## methods
こちらは、ファイル内で使用するメソッドをまとめていくプロパティになります。
以下が、サンプルコードになります。
```
methods: {
        // メッセージを保存
        save(){
            let message = {
                // メッセージ内容
                messageText: this.messageText,
                // 送信者
                username: postUserName.username,
                // 送信時間
                time: getTime()
            }
            this.$emit('clicked', message);
        },
        // メッセージを編集
        messageEdit(){
            const id = parseInt(this.$route.params.id)
            let editMessageData  = {
                id: id,
                messageText: this.messageText,
                username: postUserName.username,
                time: getTime()
            }
            this.$emit('clicked', editMessageData)
        },
```
## computed
こちらは、プロパティが更新されると、自動的に値が更新される算出プロパティです。
サンプルコードはこちらです。
```
computed: {    
    messages() {
      return this.$store.getters.getAll
    },
},
```
こちらは、store/index.jsに定義している、メッセージの一覧を表示するためのメソッドを、画面が表示されると同時に呼び出しています。
このように、画面が表示されると同時に動かしたいメソッドを格納するプロパティです。

## createdとmounted
Vue.jsのcreatedとmountedは、どちらもVue.jsコンポーネントのライフサイクルフックであり、それぞれ特定のタイミングで呼び出されるメソッドです。

createdは、Vue.jsインスタンスが初期化された直後に呼び出されるメソッドで、DOM要素が作成される前に呼び出されます。createdの中では、Vue.jsインスタンスに初期データをセットするなど、初期化に関する処理を行うことができます。

一方、mountedは、Vue.jsインスタンスがDOMにマウントされた後に呼び出されるメソッドです。このタイミングで、Vue.jsインスタンスが作成したDOM要素にアクセスすることができます。mountedの中では、DOMに関する処理を行うことができます。

簡単に言うと以下のような感じです。
createdはDOMがまだ作られていない状態で呼び出すメソッド、mountedではDOMが作成された直後の状態に呼び出すメソッド


## components
これは、コンポーネント化したファイルの一覧をまとめるプロパティになります。
```
components: {
    ChatForm
},
```
これは、チャット機能のフォームをコンポーネント化したものです。
templete内では、コンポーネント化したファイルを表示したい場所に、以下のように書きます。
```
<ChatForm/>
```
## 参考にしたサイト
https://reffect.co.jp/vue/vue-js-created-mounted-diffrence#createdmounted
https://qiita.com/tanoken729b/items/5770d4c620163a25ad21

[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

概要

data

続きを読むには単価診断を受けてください（30秒）