Slackクローンに動きをつける２【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

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

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

v-onディレクティブ

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

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

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

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

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

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

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

www.w3schools.com

JavaScript Events

https://www.w3schools.com/js/js_events.asp

Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

イベントに関して理解したら、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>