PROGRAMMING

Slackクローンに動きをつける2【vue.js】

今日も前回やったSlackクローンに動きをつけていきます。

前回の部分と同様にvue.jsの大事な部分ですので、しっかり理解していきたいです。

今日の内容
・methodsについて
・v-on:click

今回は以上を説明し、理解を深めながら作業をしていきたいと思います。





今日の内容

methodsプロパティについて


Vueのmethodsプロパティとは?

アプリケーションを作る中で必要となる様々な関数を一括して管理できるのがmethodsプロパティです。methodsプロパティ内に記述された関数はイベントに対するハンドラや、他の関数内でも呼び出すことができます。

https://www.e-loop.jp/knowledges/4/


methodsプロパティとは、methodsプロパティの中で管理されている関数は、他の関数やハンドラ関数で呼び出すことができる、ということです。

ここで出てくるハンドラ関数とは、イベントハンドラ関数のことを指します。

後ほど出てくる、v-on:clickもそのイベントハンドラの一種です。

この後やるので、一旦ここでは説明を省きます。

methodsプロパティの式は、以下になります。

methods:{
    関数名:function(){
  //または「関数名() { 」
     実行する処理
    }
}

それでは、上の式を使って、loginというfunctionを定義していきます。

<script>
  export default {
    methods:{
      login(){
        window.alert('ログインしてください')
      }
    }
  }
</script>

ここでは、チャットフォームの部分にクリックしたら、「ログインしてください」といアラームを出すようになっています。

  • window.alertとは、ポップアップでメッセージを表示するメソッドです。

ここで、前回の学習をきちんと理解していると「computedとmethodsの違い」について気になると思います。

どうやって使い分けるのか、違いは何かを調べます。


算出プロパティ(computed)vsメソッド(methods)

算出プロパティの代わりに、同じような関数をメソッドとして定義することも可能です。最終的には、2つのアプローチは完全に同じ結果になります。しかしながら、算出プロパティはリアクティブな依存関係にもとづきキャッシュされるという違いがあります。算出プロパティは、リアクティブな依存関係が更新されたときにだけ再評価されます。

https://jp.vuejs.org/v2/guide/computed.html


はい。初心者には全然何言ってるかわかりませんね。

キャッシュされるとは何か。以下のURLを参考にしてみます。

https://time-space.kddi.com/ict-keywords/20191210/2798

キャッシュされるとはつまり、一時的な保存データがスマホやPC内にあることで、再表示のスピードが上がるということです。

以上のキャッシュのことを踏まえると、computedは下記のように説明ができます。

computedは、一度値が呼び出されればその処理が保存されているので、それ以降は処理が実行されなくなるということですね。

逆に、methodsでは、呼び出されるたびに毎回処理が実行されるということです。

具体的に、どのように使い分ければいいのか。


methodsは計算量を増やしてしまうことが多いが、あえてmethodsを使う場合もある。
ドキュメントにもあるが、例えばDateオブジェクトを使って今の日時を返したい場合、computedを使うと日時の値がキャッシュされ、いつアクセスしても同じ日時になってしまう。
このような場合はmethodsにしなければいけない。

https://udomomo.hatenablog.com/entry/2017/12/11/213904


こんな感じで使い分けられるということですね。

それでは、methodsloginを呼び出してみましょう。

v-onディレクティブ

v-onディレクティブで、methodsの値を取り出すことができます。

それでは、v-onディレクティブとは何か。


VueのV-onディレクティブとは?

VueではコンポーネントオブジェクトやVueオブジェクトを使った開発していきますが、それぞれのオブジェクトで用意された関数や変数を使いたくなると思います。Vueのv-onディレクティブイベント名と変数または関数名を指定することによって簡単にそれらの値を使用することができます。

https://www.e-loop.jp/knowledges/7


ここで出てくるイベントとは、HTMLに対して起こる変化のことを指します。例えば、ボタンがクリックされたとか、HTMLが変更したとか、そういたことを指します。

イベントに関しては下記のサイトで説明が載っているので、気になる方は見てみてください。

イベントに関して理解したら、ChatFormにクリックしたら「ログインしてください」と表示できるようにします。

<template>
  <div class="input-container">
    <textarea v-on:click='login'></textarea>// 追加
  </div>
</template>

⬇️
<template>
  <div class="input-container">
    <textarea @click="login"></textarea> // 変更
  </div>
</template>

こんな感じで無事アラートが表示されました。

v-on:で省略することができます。便利なので覚えておくといいですね。

まとめ

これで動きを出す基礎的な部分は終わりました。

次はFirebaseに登録して、使っていきたいと思います。

Firebaseについては、詳しく下記のサイトに載っていますので気になる方は見てみて下さい。

最後まで読んでくださり、ありがとうございました!!

-PROGRAMMING

Copyright © Iseblog ,@2020 All Rights Reserved.